Description
After ComboBox is rendered, there is no aria-label set on the toggle-button.
- ignite-ui version: latest
- browser: All
Steps to reproduce
- Add ComboBox to app
- Tab to the ComboBox using any screen-reader
- Listen to screen reader
Result
The screen reader only announces "button"
Expected result
Ideally, the screen reader would announce (for example) "Toggle dropdown menu, collapsed". Upon clicking the button the screen-reader would announce "Toggle dropdown menu, expanded"
Code
The button is <igx-suffix role="button" class="igx-combo__toggle-button" tabindex="0">. At a minimum, adding an aria-label will convey to the screen reader the function of the button. Additionally, adding aria-expanded, and aria-controls would make the button 508 Compliant with US law.
The aria-controls would have the unique value of an ID generated by the component code, for example: aria-controls="igx-drop-down-0-list" and the aria-expanded would change from true to false depending on the current state of the dropdown. The final rendered code would be <igx-suffix role="button" class="igx-combo__toggle-button" tabindex="0" aria-label="Toggle dropdown menu" aria-controls="igx-drop-down-XX-list" aria-expanded="false">