Close material dialog's parent modal on escape key by default.

PiperOrigin-RevId: 225044834

Author: cissyshi

angular_components/lib/material_dialog/material_dialog.dart

@@ -8,6 +8,7 @@ import 'dart:html';
 import 'package:angular/angular.dart';
 import 'package:angular_components/focus/focus_trap.dart';
 import 'package:angular_components/laminate/components/modal/modal.dart';
+import 'package:angular_components/model/a11y/keyboard_handler_mixin.dart';
 import 'package:angular_components/utils/browser/dom_service/dom_service.dart';
 import 'package:angular_components/utils/disposer/disposer.dart';
 
@@ -30,7 +31,9 @@ import 'package:angular_components/utils/disposer/disposer.dart';
   directives: [FocusTrapComponent, NgIf],
   changeDetection: ChangeDetectionStrategy.OnPush,
 )
-class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
+class MaterialDialogComponent
+    with KeyboardHandlerMixin
+    implements AfterContentChecked, OnDestroy {
   final HtmlElement _rootElement;
   final DomService _domService;
   final ChangeDetectorRef _changeDetector;
@@ -48,7 +51,9 @@ class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
   bool _shouldListenForFullscreenChanges = false;
 
   MaterialDialogComponent(this._rootElement, this._domService,
-      this._changeDetector, @Optional() this._modal);
+      this._changeDetector, @Optional() this._modal) {
+    escapeHandler = _defaultEscapeHandler;
+  }
 
   @ViewChild('main', read: HtmlElement)
   set main(HtmlElement element) {
@@ -62,6 +67,11 @@ class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
     }));
   }
 
+  /// Function to handle escape key events from the dialog. By default it tries
+  /// to close the parent modal, if any.
+  @Input()
+  KeyboardEventHandler escapeHandler;
+
   /// Error to show up in the error section of the dialog.
   @Input()
   String error;
@@ -146,6 +156,20 @@ class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
     }
   }
 
+  @override
+  void handleEscapeKey(KeyboardEvent event) {
+    if (escapeHandler != null) {
+      escapeHandler(event);
+    }
+  }
+
+  void _defaultEscapeHandler(KeyboardEvent event) {
+    if (_modal != null) {
+      event.preventDefault();
+      _modal.close();
+    }
+  }
+
   @override
   void ngAfterContentChecked() {
     if (_shouldListenForFullscreenChanges) {

angular_components/lib/material_dialog/material_dialog.html

@@ -3,7 +3,7 @@
  for details. All rights reserved. Use of this source code is governed by a
  BSD-style license that can be found in the LICENSE file.
 -->
-<focus-trap>
+<focus-trap (keyup)="onKeyUp($event)">
   <div class="wrapper">
     <header *ngIf="shouldShowHeader">
       <ng-content select="[header]"></ng-content>

angular_components/lib/model/a11y/keyboard_handler_mixin.dart

@@ -6,6 +6,9 @@ import 'dart:html';
 
 import 'package:angular_components/utils/browser/events/events.dart';
 
+/// Callback to handle a keyboard event
+typedef void KeyboardEventHandler(KeyboardEvent event);
+
 /// Base class for handling common key events implementing accessibility best
 /// practices.
 ///