feat(Chip): Improve accessibility for removable chips #8193
Conversation
- Add tabindex and role attributes to removable chip remove icon - Implement keyboard interaction for remove icon (Enter, Space, Backspace keys) - Prevent default event behavior on key interactions - Add dynamic aria-label for remove icon using locale configuration - Enhance keyboard navigation and screen reader support for chip removal
- Add dynamic aria-label for remove button with label context - Fallback to generic 'close' label if no specific label is provided - Enhance screen reader experience for chip removal interaction
packages/primevue/src/chip/Chip.vue
Outdated
| <component | ||
| :is="removeIcon ? 'span' : 'TimesCircleIcon'" | ||
| :class="[cx('removeIcon'), removeIcon]" | ||
| :tabindex="disabled ? -1 : 0" |
There was a problem hiding this comment.
I noticed a referencethis.disabled in the key/click handlers, but I don’t see disabled defined as a prop or coming from a mixin/composable in Chip.vue.
In my local test , this.disabled is undefined
There was a problem hiding this comment.
Thank you @aligoknl for bringing this up! Earlier, I had added the disabled flag in same PR, but it seems it was outside the current scope. Since the disabled prop isn't there yet, and while raising the PR, I realized that its need to separate PR as maybe its feature , so I removed that prop. I might have forgotten to clean it up here, but I’ve now removed it. You can test this now.
If someone requires this feature, I'll create a new PR to address it with document change as well.
2 participants
Summary
Brings the remove icon of removable Chips using keyboard so users can remove chips without a mouse.
What changed
Add tabindex and role="button" to the chip remove icon.
Implement keyboard interaction on the remove icon: Enter, Space, and Backspace trigger removal.
Defect Fixes
Fixes #8186 — “Chip component: remove icon not keyboard accessible / lacks proper a11y labeling”.
#8186