-
Notifications
You must be signed in to change notification settings - Fork 6.9k
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
angular 19
Description
i have one use case in which i am adding drag handles button in my tab group when i am adding one new answer tab with help of external button click, so when one button is clicked, one new tab is added in my tab group and for that new tab , tab header should have drag handles button, now we want that focus behaviour should be like when i click tab first it should go to 1st tab header than drag handle button inside of 1st tab header, than inside tab body.
and drag handle button have this piece of code
[attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'"
so that 2nd tab also have drag handles button but it should not take focus precedence,
now in angular 21, this [attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'" is not working and now focus behaviour is, 1st tab header than drag handle button of first header and than drag handle button of 2nd header and than out side of that tabs,
if i use [tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'"
i am getting tab index behavior as per our expectation.
this issue is specifically observed when [attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'" is set for matButton, as i have replaced matButton with div having role of button and that time it have tab index order as per our need.
anything is changed in matButton?
Reproduction
StackBlitz link:
Steps to reproduce:
- add dynamic button in dom, add [attr.tabindex]="some condition ? '0' : '-1'" on that button and see that this dynamically added button have tab index attribute or not
Expected Behavior
when mat button is rendered in dom dynamically, like added dynamically with if condition, that time if our condition of [attr.tabindex]="some condtion ? '0' : '-1'", it should have either tabindex="0" or "-1" in dom but it doesnt have tabindex attribute at all
Actual Behavior
when mat button is rendered in dom dynamically, like added dynamically with if condition, that time if our condition of [attr.tabindex]="some condtion ? '0' : '-1'", it should have either tabindex="0" or "-1" in dom but it doesn't have tabindex attribute at all
Environment
- Angular: 21.1.4
- CDK/Material:21
- Browser(s):chrome
- Operating System (e.g. Windows, macOS, Ubuntu):windows