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 "disableClose"', () => {
+    fixture.componentInstance.isOpen = true;
+    fixture.componentInstance.disableClose = true;
+    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();
 
@@ -479,6 +491,7 @@ describe('Overlay directives', () => {
             [cdkConnectedOverlayFlexibleDimensions]="flexibleDimensions"
             [cdkConnectedOverlayGrowAfterOpen]="growAfterOpen"
             [cdkConnectedOverlayPush]="push"
+            [cdkConnectedOverlayDisableClose]="disableClose"
             cdkConnectedOverlayBackdropClass="mat-test-class"
             (backdropClick)="backdropClickHandler($event)"
             [cdkConnectedOverlayOffsetX]="offsetX"
@@ -511,6 +524,7 @@ class ConnectedOverlayDirectiveTest {
   flexibleDimensions: boolean;
   growAfterOpen: boolean;
   push: boolean;
+  disableClose: boolean = false;
   backdropClickHandler = jasmine.createSpy('backdropClick handler');
   positionChangeHandler = jasmine.createSpy('positionChange handler');
   keydownHandler = jasmine.createSpy('keydown handler');

src/cdk/overlay/overlay-directives.ts

@@ -114,6 +114,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _offsetX: number;
   private _offsetY: number;
   private _position: FlexibleConnectedPositionStrategy;
+  private _disableClose = false;
+  private _open = false;
 
   /** Origin for the connected overlay. */
   @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;
@@ -165,8 +167,15 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
       this._scrollStrategy();
 
+  /** Whether the overlay closes when the user pressed the Escape key. */
+  @Input('cdkConnectedOverlayDisableClose')
+  get disableClose() { return this._disableClose; }
+  set disableClose(value: any) { this._disableClose = coerceBooleanProperty(value); }
+
   /** Whether the overlay is open. */
-  @Input('cdkConnectedOverlayOpen') open: boolean = false;
+  @Input('cdkConnectedOverlayOpen')
+  get open() { return this._open; }
+  set open(value: any) { this._open = coerceBooleanProperty(value); }
 
   /** Whether or not the overlay should attach a backdrop. */
   @Input('cdkConnectedOverlayHasBackdrop')
@@ -340,7 +349,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._overlayRef!.keydownEvents().subscribe((event: KeyboardEvent) => {
         this.overlayKeydown.next(event);
 
-        if (event.keyCode === ESCAPE) {
+        if (!this.disableClose && event.keyCode === ESCAPE) {
           this._detachOverlay();
         }
       });
@@ -359,11 +368,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this.attach.emit();
     }
 
-    if (this.hasBackdrop) {
-      this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
-        this.backdropClick.emit(event);
-      });
-    }
+    this._backdropSubscription = this._overlayRef.backdropClicks().subscribe(event => {
+      this.backdropClick.emit(event);
+    });
   }
 
   /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */

src/cdk/overlay/overlay-ref.ts

@@ -124,7 +124,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     this._togglePointerEvents(true);
 
     if (this._config.hasBackdrop) {
-      this._attachBackdrop();
+      this.attachBackdrop();
     }
 
     if (this._config.panelClass) {
@@ -213,6 +213,10 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     return this._portalOutlet.hasAttached();
   }
 
+  backdropClicks() {
+    return this._backdropClick;
+  }
+
   /** Gets an observable that emits when the backdrop has been clicked. */
   backdropClick(): Observable<MouseEvent> {
     return this._backdropClick.asObservable();
@@ -293,7 +297,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
   }
 
   /** Attaches a backdrop for this overlay. */
-  private _attachBackdrop() {
+  attachBackdrop() {
     const showingClass = 'cdk-overlay-backdrop-showing';
 
     this._backdropElement = this._document.createElement('div');

src/lib/select/select.html

@@ -18,32 +18,31 @@
 <ng-template
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
-  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayOpen
+  cdkConnectedOverlayDisableClose
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="origin"
-  [cdkConnectedOverlayOpen]="panelOpen"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
   [cdkConnectedOverlayOffsetY]="_offsetY"
   (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]="_transformPanel"
     (@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>