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

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.

Author: zarend

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.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',