Accessibility: ng-select ARIA roles and controls (combobox, listbox, option) improperly set
See original GitHub issueDescribe the bug The following aria roles on the searchable multi-select dropdown are improperly set: combobox, listbox, and option. Aria-controls is also not set on the text input element.
To Reproduce Steps to reproduce the behavior (if example is not provided):
- Render the ng-select component, as long as some options are populated, there’s nothing special that needs to happen. The following properties were used to configure the component
<ng-select [items]="options"
[bindLabel]="labelProp"
[multiple]=true
placeholder={{placeholder}}
[formControl] ="formControl"
labelForId={{id}}
aria-label="multiselect-dropdown-widget"
class="custom"
>
- The accessibility assessment was done using the FastPass feature which comes with the ‘Microsoft Accessibility Insights for Web’ extension, available on chrome and edge.
- Once the fastpass is run, the
aria-required-children
check will fail. There are two cases where this fails, which demonstrates the incorrect configuration of aria roles. See screenshots below.
Expected behavior
Based on WCAG 1.3.1 standards, the input text box should be contained in a div with role="combobox"
, and the options should be contained in a div with role="listbox"
. Furthermore, the input text box should have an attribute aria-controls
which is linked to the listbox id, similar to how aria-owns
property is already used. Currently, the entire ng-select component has the role="listbox"
while the input element itself has role="combobox"
.
This links gives an overview of the rule in question https://dequeuniversity.com/rules/axe/3.5/aria-required-children?application=msftAI
This links provides a good example of the correct way to set these roles https://www.w3.org/TR/wai-aria-1.1/#combobox
Screenshots This is the check which fails when the dropdown is not open:
This is the check which fails when the dropdown is opened:
Desktop (please complete the following information):
- OS: Windows
- Browser: Edge (chromium)
- Version: 3.5.0
Issue Analytics
- State:
- Created 3 years ago
- Reactions:8
- Comments:6 (2 by maintainers)
Top GitHub Comments
I already have an approval on this PR https://github.com/ng-select/ng-select/pull/1673, just need someone with write access to approve!
Any updates on this? I would love to have 100 a11y score when using ng-select 😄