fix(expansion): show header focus state when expanded (#16486)

The expansion-panel currently shows the header focus state when
collapsed. This is an a11y problem because there's no indicator of focus
state when expanded.

Author: jelbourn

src/material/expansion/_expansion-theme.scss

@@ -17,11 +17,11 @@
     border-top-color: mat-color($foreground, divider);
   }
 
-  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {
-    &:not([aria-disabled='true']) {
-      &.cdk-keyboard-focused,
-      &.cdk-program-focused,
-      &:hover {
+  .mat-expansion-panel {
+    & .mat-expansion-panel-header.cdk-keyboard-focused,
+    & .mat-expansion-panel-header.cdk-program-focused,
+    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
+      &:not([aria-disabled='true']) {
         background: mat-color($background, hover);
       }
     }