diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index fca59ae3e331..1c142f3919ea 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/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 { diff --git a/src/material/expansion/expansion-panel-header.ts b/src/material/expansion/expansion-panel-header.ts index d70c27ccc8f9..93e6c53b17e7 100644 --- a/src/material/expansion/expansion-panel-header.ts +++ b/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', diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index 45b5866912ff..06b3d824a886 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/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; diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts index 711c1e048a62..0b05a6e50e7c 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/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(