Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a11y: Incorrect Usage of aria-expanded Attribute in ngx-bootstrap Typeahead Component #6647

Open
haneefxello opened this issue Mar 25, 2024 · 0 comments

Comments

@haneefxello
Copy link

Bug description:
The typeahead component in ngx-bootstrap erroneously adds the aria-expanded attribute to the input field, causing an accessibility issue with the message "ARIA attribute is not allowed: aria-expanded="false". According to the accessibility guidelines outlined on Mozilla Developer Network, the aria-expanded attribute should only be associated with specific roles, such as buttons or combo lists.

This issue is observable in the example provided on the ngx-bootstrap website, particularly in the following link: https://valor-software.com/ngx-bootstrap/#/components/typeahead?tab=overview#Basic-array. Testing this example using axe devtools or Lighthouse reveals the presence of the accessibility issue.

Here is the ngx-bootstrap website link that reproduces the issue:
https://valor-software.com/ngx-bootstrap/#/components/typeahead?tab=overview#Basic-array

Here is the screenshot of the axe devtools accessibility report:
image

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 8.0.0

Angular: 13.3.10

Bootstrap: Not relevant

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior
The typeahead input field in ngx-bootstrap should only utilize supported ARIA attributes in accordance with accessibility guidelines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant