bug(mat-stepper): failing basic accessibility rule

[jennifergoncalves]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

mat-stepper is creating the tabpanels INSIDE the tablist. This is semantically incorrect and fails an accessibility rule surrounding roles. The "tabs" should be in the tablist, not the tabpanels.

Reproduction

Steps to reproduce:

1. run accessibility testing (I use the Chrome AXE plugin) on the documentation site: https://material.angular.io/components/stepper/overview

Expected Behavior

The "tabs" should be in the tablist, the tabpanels should NOT be inside the tablist

Actual Behavior

mat-stepper is creating the tabpanels INSIDE the tablist.

Environment

• Angular: https://material.angular.io/components/stepper/overview
• CDK/Material: 15.1.2 (tested back to 12 and that fails as well)
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[crisbeto]

Duplicate of #26444. For what it's worth, we do accessibility testing and this doesn't affect actual users.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}