Skip to content

Commit 521594f

Browse files
committed
fix(material-experimental/mdc-radio): able to focus disabled radio button via click
We have an existing fix for the regular radio button at #15499, but since it hasn't been merged yet, it got transferred to the MDC-based one. 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.
1 parent 3d35180 commit 521594f

File tree

2 files changed

+13
-3
lines changed

2 files changed

+13
-3
lines changed

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

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

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

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

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

803812
describe('group interspersed with other tags', () => {
@@ -964,10 +973,11 @@ class RadioGroupWithFormControl {
964973
}
965974

966975
@Component({
967-
template: `<mat-radio-button [tabIndex]="tabIndex"></mat-radio-button>`
976+
template: `<mat-radio-button [disabled]="disabled" [tabIndex]="tabIndex"></mat-radio-button>`
968977
})
969978
class FocusableRadioButton {
970979
tabIndex: number;
980+
disabled = false;
971981
}
972982

973983
@Component({

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export class MatRadioGroup extends BaseMatRadioGroup {
8181
'[class.mat-primary]': 'color === "primary"',
8282
'[class.mat-accent]': 'color === "accent"',
8383
'[class.mat-warn]': 'color === "warn"',
84-
'[attr.tabindex]': '-1',
84+
'[attr.tabindex]': 'disabled ? null : -1',
8585
'[attr.aria-label]': 'null',
8686
'[attr.aria-labelledby]': 'null',
8787
'[attr.aria-describedby]': 'null',

0 commit comments

Comments
 (0)