Skip to content

Button examples that contain only a mat-icon are missing an accessible name #14998

Closed
@mfairchild365

Description

@mfairchild365

What is the expected behavior?

All buttons that contain a mat-icon in the example must have an accessible name.

What is the current behavior?

All buttons that contain a mat-icon in the example do not have an accessible name.

What are the steps to reproduce?

  1. Using either of the following screen readers
    • NVDA 2018.4.1 + FireFox 64
    • VoiceOver for IOS (12.1.3) + Safari
  2. Open the button example page
  3. Press tab until you reach one of the buttons that contain a mat-icon
  4. Observe that the button does not have an accessible name. Only the role is announced by the screen reader, for example "button".

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

The documentation for buttons states the following:

Buttons or links containing only icons (such as mat-fab, mat-mini-fab, and mat-icon-button) should be given a meaningful label via aria-label or aria-labelledby.

The button examples that contain only icons should be updated to reflect this advice.

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P4A relatively minor issue that is not relevant to core functionsdocsThis issue is related to documentationhelp wantedThe team would appreciate a PR from the community to address this issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions