Bug (Stepper Component) accessibility issue : The aria-expanded attribute is not allowed on this DIV

[Chandra01B]

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

Following Accessibility issue reported in angular material Stepper component when I ran accessibility scan using "Access Assistant"

"The aria-expanded attribute is not allowed on this DIV"

<div style="transform: none; visibility: inherit;" aria-expanded="true" aria-labelledby="cdk-step-label-0-0" id="cdk-step-content-0-0" class="mat-horizontal-stepper-content ng-trigger ng-trigger-horizontalStepTransition ng-tns-c169-3 ng-star-inserted" role="tabpanel"><form style="" class="ng-untouched ng-pristine ng-invalid ng-star-inserted" novalidate="" _ngcontent-jvi-c176=""><div class="mat-form-field ng-tns-c152-4 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-invalid ng-star-inserted" appearance="fill" _ngcontent-jvi-c176=""><div class="mat-form-field-wrapper ng-tns-c152-4"><div class="mat-form-field-flex ng-tns-c152-4"><div class="mat-form-field-infix ng-tns-c152-4"><input aria-required="true" data-placeholder="Last name, First name" id="mat-input-0" class="mat-input-element mat-form-field-autofill-control ng-tns-c152-4 ng-untouched ng-pristine ng-invalid cdk-text-field-autofill-monitored" required="" formcontrolname="firstCtrl" placeholder="Last name, First name" matinput="" _ngcontent-jvi-c176=""><span class="mat-form-field-label-wrapper ng-tns-c152-4"><label aria-owns="mat-input-0" for="mat-input-0" id="mat-form-field-label-1" class="mat-form-field-label ng-tns-c152-4 mat-empty mat-form-field-empty ng-star-inserted"><div class="ng-tns-c152-4 ng-star-inserted" _ngcontent-jvi-c176="">Name</div><span class="mat-placeholder-required mat-form-field-required-marker ng-tns-c152-4 ng-star-inserted" aria-hidden="true">*</span></label></span></div></div><div class="mat-form-field-underline ng-tns-c152-4 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c152-4"></span></div><div class="mat-form-field-subscript-wrapper ng-tns-c152-4"><div style="opacity: 1; transform: translateY(0%);" class="mat-form-field-hint-wrapper ng-tns-c152-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted"><div class="mat-form-field-hint-spacer ng-tns-c152-4"></div></div></div></div></div><div _ngcontent-jvi-c176=""><button type="submit" class="mat-focus-indicator mat-stepper-next mat-button mat-button-base" matsteppernext="" mat-button="" _ngcontent-jvi-c176=""><span class="mat-button-wrapper">Next</span><span class="mat-ripple mat-button-ripple" matripple=""></span><span class="mat-button-focus-overlay"></span></button></div></form></div>

It looks like this component has aria-expanded on controlled element instead of controlling element based on w3c docs. That may be what causing the issue.

Reproduction

Steps to reproduce:

1. Go to https://material.angular.io/components/stepper/overview
2. Install Access Assistant Chrome extension from here
3. Run "Quick Test" from Access Assistant tool on Stepper Component page.
4. You would notice the issue.

Expected Behavior

Expectation would be no accessibility issues reported on this component.

Actual Behavior

Seeing the following issue.

"The aria-expanded attribute is not allowed on this DIV"

Environment

• Angular: 14.0.0

• CDK/Material: 14.2.1

  "dependencies": {
  "@angular/animations": "~14.0.0",
  "@angular/cdk": "14.2.1",
  "@angular/common": "~14.0.0",
  "@angular/compiler": "~14.0.0",
  "@angular/core": "~14.0.0",
  "@angular/forms": "~14.0.0",
  "@angular/material": "14.2.1",
  "@angular/material-moment-adapter": "14.2.1",
  "@angular/platform-browser": "~14.0.0",
  "@angular/platform-browser-dynamic": "~14.0.0",
  "@angular/router": "~14.0.0",
  "moment": "^2.18.1",
  "rxjs": "~7.4.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.5"
  },

• Browser(s): Chrome

• Operating System (e.g. Windows, macOS, Ubuntu): Mac (Also noticed on Windows as well)