improve a11y of video dialog

This commit is contained in:
Nolan Lawson 2018-01-20 20:20:33 -08:00
parent 5a11eeea31
commit aa888500ec
3 changed files with 23 additions and 16 deletions

View file

@ -98,7 +98,7 @@
const DEFAULT_MEDIA_WIDTH = 300
const DEFAULT_MEDIA_HEIGHT = 200
import VideoDialog from './VideoDialog.html'
import { showVideoDialog } from '../_utils/showVideoDialog'
export default {
helpers: {
@ -111,20 +111,7 @@
},
methods: {
async onClickPlayVideoButton(media, width, height) {
let dialog = document.createElement('dialog')
dialog.classList.add('video-dialog')
document.body.appendChild(dialog)
let videoDialog = new VideoDialog({
target: dialog,
data: {
poster: media.preview_url,
src: media.url,
dialog: dialog,
width: width,
height: height
}
})
videoDialog.showModal()
showVideoDialog(media.preview_url, media.url, width, height)
}
}
}

View file

@ -1,6 +1,6 @@
<div class="video-dialog-wrapper">
<div class="close-video-button-wrapper">
<button class="close-video-button" aria-label="Close video" on:click="onCloseButtonClicked()">
<button class="close-video-button" aria-label="Close dialog" on:click="onCloseButtonClicked()">
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -18,6 +18,7 @@
transform: translate(0, -50%);
background: #000;
padding: 0;
border: 3px solid var(--main-border);
}
:global(.video-dialog-wrapper) {
display: flex;

View file

@ -0,0 +1,19 @@
import VideoDialog from '../_components/VideoDialog.html'
export function showVideoDialog(poster, src, width, height) {
let dialog = document.createElement('dialog')
dialog.classList.add('video-dialog')
dialog.setAttribute('aria-label', 'Video dialog')
document.body.appendChild(dialog)
let videoDialog = new VideoDialog({
target: dialog,
data: {
poster: poster,
src: src,
dialog: dialog,
width: width,
height: height
}
})
videoDialog.showModal()
}