fix(material/core): apply strong focus styles to selected option (#26811

)

Apply strong focus styles to the selected option. Do this by putting the
`.mat-mdc-focus-indicator` class on the ripple element.

Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (#26801).

Align maat-option with list-item's implementation by putting the focus
indicator on a child element of the component root, rather than directly
on the component root.

Does not add aditional DOM nodes.

(cherry picked from commit 96aadaa)

src/material/core/option/option.html

@@ -13,7 +13,7 @@
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
 <span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>
 
-<div class="mat-mdc-option-ripple" mat-ripple
+<div class="mat-mdc-option-ripple mat-mdc-focus-indicator" mat-ripple
      [matRippleTrigger]="_getHostElement()"
      [matRippleDisabled]="disabled || disableRipple">
 </div>

src/material/core/option/option.scss

@@ -128,6 +128,6 @@
 }
 
 // For options, render the focus indicator when the class .mat-mdc-option-active is present.
-.mat-mdc-option-active::before {
+.mat-mdc-option-active .mat-mdc-focus-indicator::before {
   content: '';
 }

src/material/core/option/option.spec.ts

@@ -201,7 +201,12 @@ describe('MatOption component', () => {
     const fixture = TestBed.createComponent(BasicOption);
     const optionNativeElement = fixture.debugElement.query(By.directive(MatOption))!.nativeElement;
 
-    expect(optionNativeElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
+    expect(optionNativeElement.parentElement.querySelector('.mat-mdc-focus-indicator'))
+      .withContext(
+        'expected to find a focus indicator on ' +
+          "either the mat-option element or one of it's children",
+      )
+      .not.toBeNull();
   });
 
   describe('inside inert group', () => {

src/material/core/option/option.ts

@@ -270,7 +270,7 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
     '[attr.aria-disabled]': 'disabled.toString()',
     '(click)': '_selectViaInteraction()',
     '(keydown)': '_handleKeydown($event)',
-    'class': 'mat-mdc-option mat-mdc-focus-indicator mdc-list-item',
+    'class': 'mat-mdc-option mdc-list-item',
   },
   styleUrls: ['option.css'],
   templateUrl: 'option.html',