Kevin Powell - Community•2y ago

Button Won't Focus On Click (Except In Firefox) Despite Having TabIndex of 0

I created an event that fired on Keyboard Events on a button. In Firefox, I could click on this button to focus it, then press any keys on my keyboard, and the event would fire. In Safari, I could not click on the button to focus it, and had to navigate via keyboard to it. Only then would the event fire on key press. I researched this, and found: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex "Note: If an HTML element renders and has tabindex attribute with any valid integer value, the element can be focused with JavaScript (by calling the focus() method) or visually by clicking with the mouse. The particular tabindex value controls whether the element is tabbable (i.e. reachable via sequential keyboard navigation, usually with the Tab key)." This looked perfect for my needs, so I tried it out. Behaviour did not change in Firefox or Safari, despite the element: - Rendering - Having a tabindex attribute with any valid integer value (0 was an integer last I checked) - Being visually clicked on with the mouse Anyone know what's going on? I'm using nextJS 13.4, with Tauri (although that is not relevant to this issue, as I am testing the browsers via localhost)

3 Replies

SurprisedPikaOP•2y ago

I have also tried

.button {
  pointer-events: all;

  & * {
    pointer-events: none;
  }
}

.button {
  pointer-events: all;

  & * {
    pointer-events: none;
  }
}

to see if maybe i was focussing the svgs inside the button https://support.apple.com/en-gb/guide/safari/ibrw1075/mac Press Tab to highlight each item on a web page Move around a web page to highlight links and buttons without using the mouse. This looked promising, but no dice

SurprisedPikaOP•2y ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

: The Button element - HTML: HyperText Markup Language | MDN

The HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

SurprisedPikaOP•2y ago

ah thank you safari, very cool

Gaming

Programming

Button Won't Focus On Click (Except In Firefox) Despite Having TabIndex of 0