Issue #3421498: Dialog unusable in Safari

Closes #3421498

build/js/dialog.element.js

@@ -288,6 +288,15 @@
           this.returnValue = dialog.returnValue;
           this.dispatchEvent(new Event('cancel'));
       }
+      async _keydownHandler(event) {
+          if (event.code === 'Escape') {
+              const rootElement = this.getRootNode();
+              const domElement = rootElement.querySelector(`#${this.id}`);
+              if (domElement && !this.hideCloseButton && domElement.contains(rootElement.activeElement)) {
+                  this._handleClose();
+              }
+          }
+      }
       render() {
           return y `
       <dialog
@@ -368,6 +377,12 @@
           if (changedProperties.has('dock') || changedProperties.has('push') || changedProperties.has('modal')) {
               this._pushBody();
           }
+          if (this.open) {
+              this.getRootNode().addEventListener('keydown', (e) => this._keydownHandler(e));
+          }
+          else {
+              this.getRootNode().removeEventListener('keydown', (e) => this._keydownHandler(e));
+          }
       }
       /**
        * showModal
@@ -553,7 +568,9 @@
       background-color: var(--me-dialog-main-background-color, #fff);
       padding: var(--me-dialog-main-space-inset-y, var(--me-space-inset-y, 20px)) var(--me-dialog-main-space-inset-y, var(--me-space-inset-y, 20px));
       overflow-y: auto;
-      flex: 1 1 fit-content;
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: fit-content;
     }
 
     .buttons {