Skip to content

Commit 3b9a7c8

Browse files
committed
fix(radio): able to focus disabled radio button via click
Fixes users being able to focus a disabled radio button by clicking on it. The issue comes from us preserving the -1 tabindex, even if the button is disabled. Fixes #15493.
1 parent 658896f commit 3b9a7c8

File tree

2 files changed

+14
-5
lines changed

2 files changed

+14
-5
lines changed

src/material/radio/radio.spec.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -777,7 +777,7 @@ describe('MatRadio', () => {
777777
.toBe(4, 'Expected the tabindex to be set to "4".');
778778
});
779779

780-
it('should remove the tabindex from the host element', () => {
780+
it('should set the tabindex to -1 on the host element', () => {
781781
const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex);
782782
predefinedFixture.detectChanges();
783783

@@ -799,6 +799,15 @@ describe('MatRadio', () => {
799799
expect(radioButtonEl.hasAttribute('aria-labelledby')).toBe(false);
800800
});
801801

802+
it('should remove the tabindex from the host element when disabled', () => {
803+
const radioButtonEl = fixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;
804+
805+
fixture.componentInstance.disabled = true;
806+
fixture.detectChanges();
807+
808+
expect(radioButtonEl.hasAttribute('tabindex')).toBe(false);
809+
});
810+
802811
});
803812

804813
describe('group interspersed with other tags', () => {
@@ -964,11 +973,11 @@ class RadioGroupWithFormControl {
964973
formControl = new FormControl();
965974
}
966975

967-
@Component({
968-
template: `<mat-radio-button [tabIndex]="tabIndex"></mat-radio-button>`
969-
})
976+
@Component(
977+
{template: `<mat-radio-button [disabled]="disabled" [tabIndex]="tabIndex"></mat-radio-button>`})
970978
class FocusableRadioButton {
971979
tabIndex: number;
980+
disabled = false;
972981
}
973982

974983
@Component({

src/material/radio/radio.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
602602
'[class.mat-accent]': 'color === "accent"',
603603
'[class.mat-warn]': 'color === "warn"',
604604
// Needs to be -1 so the `focus` event still fires.
605-
'[attr.tabindex]': '-1',
605+
'[attr.tabindex]': 'disabled ? null : -1',
606606
'[attr.id]': 'id',
607607
'[attr.aria-label]': 'null',
608608
'[attr.aria-labelledby]': 'null',

0 commit comments

Comments
 (0)