angular-automatic-lock-bot[bot]
commented
2 years ago 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.
Is this a regression?
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:
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)