Component: Multiselect Component Close Button Accessibility Issues - Close Button is empty + Screen Reader reads 'Unlabeled button' #13859
Labels
Type: Bug
Issue contains a bug related to a specific component. Something about the component is not working
Milestone
Describe the bug
The Multiselect component's close button is not currently passing 508 accessibility tests, because the button is 'empty'. I have attached a screenshot showing the error thrown by WAVE 508 testing tool. For accessibility purposes, button must have content.
![multiselect508closebutton](https://private-user-images.githubusercontent.com/53065222/274324706-61536b88-4cc7-4b2e-8b96-0f0f86ab6d37.PNG?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2OTEwMTAsIm5iZiI6MTczOTY5MDcxMCwicGF0aCI6Ii81MzA2NTIyMi8yNzQzMjQ3MDYtNjE1MzZiODgtNGNjNy00YjJlLThiOTYtMGYwZjg2YWI2ZDM3LlBORz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE2VDA3MjUxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUyYWZlMWNiNjY1MWU4NTM2MDUzOWZmNjg5NTk5OTgzMjk2MzhlNjJmMGM5NDFlZjE5OGMwMDgyMjFjMThiNjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.tLGqaQ1op928a2yJC9mVuzI0G3WqK64fQq2oMF8bhmk)
Additionally, when utilizing a screen reader, the button to close the multiselect reads as 'unlabeled button'. This provides a screen reader user no information about what the button does.
Environment
Windows
Reproducer
https://stackblitz.com/edit/primeng-multiselect-demo?file=README.md
Angular version
16.2.1
PrimeNG version
16.3.1
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
16.19.0
Browser(s)
No response
Steps to reproduce the behavior
Note - Tools used for accessibility testing are WAVE accessibility evaluation tools browser extension and JAWS Screen Reader
To replicate Empty Button error with WAVE tool:
To replicate Screen Reader reading unlabeled button
Expected behavior
There should not be an error for 'empty button' when running accessibility tests on the component. Additionally, when using a screen reader, the screen reader should provide a description for what the button does when the user focuses on the button.
The text was updated successfully, but these errors were encountered: