Skip to content

Commit 5c0a061

Browse files
crisbetojelbourn
authored andcommitted
fix(radio): clear tabindex from host element (#13323)
Along the same lines as #13311 and #13308. Clears the `tabindex` from the radio button host element so we don't end up with multiple tab stops.
1 parent 877ef5d commit 5c0a061

File tree

2 files changed

+20
-1
lines changed

2 files changed

+20
-1
lines changed

src/lib/radio/radio.spec.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ describe('MatRadio', () => {
1818
RadioGroupWithFormControl,
1919
StandaloneRadioButtons,
2020
InterleavedRadioGroup,
21-
TranscludingWrapper
21+
TranscludingWrapper,
22+
RadioButtonWithPredefinedTabindex,
2223
]
2324
});
2425

@@ -714,6 +715,17 @@ describe('MatRadio', () => {
714715
expect(radioButtonInput.tabIndex)
715716
.toBe(4, 'Expected the tabindex to be set to "4".');
716717
});
718+
719+
it('should remove the tabindex from the host element', () => {
720+
const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex);
721+
predefinedFixture.detectChanges();
722+
723+
const radioButtonEl =
724+
predefinedFixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;
725+
726+
expect(radioButtonEl.getAttribute('tabindex')).toBeFalsy();
727+
});
728+
717729
});
718730

719731
describe('group interspersed with other tags', () => {
@@ -873,3 +885,9 @@ class InterleavedRadioGroup {
873885
`
874886
})
875887
class TranscludingWrapper {}
888+
889+
890+
@Component({
891+
template: `<mat-radio-button tabindex="0"></mat-radio-button>`
892+
})
893+
class RadioButtonWithPredefinedTabindex {}

src/lib/radio/radio.ts

+1
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,7 @@ export const _MatRadioButtonMixinBase:
336336
'[class.mat-radio-checked]': 'checked',
337337
'[class.mat-radio-disabled]': 'disabled',
338338
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
339+
'[attr.tabindex]': 'null',
339340
'[attr.id]': 'id',
340341
// Note: under normal conditions focus shouldn't land on this element, however it may be
341342
// programmatically set, for example inside of a focus trap, in this case we want to forward

0 commit comments

Comments
 (0)