Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Try adding a keyboard-navigable font size selector with visual feedback #17418
I just ran a test with VoiceOver + Safari (Mac):
In addition to @enriquesanchez's comments above, a quick test on Windows 10 with Firefox + NVDA:
I haven't really looked into the code yet so might have further feedback in the next few days
Update on this: I have removed the
VoiceOver is now behaving a little better: "Choose preset. Popup button. Font size. Font size. Group." (It only repeats the "Font size" bit when entering the fieldset)
NVDA is still not announcing the current value of the button; it now reads out "Choose preset button submenu".
Would love some further feedback on this.
NOTE: I haven't touched the focus management issues yet so keyboard interaction is still pretty broken. Will work on that next.
Thanks @tellthemachines! This is looking so much better already.
I tested your latest updates on both NVDA (Firefox) and VO (Safari).
On NVDA + Firefox:
I wasn't able to focus on any of the available options with keyboard only, but I assume this is the part that you mentioned still needs some work.
On VO + Safari:
I think I've addressed most of the issues with focus management and labelling of the custom select control.
I did another round of testing today. Here are my results:
Test with Dragon 15 (Windows + Firefox):
I tried assigning the label explicitly:
..and I still couldn't interact with it.
I then tried also adding an
... and it worked!
What do you think about making this change?
Test with NVDA (Windows + Firefox):
When focusing on the element, NVDA announces:
When interacting with it with keyboard, I wasn't able to just use
It properly indicated number of options, which one was selected and which one I had just selected
The popover stayed open after selection, I was expecting for it to close. I had to click
I ran another test with the small changes I proposed previously for Dragon (explicit label and aria-label added). NVDA announced the component as:
And when interacting with it:
It still announced items and selection to my expectations.
Test with VoiceOver (Mac + Safari):
VO announces the component as:
When interacting with it:
I opened the list with
...and was able to select an option from the list. VO properly announced the number of available options and which one was selected.
When selecting an option, VO announced:
I'm not sure why "Font Size" is being repeated twice. This did not happen with NVDA.
Thanks for testing everything so thoroughly @enriquesanchez !
Re adding an aria-label to the button, sure, let's do that
The up/down arrow navigation issue with NVDA is a tricky one. What's happening is NVDA is not going into forms mode when entering the component, so the arrow keys are working as expected in browse mode. However, triggering forms mode by pressing Insert + Space causes the arrow keys to navigate the options but NVDA doesn't read them out, so that's not terribly good either.
I'm wondering if we should stop pretending that this is a select and abandon the arrow navigation altogether. The other issue with it is that I can't think of how to make it work on Windows only, and not on any of the Mac browsers.
I can reproduce the issue with the popover staying open after an option is selected, on Firefox with and without NVDA and from time to time on Safari, but I haven't found the cause yet. Will investigate further.
VoiceOver repeating the fieldset legend (the "Font Size" bit) is IIRC a bug on their side, and I think it's already been reported to them.
@tellthemachines I agree 100% with this. From previous attempts and testing, I think it's clear that getting full parity with a native select is just not going to happen.
I think we can view this from the lens of a menu button (like the ones we already have on the block toolbar). From what I've gathered, the trick with the menu button is how to display the current state of the button (Regular, Large, etc.) while also having an obvious accessible name that users of speech recognition software could still interact with. This is where I think having a visible label ("Preset Size") and assigning that same label to the button (
With Dragon, if I say "click Preset Size" I should be able to open the menu button, even though the actual real label of the button is "Normal" (from
Not sure if you've come across this article: https://inclusive-components.design/menus-menu-buttons/ . In particular, there's a couple of sections called 'The "choose" event' and 'Persisting choices' (almost at the end of the article) that have examples very similar to what we want here.
@enriquesanchez I tried implementing the menu-menuitemradio pattern described in that article and it messes up our current focus handling with the arrow keys completely, on both NVDA and VoiceOver.
I have removed arrow key navigation when the dropdown is closed and added the aria-label to the button, but still trying to figure out why the dropdown doesn't always close on selection with Firefox and Safari.
I will probably not be able to work on this for the next few days. The PR is updated with my latest changes if anyone wants to pick it up in the meantime.
Note: some of the e2e tests are failing because they're still expecting the old