fix(select): Improve the a11y of select component by making overlay

always exist in the DOM

Author: tinayuangao

src/cdk/overlay/overlay-directives.spec.ts

@@ -120,6 +120,18 @@ describe('Overlay directives', () => {
         'Expected overlay to have been detached.');
   });
 
+  it('should not close when pressing escape when changed the setting of "detachOnEscape"', () => {
+    fixture.componentInstance.isOpen = true;
+    fixture.componentInstance.detachOnEscape = false;
+    fixture.detectChanges();
+
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.textContent!.trim()).not.toBe('',
+      'Expected overlay to have not been detached.');
+  });
+
   it('should not depend on the order in which the `origin` and `open` are set', async(() => {
     fixture.destroy();
 
@@ -467,6 +479,7 @@ describe('Overlay directives', () => {
             [cdkConnectedOverlayFlexibleDimensions]="flexibleDimensions"
             [cdkConnectedOverlayGrowAfterOpen]="growAfterOpen"
             [cdkConnectedOverlayPush]="push"
+            [cdkConnectedOverlayDetachOnEscape]="detachOnEscape"
             cdkConnectedOverlayBackdropClass="mat-test-class"
             (backdropClick)="backdropClickHandler($event)"
             [cdkConnectedOverlayOffsetX]="offsetX"
@@ -498,6 +511,7 @@ class ConnectedOverlayDirectiveTest {
   flexibleDimensions: boolean;
   growAfterOpen: boolean;
   push: boolean;
+  detachOnEscape: boolean = true;
   backdropClickHandler = jasmine.createSpy('backdropClick handler');
   positionChangeHandler = jasmine.createSpy('positionChangeHandler');
   positionOverrides: ConnectionPositionPair[];

src/cdk/overlay/overlay-directives.ts

@@ -165,6 +165,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
       this._scrollStrategy();
 
+  /** Strategy to detach the overlay panel on ESCAPE keydown */
+  @Input('cdkConnectedOverlayDetachOnEscape') detachOnEscape: boolean = true;
+
   /** Whether the overlay is open. */
   @Input('cdkConnectedOverlayOpen') open: boolean = false;
 
@@ -335,7 +338,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._createOverlay();
 
       this._overlayRef!.keydownEvents().subscribe((event: KeyboardEvent) => {
-        if (event.keyCode === ESCAPE) {
+        if (this.detachOnEscape && event.keyCode === ESCAPE) {
           this._detachOverlay();
         }
       });

src/lib/select/select.html

@@ -19,31 +19,31 @@
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
+  [cdkConnectedOverlayOpen]="true"
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="origin"
-  [cdkConnectedOverlayOpen]="panelOpen"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
   [cdkConnectedOverlayOffsetY]="_offsetY"
+  [cdkConnectedOverlayDetachOnEscape]="false"
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-
   <div
     #panel
     class="mat-select-panel {{ _getPanelTheme() }}"
+    [class.cdk-visually-hidden]="!panelOpen"
     [ngClass]="panelClass"
-    [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
+    [@transformPanel]="panelOpen ? (multiple ? 'showing-multiple' : 'showing') : 'void'"
     (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
     [style.transformOrigin]="_transformOrigin"
     [class.mat-select-panel-done-animating]="_panelDoneAnimating"
     [style.font-size.px]="_triggerFontSize"
     (keydown)="_handleKeydown($event)">
-
     <div
       class="mat-select-content"
-      [@fadeInContent]="'showing'"
+      [@fadeInContent]="panelOpen ? 'showing' : 'void'"
       (@fadeInContent.done)="_onFadeInDone()">
       <ng-content></ng-content>
     </div>