Angular ComboBox: Accessible Label and Function of Toggle Button of ComboBox dropdown not announced by Screen-reader

[jamesuhl]

Description

After ComboBox is rendered, there is no aria-label set on the toggle-button.

• ignite-ui version: latest
• browser: All

Steps to reproduce

1. Add ComboBox to app
2. Tab to the ComboBox using any screen-reader
3. 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">