From aa888500ecbe4d148e5a660a4db1b2696c05efa7 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 20 Jan 2018 20:20:33 -0800
Subject: [PATCH] improve a11y of video dialog

---
 routes/_components/Media.html       | 17 ++---------------
 routes/_components/VideoDialog.html |  3 ++-
 routes/_utils/showVideoDialog.js    | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 routes/_utils/showVideoDialog.js

diff --git a/routes/_components/Media.html b/routes/_components/Media.html
index 725f5986..07b7d02c 100644
--- a/routes/_components/Media.html
+++ b/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)
       }
     }
   }
diff --git a/routes/_components/VideoDialog.html b/routes/_components/VideoDialog.html
index b6cca433..a2021220 100644
--- a/routes/_components/VideoDialog.html
+++ b/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;
diff --git a/routes/_utils/showVideoDialog.js b/routes/_utils/showVideoDialog.js
new file mode 100644
index 00000000..93623ea8
--- /dev/null
+++ b/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()
+}
\ No newline at end of file