fix: select a11y issues #4668
fix: select a11y issues #4668
Conversation
m4thieulavoie
requested review from
chrisdholt,
EisenbergEffect,
janechu and
nicholasrice
as code owners
| class="control" | ||
| part="control" | ||
| role="button" | ||
| role="textbox" |
There was a problem hiding this comment.
Axe was looking for a child with the textbox role (as per the combobox spec)
There was a problem hiding this comment.
Ah - @m4thieulavoie I think Axe is outdated. The combobox from ARIA 1.1 and 1.2 are significantly different. Should this be combobox rather than textbox? This doesn't fully support free input of text, so I'm not sure that textbox is accurate. Technically I think this is the select-only combobox: https://w3c.github.io/aria-practices/#examples-2
There was a problem hiding this comment.
Oh, let me check the axe version. However, the host already has the combobox role. So perhaps button was the right one here
There was a problem hiding this comment.
@chrisdholt you were absolutely right. Axe has this opened issue to add support for the 1.2 combobox.
I'll close this PR as it seems to be a false alarm on our end!
There was a problem hiding this comment.
All good! Once that AXE update is out, we'd love you to take another pass :)
| aria-haspopup="listbox" | ||
| aria-labelledby="selected-value" |
There was a problem hiding this comment.
This DOM element was requiring a label (or aria-labelledby) in order to be a11y compliant
There was a problem hiding this comment.
I think this is fine, but we should run this via ARIA 1.2 rather than 1.1 as the implications are significant. Is there a way for you to validate against ARIA 1.2 in AXE instead of 1.1?
Pull Request
📖 Description
This PR addresses a few a11y issues that axe raised in an accessibility audit I did today. To give a bit of context, I went from 62 to 42 axe issues in the Select storybook page.
🎫 Issues
👩💻 Reviewer Notes
📑 Test Plan
✅ Checklist
General
$ yarn changeComponent-specific
⏭ Next Steps