fix: wave a11y errors

cloudinary · Dec 14, 2023 · bf551c6 · bf551c6
1 parent 6dcefab
commit bf551c6
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/src/components/jumpButtons/jump-10-minus.js b/src/components/jumpButtons/jump-10-minus.js
@@ -11,7 +11,8 @@ class JumpBackButton extends ClickableComponent {
 
   createEl() {
     return videojs.dom.createEl('button', {
-      className: 'vjs-control vjs-icon-skip-10-min vjs-icon-replay-10 vjs-button'
+      className: 'vjs-control vjs-icon-skip-10-min vjs-icon-replay-10 vjs-button',
+      ariaLabel: 'Jump back 10 seconds'
     });
   }
 }

diff --git a/src/components/jumpButtons/jump-10-plus.js b/src/components/jumpButtons/jump-10-plus.js
@@ -10,7 +10,8 @@ class JumpForwardButton extends ClickableComponent {
 
   createEl() {
     return videojs.dom.createEl('button', {
-      className: 'vjs-control vjs-icon-skip-10-plus vjs-icon-forward-10 vjs-button'
+      className: 'vjs-control vjs-icon-skip-10-plus vjs-icon-forward-10 vjs-button',
+      ariaLabel: 'Jump forward 10 seconds'
     });
   }
 }

diff --git a/src/components/playlist/components/playlist-button.js b/src/components/playlist/components/playlist-button.js
@@ -26,7 +26,8 @@ class PlaylistButton extends ClickableComponent {
     return videojs.dom.createEl('button', {
       // Prefixing classes of elements within a player with "vjs-"
       // is a convention used in Video.js.
-      className: `vjs-control vjs-playlist-button vjs-button ${typeCssClass}`
+      className: `vjs-control vjs-playlist-button vjs-button ${typeCssClass}`,
+      ariaLabel: `Playlist ${type} item`
     });
   }
 }

diff --git a/src/components/recommendations-overlay/recommendations-overlay-primary-item.js b/src/components/recommendations-overlay/recommendations-overlay-primary-item.js
@@ -65,11 +65,15 @@ class RecommendationsOverlayPrimaryItem extends RecommendationsOverlayItem {
       className: 'vjs-recommendations-overlay-item-primary-image'
     });
 
-    this.title = dom.createEl('h2');
+    this.title = dom.createEl('h2', {
+      ariaLabel: 'Recmmendation Title'
+    });
     this.setAriaCheck(this.title, false);
     this.title.innerHTML = '';
 
-    this.subtitle = dom.createEl('h3');
+    this.subtitle = dom.createEl('h3', {
+      ariaLabel: 'Recmmendation Subtitle'
+    });
     this.setAriaCheck(this.subtitle, false);
     this.subtitle.innerHTML = '';
 

diff --git a/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js b/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js
@@ -8,7 +8,6 @@ class SourceMenuButton extends MenuButton {
   constructor(player, options) {
     super(player, options);
 
-
     const qualityLevels = this.player().qualityLevels();
 
     // Handle options: We accept an options.default value of ( high || low )
@@ -29,6 +28,8 @@ class SourceMenuButton extends MenuButton {
     this.player().qualityLevels().on('addqualitylevel', (event) => {
       this.update(event);
     });
+
+    this.menuButton_.el_.setAttribute('aria-label', 'Source Selector Button');
   }
 
   createEl() {

diff --git a/src/video-player.utils.js b/src/video-player.utils.js
@@ -125,6 +125,10 @@ export const overrideDefaultVideojsComponents = () => {
 
     // Position the 'logo-button' button last
     children.push('logoButton');
+
+    // Remove these button
+    children.splice(children.indexOf('skipForward'), 1);
+    children.splice(children.indexOf('skipBackward'), 1);
   }
 
   const SeekBar = videojs.getComponent('SeekBar');