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.
This commit is contained in:
Kristiyan Kostadinov
2018-09-27 16:09:31 +02:00
committed by Jeremy Elbourn
parent 877ef5d738
commit 5c0a061b98
2 changed files with 20 additions and 1 deletions
+19 -1
View File
@@ -18,7 +18,8 @@ describe('MatRadio', () => {
RadioGroupWithFormControl,
StandaloneRadioButtons,
InterleavedRadioGroup,
TranscludingWrapper
TranscludingWrapper,
RadioButtonWithPredefinedTabindex,
]
});
@@ -714,6 +715,17 @@ describe('MatRadio', () => {
expect(radioButtonInput.tabIndex)
.toBe(4, 'Expected the tabindex to be set to "4".');
});
it('should remove the tabindex from the host element', () => {
const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex);
predefinedFixture.detectChanges();
const radioButtonEl =
predefinedFixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;
expect(radioButtonEl.getAttribute('tabindex')).toBeFalsy();
});
});
describe('group interspersed with other tags', () => {
@@ -873,3 +885,9 @@ class InterleavedRadioGroup {
`
})
class TranscludingWrapper {}
@Component({
template: `<mat-radio-button tabindex="0"></mat-radio-button>`
})
class RadioButtonWithPredefinedTabindex {}
+1
View File
@@ -336,6 +336,7 @@ export const _MatRadioButtonMixinBase:
'[class.mat-radio-checked]': 'checked',
'[class.mat-radio-disabled]': 'disabled',
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
'[attr.tabindex]': 'null',
'[attr.id]': 'id',
// Note: under normal conditions focus shouldn't land on this element, however it may be
// programmatically set, for example inside of a focus trap, in this case we want to forward