Skip to content

Commit 7d02efe

Browse files
crisbetommalerba
authored andcommitted
fix(material/radio): remove tabindex from host node (#21280)
Removes the `tabindex` from the host node, because it causes some a11y issues. We had it there before so that things like `cdkFocusInitial` would work, but after #21046 it isn't necessary anymore. Fixes #21266. (cherry picked from commit cdfc46b)
1 parent 252327f commit 7d02efe

File tree

4 files changed

+6
-15
lines changed

4 files changed

+6
-15
lines changed

src/material-experimental/mdc-radio/radio.spec.ts

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -788,17 +788,7 @@ describe('MDC-based MatRadio', () => {
788788
const radioButtonEl =
789789
predefinedFixture.debugElement.query(By.css('.mat-mdc-radio-button'))!.nativeElement;
790790

791-
expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
792-
});
793-
794-
it('should set the tabindex to -1 on the host element', () => {
795-
const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex);
796-
predefinedFixture.detectChanges();
797-
798-
const radioButtonEl =
799-
predefinedFixture.debugElement.query(By.css('.mat-mdc-radio-button'))!.nativeElement;
800-
801-
expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
791+
expect(radioButtonEl.hasAttribute('tabindex')).toBe(false);
802792
});
803793

804794
it('should forward a pre-defined tabindex to the underlying input', () => {

src/material-experimental/mdc-radio/radio.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
9797
'[class.mat-primary]': 'color === "primary"',
9898
'[class.mat-accent]': 'color === "accent"',
9999
'[class.mat-warn]': 'color === "warn"',
100-
'[attr.tabindex]': 'disabled ? null : -1',
100+
// Needs to be removed since it causes some a11y issues (see #21266).
101+
'[attr.tabindex]': 'null',
101102
'[attr.aria-label]': 'null',
102103
'[attr.aria-labelledby]': 'null',
103104
'[attr.aria-describedby]': 'null',

src/material/radio/radio.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -781,7 +781,7 @@ describe('MatRadio', () => {
781781
const radioButtonEl =
782782
predefinedFixture.debugElement.query(By.css('.mat-radio-button'))!.nativeElement;
783783

784-
expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
784+
expect(radioButtonEl.hasAttribute('tabindex')).toBe(false);
785785
});
786786

787787
it('should forward a pre-defined tabindex to the underlying input', () => {

src/material/radio/radio.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -636,8 +636,8 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
636636
'[class.mat-primary]': 'color === "primary"',
637637
'[class.mat-accent]': 'color === "accent"',
638638
'[class.mat-warn]': 'color === "warn"',
639-
// Needs to be -1 so the `focus` event still fires.
640-
'[attr.tabindex]': '-1',
639+
// Needs to be removed since it causes some a11y issues (see #21266).
640+
'[attr.tabindex]': 'null',
641641
'[attr.id]': 'id',
642642
'[attr.aria-label]': 'null',
643643
'[attr.aria-labelledby]': 'null',

0 commit comments

Comments
 (0)