Chips: Accessibility problems in the listbox structure #14984
Labels
Component: Accessibility
Issue or pull request is related to WCAG or ARIA
Status: Discussion
Issue or pull request needs to be discussed by Core Team
Describe the bug
A chip container (ul.p-inputtext) with role listbox should have a descriptive text label.
An element with a role that makes its children presentational (li[role=option].p-chips-input-token) should not contain focusable elements (input).
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
I wonder if those roles are necessary in this context? I think the Grid structure works best here. The same structure is used in Angular Material's Chips example https://material.angular.io/components/chips/overview#chips-connected-to-an-input-field
https://www.w3.org/WAI/ARIA/apg/patterns/grid/
Environment
https://primeng.org/chips
Reproducer
https://primeng.org/chips
Angular version
17.0.0
PrimeNG version
17.10.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
18.6.0
Browser(s)
No response
Steps to reproduce the behavior
https://primeng.org/chips
Expected behavior
https://material.angular.io/components/chips/overview#chips-connected-to-an-input-field
The text was updated successfully, but these errors were encountered: