Skip to content

Commit 3c99efc

Browse files
authored
fix(material-experimental/mdc-radio): strong focus indicator not working (#19091)
We recently added strong focus indication for the MDC-based radio, but accidentally used the strong-focus indication class from `@angular/material`. This means that strong focus indiciation won't work if only the focus indicator styles from `mdc-helpers` are used. This came up in the audit of classes for the MDC migration.
1 parent 0bd1e4a commit 3c99efc

File tree

3 files changed

+3
-3
lines changed

3 files changed

+3
-3
lines changed

src/material-experimental/mdc-helpers/_mdc-helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ $mat-typography-level-mappings: (
259259
// the hidden input is focused (slightly different for each control).
260260
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
261261
.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
262-
.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before,
262+
.mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
263263

264264
// For all other components, render the focus indicator on focus.
265265
.mat-mdc-focus-indicator:focus::before {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="mdc-radio__inner-circle"></div>
1919
</div>
2020
<div class="mdc-radio__ripple"></div>
21-
<div mat-ripple class="mat-radio-ripple mat-focus-indicator"
21+
<div mat-ripple class="mat-radio-ripple mat-mdc-focus-indicator"
2222
[matRippleTrigger]="formField"
2323
[matRippleDisabled]="_isRippleDisabled()"
2424
[matRippleCentered]="true"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,7 @@ describe('MDC-based MatRadio', () => {
399399
radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!);
400400

401401
expect(radioRippleNativeElements
402-
.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
402+
.every(element => element.classList.contains('mat-mdc-focus-indicator'))).toBe(true);
403403
});
404404

405405
});

0 commit comments

Comments
 (0)