fix(a11y): video player thumbnail has no text alternative (#1486)

* fix(a11ty): video player thumnail has no text alternative * fix: resolve commnents * fix(a11ty): resolve comments
box · Jul 10, 2023 · bd3935b · bd3935b
1 parent 2d91e38
commit bd3935b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/lib/icons/play_48px.svg b/src/lib/icons/play_48px.svg
diff --git a/src/lib/viewers/media/VideoBaseViewer.js b/src/lib/viewers/media/VideoBaseViewer.js
@@ -43,9 +43,11 @@ class VideoBaseViewer extends MediaBaseViewer {
         this.mediaEl.setAttribute('playsinline', '');
 
         // Play button
-        this.playButtonEl = this.mediaContainerEl.appendChild(document.createElement('div'));
+        this.playButtonEl = this.mediaContainerEl.appendChild(document.createElement('button'));
         this.playButtonEl.classList.add(CLASS_PLAY_BUTTON);
         this.playButtonEl.classList.add(CLASS_HIDDEN);
+        this.playButtonEl.setAttribute('type', 'button');
+        this.playButtonEl.setAttribute('title', __('media_play'));
         this.playButtonEl.innerHTML = ICON_PLAY_LARGE;
 
         this.lowerLights();

diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss
@@ -1,6 +1,16 @@
 @import '../../boxuiVariables';
 @import './MediaControls';
 
+// Reset default styling that come from the “User Agent Stylesheet”
+@mixin bp-reset-default-styling-button {
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
 .bp-media {
     position: absolute;
     top: 0;
@@ -31,12 +41,13 @@
 }
 
 .bp-media-play-button {
+    @include bp-reset-default-styling-button;
+
     position: absolute;
     top: 50%;
     left: 50%;
     width: 80px;
     height: 80px;
-    padding-top: 12px;
     color: $white;
     font-size: 40px;
     text-align: center;