Skip to content

[bug] stepper icons - accessibility - icon hidden text read as a separated tab in screen-reader #29864

Open
@jumbolu

Description

@jumbolu

Hello,

I am questioned by the accessibility testers while using Stepper.

  1. The icons in stepper-header are considered as decorative icons (aria-hidden="true") except "edit" and "done". I am suggested the "number" icons are meaningful, and should be read by the screen-reader as "Step 1", "Step 2", etc.

  2. The indicator icons (edit and done) are read as a separated tab in the screen-reader:

  • "tab Editable" then followed by "tab matStepLabel"
  • "tab Completed" then followed by "tab matStepLabel"
    Image

Any comments or suggestions to address these accessibility concerns? Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/stepper

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions