improve a11y of video dialog
This commit is contained in:
parent
5a11eeea31
commit
aa888500ec
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">×</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;
|
||||
|
|
|
@ -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()
|
||||
}
|
Loading…
Reference in New Issue