question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessibility: ng-select ARIA roles and controls (combobox, listbox, option) improperly set

See original GitHub issue

Describe 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):

  1. 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"
      >
  1. The accessibility assessment was done using the FastPass feature which comes with the ‘Microsoft Accessibility Insights for Web’ extension, available on chrome and edge.
  2. 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: image

This is the check which fails when the dropdown is opened: image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Edge (chromium)
  • Version: 3.5.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:8
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
isaacfimbres1commented, Dec 8, 2020

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!

4reactions
AElmozninocommented, Nov 3, 2020

Any updates on this? I would love to have 100 a11y score when using ng-select 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

ARIA: listbox role - Accessibility - MDN Web Docs - Mozilla
The listbox role is used for lists from which a user may select one or more items ... All selected options have aria-selected...
Read more >
(Deprecated) Collapsible Dropdown Listbox Example - W3C
In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from...
Read more >
@ng-select/ng-select | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
angular - Accessibility issue in ng-select - Stack Overflow
ng-select uses their custom bindLabel Input in order to automatically populate the aria accessibility. aria-label isn't used, ...
Read more >
can't bind to 'items' since it isn't a known property of 'ng-select'
Your error that you detail in your question is directly related to the fact that you have no 'app-dropdown' selector defined, yet your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found