diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index 2d867d5eb742..02d50f4569c0 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -10,7 +10,6 @@ $mat-radio-ripple-radius: 20px; .mat-radio-button { display: inline-block; -webkit-tap-highlight-color: transparent; - outline: 0; } // Inner label container, wrapping entire element. @@ -142,7 +141,7 @@ $mat-radio-ripple-radius: 20px; opacity: 0.04; } - .mat-radio-button:not(.mat-radio-disabled).cdk-focused & { + .mat-radio-button.cdk-focused & { opacity: 0.12; } diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index d87b9bdcbc38..49e03a8b30e6 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -723,7 +723,7 @@ describe('MatRadio', () => { const radioButtonEl = predefinedFixture.debugElement.query(By.css('.mat-radio-button')).nativeElement; - expect(radioButtonEl.getAttribute('tabindex')).toBe('-1'); + expect(radioButtonEl.getAttribute('tabindex')).toBeFalsy(); }); }); diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 733e72fa7569..dc77a2ef91f6 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -336,8 +336,7 @@ export const _MatRadioButtonMixinBase: '[class.mat-radio-checked]': 'checked', '[class.mat-radio-disabled]': 'disabled', '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', - // Needs to be -1 so the `focus` event still fires. - '[attr.tabindex]': '-1', + '[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