Skip to content

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

@jamesuhl

Description

@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">

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions