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

Missing label for resultsList #289

Open
3 tasks done
binarious opened this issue Oct 13, 2021 · 1 comment
Open
3 tasks done

Missing label for resultsList #289

binarious opened this issue Oct 13, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@binarious
Copy link

  • Describe the bug

axe throws the following error:

ARIA input fields must have an accessible name

The node:

<ul id="autoComplete_list_2" role="listbox" hidden=""></ul>
  • To Reproduce
    Run axe on an autocomplete element.

  • Expected behavior
    axe shouldn't throw an error/the listbox should have a label.

@binarious binarious added the bug Something isn't working label Oct 13, 2021
@binarious
Copy link
Author

binarious commented Oct 13, 2021

Workaround 1:

new autoComplete({
  resultsList: {
    element: (list, data) => list.setAttribute('aria-label', 'My Label');
  }
});

Still results in axe errors, because this only gets executed and added on focus.

Workaround/hack 2:

// after new autoComplete
const unlabelledListbox = document.querySelector('ul[role="listbox"]:not([aria-label])');
if (unlabelledListbox) {
  unlabelledListbox.setAttribute('aria-label', 'My Label');
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant