feat: [Select] make dropdown role=group and pass correct id to options list for a11y #897
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY:
The Select Component in octuple internally uses DropDown and List component to show the list of options. Fixing the following a11y issues found by Axe Devtools in Select component:-
Select
component, the dropdown div is the parent of list (ul/ol) but both containrole="listbox"
. This raises an issue that listbox role could not be inside another listbox role. Hence giving therole="group"
for outer div.Select
component, the aria-label is missing from the input field list (ul/ol) which has the role="listbox". This is because correctid
has not been passed onto the<ul>
element so it could be corrected labeled by the<input>
element usingaria-controls
.GITHUB ISSUE (Open Source Contributors)
JIRA TASK (Eightfold Employees Only):
https://eightfoldai.atlassian.net/browse/ENG-110373
CHANGE TYPE:
TEST COVERAGE:
TEST PLAN:
<input>
and<ul role="listbox">
elements are correctly linked through aria-controls={id} (red boxes in below screenshot)role="group"
, which fixes nested the role="listbox" elements issue.