use a11y-dialog instead of dialog polyfill

package-lock.json

@@ -14,6 +14,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-9.4.0.tgz",
       "integrity": "sha512-zkYho6/4wZyX6o9UQ8rd0ReEaiEYNNCqYFIAACe2Tf9DrYlgzWW27OigYHnnztnnZQwVRpwWmZKegFmDpinIsA=="
     },
+    "a11y-dialog": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-4.0.1.tgz",
+      "integrity": "sha512-JsYMIaoZt7nZM1oDbxLBijyl09uZa91+UdPF+P9YadmmdtaVYx44v131UcqAhN48jNp8/BGV/80uMsBacPo2gg=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1389,11 +1394,6 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
-    "dialog-polyfill": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.9.tgz",
-      "integrity": "sha512-iM4ZXRLOA/qpbW6XznGOq7Iq58JoXhZGo+OMG8K3wFxvIatnMTnIancLGEKa6WYy6oTkndfb2UXQ6FGtoUBn1g=="
-    },
     "diffie-hellman": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz",

package.json

@@ -17,13 +17,13 @@
   },
   "dependencies": {
     "@gamestdio/websocket": "^0.2.2",
+    "a11y-dialog": "^4.0.1",
     "cheerio": "^1.0.0-rc.2",
     "chokidar": "^2.0.0",
     "compression": "^1.7.1",
     "concurrently": "^3.5.1",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
-    "dialog-polyfill": "^0.4.9",
     "express": "^4.16.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "fg-loadcss": "^2.0.1",

routes/_components/ModalDialog.html

@@ -1,25 +1,41 @@
-<div class="dialog-wrapper" ref:node>
+<div class="modal-dialog-backdrop" tabindex="-1" data-a11y-dialog-hide></div>
+<div class="modal-dialog-contents" role="dialog" aria-label="{{label}}" ref:node>
+  <div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};">
     <div class="close-dialog-button-wrapper">
-    <button class="close-dialog-button" aria-label="Close dialog" on:click="close()">
+      <button class="close-dialog-button" data-a11y-dialog-hide aria-label="Close dialog">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <slot></slot>
+  </div>
 </div>
 <style>
-  :global(.modal-dialog) {
+  :global(#modal-dialog[aria-hidden='true']) {
+    display: none;
+  }
+  .modal-dialog-backdrop {
+    position: fixed;
+    z-index: 10000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: rgba(51, 51, 51, 0.9);
+  }
+  .modal-dialog-contents {
+    z-index: 10010;
     position: fixed;
     top: 50%;
-    transform: translate(0, -50%);
+    left: 50%;
+    transform: translate(-50%, -50%);
     padding: 0;
     border: 3px solid var(--main-border);
   }
-  :global(.modal-dialog-wrapper) {
+  .modal-dialog-document {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-width: calc(100vw - 40px);
   }
   .close-dialog-button-wrapper {
     text-align: right;
@@ -36,9 +52,6 @@
     font-size: 48px;
     color: var(--button-primary-text);
   }
-  :global(dialog::backdrop, .backdrop) {
-    background: rgba(51, 51, 51, 0.9) !important; /* TODO: hack for Safari */
-  }
 
   @media (max-width: 767px) {
     .close-dialog-button span {
@@ -48,51 +61,22 @@
   }
 </style>
 <script>
-
-  import { importDialogPolyfill } from '../_utils/asyncModules'
-  import { registerFocusRestoreDialog } from '../_utils/dialogs'
+  import A11yDialog from 'a11y-dialog'
 
   export default {
     oncreate() {
-      this.getDialogElement().style.background = this.get('background') || '#000'
+      let dialogElement = this.refs.node.parentElement
+      let a11yDialog = new A11yDialog(dialogElement)
       this.observe('shown', shown => {
         if (shown) {
-          this.show()
+          a11yDialog.show()
+          a11yDialog.on('hide', () => {
+            console.log('destroying modal dialog')
+            a11yDialog.destroy()
+            this.destroy()
+          })
         }
       })
-      this.registration = this.register()
-      this.onDocumentClick = (e) => {
-        let dialog = this.getDialogElement()
-        if (!dialog.open) {
-          return;
-        }
-        if (e.target !== dialog) {
-          return;
-        }
-        this.close() // close when clicked outside of dialog
-      }
-      document.body.addEventListener('click', this.onDocumentClick);
-    },
-    methods: {
-      async register() {
-        if (typeof HTMLDialogElement === 'undefined') {
-          let dialogPolyfill = await importDialogPolyfill()
-          dialogPolyfill.registerDialog(this.getDialogElement())
-        }
-        registerFocusRestoreDialog(this.getDialogElement())
-      },
-      async show() {
-        await this.registration
-        this.getDialogElement().showModal()
-      },
-      close() {
-        this.getDialogElement().close()
-        document.body.removeChild(this.getDialogElement())
-        document.body.removeEventListener('click', this.onDocumentClick);
-      },
-      getDialogElement() {
-        return this.refs.node.parentElement
-      }
     }
   }
 </script>

routes/_components/status/ImageDialog.html

@@ -1,4 +1,4 @@
-<ModalDialog :shown background="var(--main-bg)">
+<ModalDialog :label :shown background="var(--main-bg)">
   {{#if type === 'gifv'}}
     <video
       aria-label="Animated GIF: {{description || ''}}"
@@ -21,7 +21,7 @@
   {{/if}}
 </ModalDialog>
 <style>
-  :global(.modal-dialog img, .modal-dialog video) {
+  :global(#modal-dialog img, #modal-dialog video) {
     object-fit: contain;
     overflow: hidden;
     max-width: calc(100vw - 20px);

routes/_components/status/VideoDialog.html

@@ -1,4 +1,4 @@
-<ModalDialog :shown background="#000">
+<ModalDialog :label :shown background="#000">
   <video poster="{{poster}}"
          src="{{src}}"
          width="{{width}}"
@@ -8,7 +8,7 @@
   />
 </ModalDialog>
 <style>
-  :global(.modal-dialog video) {
+  :global(#modal-dialog video) {
     object-fit: contain;
     overflow: hidden;
     max-width: calc(100vw - 20px);

routes/_utils/asyncModules.js

@@ -1,5 +1,3 @@
-import { loadCSS } from 'fg-loadcss';
-
 export const importURLSearchParams = () => import(
   /* webpackChunkName: 'url-search-params' */ 'url-search-params'
   ).then(Params => {
@@ -26,17 +24,3 @@ export const importRequestIdleCallback = () => import(
 export const importIndexedDBGetAllShim = () => import(
   /* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
   )
-
-export const importDialogPolyfill = (() => {
-  let cached
-  return () => {
-    if (cached) {
-      return Promise.resolve(cached)
-    }
-    loadCSS('/dialog-polyfill.css') // TODO: handle error
-    return import(/* webpackChunkName: 'dialog-polyfill' */ 'dialog-polyfill').then(res => {
-      cached = res
-      return cached
-    })
-  }
-})()

routes/_utils/dialogs.js

@@ -1,55 +0,0 @@
-// From https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1
-// Via https://github.com/GoogleChrome/dialog-polyfill/issues/139
-
-let registered = new WeakMap()
-
-// store previous focused node centrally
-let previousFocus = null
-document.addEventListener('focusout', (e) => {
-  previousFocus = e.target
-}, true)
-
-/**
- * Updates the passed dialog to retain focus and restore it when the dialog is closed.
- * @param {!HTMLDialogElement} dialog to upgrade
- */
-export function registerFocusRestoreDialog(dialog) {
-  // replace showModal method directly, to save focus
-  let realShowModal = dialog.showModal
-  dialog.showModal = function () {
-    let savedFocus = document.activeElement
-    if (savedFocus === document || savedFocus === document.body) {
-      // some browsers read activeElement as body
-      savedFocus = previousFocus
-    }
-    registered.set(dialog, savedFocus)
-    realShowModal.call(this)
-  }
-
-  // on close, try to focus saved, if possible
-  dialog.addEventListener('close', function () {
-    if (dialog.hasAttribute('open')) {
-      return  // in native, this fires the frame later
-    }
-    let savedFocus = registered.get(dialog)
-    if (document.contains(savedFocus)) {
-      let wasFocus = document.activeElement
-      savedFocus.focus()
-      if (document.activeElement !== savedFocus) {
-        wasFocus.focus()  // restore focus, we couldn't focus saved
-      }
-    }
-    savedFocus = null
-  })
-}
-
-export function createDialogElement(label) {
-  if (!label) {
-    throw new Error('the modal must have a label')
-  }
-  let dialogElement = document.createElement('dialog')
-  dialogElement.classList.add('modal-dialog')
-  dialogElement.setAttribute('aria-label', label)
-  document.body.appendChild(dialogElement)
-  return dialogElement
-}

routes/_utils/loadPolyfills.js

@@ -11,7 +11,6 @@ export function loadPolyfills() {
     typeof URLSearchParams === 'undefined' && importURLSearchParams(),
     typeof IntersectionObserver === 'undefined' && importIntersectionObserver(),
     typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
-    !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
-    typeof HTMLDialogElement === 'undefined' && importDialogPolyfill()
+    !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim()
   ])
 }

routes/_utils/showImageDialog.js

@@ -1,10 +1,10 @@
 import ImageDialog from '../_components/status/ImageDialog.html'
-import { createDialogElement } from './dialogs'
 
 export function showImageDialog(poster, src, type, width, height, description) {
   let imageDialog = new ImageDialog({
-    target: createDialogElement('Image dialog'),
+    target: document.getElementById('modal-dialog'),
     data: {
+      label: 'Image dialog',
       poster,
       src,
       type,

routes/_utils/showVideoDialog.js

@@ -1,10 +1,10 @@
 import VideoDialog from '../_components/status/VideoDialog.html'
-import { createDialogElement } from './dialogs'
 
 export function showVideoDialog(poster, src, width, height, description) {
   let videoDialog = new VideoDialog({
-    target: createDialogElement('Video dialog'),
+    target: document.getElementById('modal-dialog'),
     data: {
+      label: 'Video dialog',
       poster,
       src,
       width,

templates/2xx.html

@@ -92,6 +92,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 	<!-- Toast.html gets rendered here -->
 	<div id="toast"></div>
 
+  <!-- ModalDialog.html gets rendered here -->
+  <div id="modal-dialog" aria-hidden="true"></div>
+
 	<!-- Sapper creates a <script> tag containing `templates/main.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->