use a11y-dialog instead of dialog polyfill

This commit is contained in:
Nolan Lawson 2018-02-04 19:15:35 -08:00
parent b10ecff3c0
commit 074ef0a760
11 changed files with 54 additions and 139 deletions

10
package-lock.json generated
View file

@ -14,6 +14,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-9.4.0.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-9.4.0.tgz",
"integrity": "sha512-zkYho6/4wZyX6o9UQ8rd0ReEaiEYNNCqYFIAACe2Tf9DrYlgzWW27OigYHnnztnnZQwVRpwWmZKegFmDpinIsA==" "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": { "abbrev": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "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", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" "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": { "diffie-hellman": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz",

View file

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

View file

@ -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"> <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> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
</div>
<style> <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; position: fixed;
top: 50%; top: 50%;
transform: translate(0, -50%); left: 50%;
transform: translate(-50%, -50%);
padding: 0; padding: 0;
border: 3px solid var(--main-border); border: 3px solid var(--main-border);
} }
:global(.modal-dialog-wrapper) { .modal-dialog-document {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
max-width: calc(100vw - 40px);
} }
.close-dialog-button-wrapper { .close-dialog-button-wrapper {
text-align: right; text-align: right;
@ -36,9 +52,6 @@
font-size: 48px; font-size: 48px;
color: var(--button-primary-text); 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) { @media (max-width: 767px) {
.close-dialog-button span { .close-dialog-button span {
@ -48,51 +61,22 @@
} }
</style> </style>
<script> <script>
import A11yDialog from 'a11y-dialog'
import { importDialogPolyfill } from '../_utils/asyncModules'
import { registerFocusRestoreDialog } from '../_utils/dialogs'
export default { export default {
oncreate() { oncreate() {
this.getDialogElement().style.background = this.get('background') || '#000' let dialogElement = this.refs.node.parentElement
let a11yDialog = new A11yDialog(dialogElement)
this.observe('shown', shown => { this.observe('shown', shown => {
if (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> </script>

View file

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

View file

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

View file

@ -1,5 +1,3 @@
import { loadCSS } from 'fg-loadcss';
export const importURLSearchParams = () => import( export const importURLSearchParams = () => import(
/* webpackChunkName: 'url-search-params' */ 'url-search-params' /* webpackChunkName: 'url-search-params' */ 'url-search-params'
).then(Params => { ).then(Params => {
@ -26,17 +24,3 @@ export const importRequestIdleCallback = () => import(
export const importIndexedDBGetAllShim = () => import( export const importIndexedDBGetAllShim = () => import(
/* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim' /* 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
})
}
})()

View file

@ -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
}

View file

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

View file

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

View file

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

View file

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