fix(expansion): add strong focus indication (#18552)

Since the color contrast on the expansion panel focus state isn't great, it's a good candidate to have strong focus indication.

Author: crisbeto

src/material/expansion/expansion-panel-header.scss

@@ -4,6 +4,7 @@
   align-items: center;
   padding: 0 24px;
   border-radius: inherit;
+  position: relative; // Necessary for the strong focus indication.
 
   &:focus,
   &:hover {

src/material/expansion/expansion-panel-header.ts

@@ -48,7 +48,7 @@ import {MatAccordionTogglePosition} from './accordion-base';
     matExpansionAnimations.expansionHeaderHeight
   ],
   host: {
-    'class': 'mat-expansion-panel-header',
+    'class': 'mat-expansion-panel-header mat-focus-indicator',
     'role': 'button',
     '[attr.id]': 'panel._headerId',
     '[attr.tabindex]': 'disabled ? -1 : 0',

src/material/expansion/expansion-panel.scss

@@ -13,6 +13,9 @@
   transition: margin 225ms $mat-fast-out-slow-in-timing-function,
       mat-elevation-transition-property-value();
 
+  // Required so that the `box-shadow` works after we add `position: relative` to the header.
+  position: relative;
+
   .mat-accordion & {
     &:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
       border-radius: 0;

src/material/expansion/expansion.spec.ts

@@ -49,6 +49,14 @@ describe('MatExpansionPanel', () => {
     expect(headerEl.classList).toContain('mat-expanded');
   }));
 
+  it('should add strong focus indication', fakeAsync(() => {
+    const fixture = TestBed.createComponent(PanelWithContent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.mat-expansion-panel-header').classList)
+      .toContain('mat-focus-indicator');
+  }));
+
   it('should be able to render panel content lazily', fakeAsync(() => {
     const fixture = TestBed.createComponent(LazyPanelWithContent);
     const content = fixture.debugElement.query(