Skip to content

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

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

Activity

changed the title [-]stepper icons - accessibility[/-] [+][bug] stepper icons - accessibility - icon hidden text read as a separated tab in screen-reader[/+] on Oct 17, 2024
added
needs triageThis issue needs to be triaged by the team
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
AccessibilityThis issue is related to accessibility (a11y)
and removed
needs triageThis issue needs to be triaged by the team
on Nov 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

        Participants

        @crisbeto@jumbolu

        Issue actions

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