improve a11y of video dialog

routes/_components/Media.html

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

routes/_components/VideoDialog.html

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

routes/_utils/showVideoDialog.js

@@ -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()
+}