data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

improve a11y of video dialog

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

17
routes/_components/Media.html
View file

@ -98,7 +98,7 @@
const DEFAULT_MEDIA_WIDTH = 300 const DEFAULT_MEDIA_WIDTH = 300
const DEFAULT_MEDIA_HEIGHT = 200 const DEFAULT_MEDIA_HEIGHT = 200
import VideoDialog from './VideoDialog.html' import { showVideoDialog } from '../_utils/showVideoDialog'
export default { export default {
helpers: { helpers: {
@ -111,20 +111,7 @@
}, },
methods: { methods: {
async onClickPlayVideoButton(media, width, height) { async onClickPlayVideoButton(media, width, height) {
let dialog = document.createElement('dialog') showVideoDialog(media.preview_url, media.url, width, height)
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()
} }
} }
} }

3
routes/_components/VideoDialog.html
View file

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

19
routes/_utils/showVideoDialog.js Normal file
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()
}