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

Autocomplete multiple accessibility #17457

Open
1 of 4 tasks
AtiposEiji opened this issue Jan 21, 2025 · 0 comments
Open
1 of 4 tasks

Autocomplete multiple accessibility #17457

AtiposEiji opened this issue Jan 21, 2025 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@AtiposEiji
Copy link

Describe the bug

Using Axe DevTools, the autoComplete component with the multiple property has two accessibility issues:

  1. ARIA input fields must have an accessible name
    Ensure every ARIA input field has an accessible name
    <ul role="listbox" ng-reflect-ng-class="[object Object]" tabindex="-1" aria-orientation="horizontal" class="p-autocomplete-multiple- container p-component p-inputtext ng-star-inserted">

    To solve this problem, you need to fix at least (1) of the following:

    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
  2. Interactive controls must not be nested
    Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive
    technologies.

    <li role="option" class="p-autocomplete-input-token"><input pautofocus="" role="combobox" aria-autocomplete="list" class="p-element" ng-reflect-ng-class="[object Object]" autocomplete="off" tabindex="0" type="text" id="tags" placeholder="Seleziona" aria- expanded="false"></li>

    To solve this problem, you need to fix the following:
    Element has focusable descendants

    Related Node
    <input pautofocus="" role="combobox" aria-autocomplete="list" class="p-element" ng-reflect-ng-class="[object Object]" autocomplete="off" tabindex="0" type="text" id="tags" placeholder="Seleziona" aria-expanded="false">

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/stackblitz-starters-fj7shuqs

Environment

macOS Sequoia 15.1.1

Angular version

19.0.7

PrimeNG version

v19

Node version

20

Browser(s)

No response

Steps to reproduce the behavior

  1. Open DevTools -> axe DevTools
  2. Click on Full Page Scan and wait.

Expected behavior

It would be preferable if they were accessible

@AtiposEiji AtiposEiji added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant