design icon indicating copy to clipboard operation
design copied to clipboard

Fixes knob accessible names

Open SchwartzMPNYC opened this issue 3 months ago • 0 comments

The aria-labelledby attribute that's responsible for labeling knob controls doesn't currently match the id that's set on said label.

image

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: image

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. image

This change works the other change to put both data points in the accessibility tree. image

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.

SchwartzMPNYC avatar Mar 27 '24 21:03 SchwartzMPNYC