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