Skip to content

Some MatSelect elements have an aria-labelledby referring to a non-existent ID #12157

Closed
@mikzat

Description

@mikzat

Bug, feature request, or proposal:

On some MatSelect elements, aXe plugin reports, with a suggestion like this:

ARIA attributes must conform to valid values

Fix the following:
Invalid ARIA attribute value: aria-labelledby="mat-form-field-label-3"

And when inspecting the page, there really is no element with ID mat-form-field-label-3.

What is the expected behavior?

aria-labelledby on a <mat-select> refers to an existing label element with the correct ID.

aXe plugin should not show MatSelect issue ARIA attributes must conform to valid values.

What is the current behavior?

aria-labelledby on a <mat-select> sometimes refers to a non-existent ID.

aXe plugin reports issue ARIA attributes must conform to valid values.

What are the steps to reproduce?

  1. Go to https://material.angular.io/components/select/overview
  2. Run aXe
  3. Issue detected on MatSelect under the Select with 2-way value binding section

What is the use-case or motivation for changing an existing behavior?

Accessibility

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

Tested with Chrome Version 67.0.3396.99 (Official Build) (64-bit)

Is there anything else we should know?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions