design
design copied to clipboard
Fixes knob accessible names
The aria-labelledby
attribute that's responsible for labeling knob controls doesn't currently match the id
that's set on said label.
On controls with placeholders (ie, text boxes) this appears to be at least somewhat mitigated by the fact that the placeholder is providing an accessible name to assistive tech. However, for any knob that contains the required disclaimer, that markup still isn't being associated with the input itself.
I did have to make some assumptions about the intended format of the ID based on what was currently there. What I landed on was that they should all be prefixed with the phrase knob-
and then continue with the kebab-cased version of the knob name.
Additionally, I have added a role="combobox"
to the knobs that are <Select>
components. Currently, these controls are communicated by assistive tech as being buttons with a name of whatever the selected value is:
With only the aria-labelledby
change included in this pull request, the accessible name on these controls would change to match the text of the label (which is good for context) but then would then not communicate the selected value.
This change works the other change to put both data points in the accessibility tree.
That being said, the combobox change should probably be made at the actual component level. This is intended as band-aid while a library level change like that is considered.