SurprisedPika
KPCKevin Powell - Community
•Created by SurprisedPika on 7/25/2023 in #front-end
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)
7 replies
KPCKevin Powell - Community
•Created by SurprisedPika on 5/6/2023 in #front-end
Making volume control understandable to screen readers
Hey guys. I'm making a music website, and I've created a button that handles volume control.
When you click on this button, it toggles whether the music is muted or not.
When you scroll on this button, or use the arrow keys, it increases or decreases the volume between 0 and 100.
I've not done much accessibility before (bar some simple
aria-label stuff), so I'm not sure how I communicate my intent to someone using a screen reader. I've had a look at a few components from Radix (I'm using NextJS, but it's not particularly relevant here) but I can't translate what they've done to my use case.
Thanks in advance!8 replies