No way to set tabindex of material buttons in Anchor Tag #25733
Description
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
Similar to the issue reported in #12041, when using a material button (in my case mat-icon-button) within an anchor tag , the tabindex always defaults to 0 if enabled, and -1 if disabled. It does work in a button, but buttons are not desirable within a form for my use case.
Sample Code:
<a id="testId" tabindex="-1" mat-icon-button> <mat-icon svgIcon="Help"></mat-icon> </a>
Generated HTML in browser:
<a _ngcontent-wbb-c454="" id="testId" tabindex="0" mat-icon-button="" class="mat-focus-indicator mat-icon-button mat-button-base" aria-disabled="false"><span class="mat-button-wrapper"><mat-icon _ngcontent-wbb-c454="" role="img" svgicon="Help" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true" ng-reflect-svg-icon="Help" data-mat-icon-type="svg" data-mat-icon-name="Help"><svg id="iHelp" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 22 22" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><defs><style> #iHelp .a{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;} </style></defs><g transform="translate(1 1)"><circle class="a" cx="10" cy="10" r="10"></circle><path class="a" d="M9.09,9a3,3,0,0,1,5.83,1c0,2-3,3-3,3" transform="translate(-2 -2)"></path><line class="a" x2="0.01" transform="translate(10 15)"></line></g></svg></mat-icon></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round" ng-reflect-disabled="false" ng-reflect-centered="true" ng-reflect-trigger=""></span><span class="mat-button-focus-overlay"></span></a>
Reproduction
Steps to reproduce:
- Add the tabindex attribute to an Angular Material button in an anchor and observe it is not preserved.
Expected Behavior
The tabindex value should be observed.
Actual Behavior
The tabindex value is ignored.
Environment
- Angular: 13.2.3
- CDK/Material: 13.2.3
- Browser(s): Chrome, FireFox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11