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
Change font-size-picker markup to use select #16148
Changed font-size-picker markup to use fieldset with legend as wrapper and replaced visual dropdown with select.
How has this been tested?
Tested locally on Chrome and on Safari with VoiceOver. Confirmed interaction with controls works as expected. Also tested on Windows with Firefox + NVDA; Noted NVDA doesn't read out the "Font size" legend before each field but only when entering the fieldset; VoiceOver reads it out before each field.
Wondering if it might be worth adding a snapshot and/or an e2e test for this.
Types of changes
Bug fix (non-breaking change which fixes an issue)
@tellthemachines thanks for working on this!
From an accessibility perspective, everything looks good to me
As explained in related issues, it's important to consider the combination of the legend text and the various input labels. In this specific case, removing "font size" from the labels avoids redundant (and a bit pointless) information to be announced to users, as the group is already named "font size".
Yep, implementations differ and actually the most correct behavior is the Firefox + NVDA one
Note: the fieldset legend styling should be quickly tested with Internet Explorer 11, as I seem to recall it was a bit difficult to style in that browser.
The build fails, not sure why.
talldan left a comment •
This looks good to me. I had a few minor comments, but nothing major. Would be good to tidy up the comment above that import, but the other two comments are more subjective.
I actually looked into this briefly a couple weeks ago. This seems to be mosly up to date:
In general: Webkit browsers, and Firefox on Mac do not allow much styling. IE, Firefox, and Opera allow you to do a bit of minimal styling on Windows and Linux. (But I imagine that'll change a bit once the next version of IE adopts webkit.) Also, iOS does not allow you to style select fields. I do not have an Android phone handy at the moment, but I do not believe they support styling them either.
In short: if we move forward with a select box here, we shouldn't count on styling it.
While I have never used nor tested it, this select component from Deque's patter library seems to be fully accessible while also allowing for custom styling: https://pattern-library.dequelabs.com/components/selects.
Could something like that work for us?
That looks like an excellent implementation. Still not native though. Off the top of my head, I can spot a couple issues at a first glance:
Maybe @dboudreau can help and give us some updated feedback or point us to someone at deque (when you have a chance, that would be greatly appreciated!). Background: evaluating to use the deque select component in WordPress.