Fix(UI): Stop using setAttribute for ARIA (shaka-project#3489)

* Stop using setAttribute for ARIA * Remove references to shaka.ui.Constants.ARIA_LABEL
dave-nicholas · Jul 7, 2021 · 3b2f7db · 3b2f7db
1 parent cf2fb90
commit 3b2f7db
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 78 deletions.
diff --git a/externs/aria.js b/externs/aria.js
@@ -16,3 +16,9 @@ Element.prototype.ariaLabel;
 
 /** @type {string} */
 Element.prototype.ariaPressed;
+
+/** @type {string} */
+Element.prototype.ariaSelected;
+
+/** @type {string} */
+Element.prototype.ariaHidden;
diff --git a/ui/airplay_button.js b/ui/airplay_button.js
@@ -36,7 +36,7 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.airplayButton_ = shaka.util.Dom.createButton();
     this.airplayButton_.classList.add('shaka-airplay-button');
-    this.airplayButton_.setAttribute('aria-pressed', 'false');
+    this.airplayButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */
     this.airplayIcon_ = shaka.util.Dom.createHTMLElement('i');

diff --git a/ui/audio_language_selection.js b/ui/audio_language_selection.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.AudioLanguageSelection');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.LanguageUtils');
 goog.require('shaka.ui.Locales');
@@ -96,10 +95,8 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.BACK));
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.LANGUAGE));
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
+    this.button.ariaLabel = this.localization.resolve(LocIds.LANGUAGE);
     this.nameSpan.textContent =
         this.localization.resolve(LocIds.LANGUAGE);
     this.backSpan.textContent =

diff --git a/ui/cast_button.js b/ui/cast_button.js
@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.CastButton');
 
 goog.require('shaka.cast.CastProxy');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -42,7 +41,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.castButton_ = shaka.util.Dom.createButton();
     this.castButton_.classList.add('shaka-cast-button');
-    this.castButton_.setAttribute('aria-pressed', 'false');
+    this.castButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */
     this.castIcon_ = shaka.util.Dom.createHTMLElement('i');
@@ -126,9 +125,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     // Aria-pressed set to true when casting, set to false otherwise.
     if (canCast) {
       if (isCasting) {
-        this.castButton_.setAttribute('aria-pressed', 'true');
+        this.castButton_.ariaPressed = 'true';
       } else {
-        this.castButton_.setAttribute('aria-pressed', 'false');
+        this.castButton_.ariaPressed = 'false';
       }
     }
 
@@ -156,8 +155,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.castButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.CAST));
+    this.castButton_.ariaLabel = this.localization.resolve(LocIds.CAST);
     this.castNameSpan_.textContent =
         this.localization.resolve(LocIds.CAST);
 

diff --git a/ui/constants.js b/ui/constants.js
@@ -7,8 +7,5 @@
 
 goog.provide('shaka.ui.Constants');
 
-/** @const {string} */
-shaka.ui.Constants.ARIA_LABEL = 'aria-label';
-
 /** @const {number} */
 shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR = 5; // seconds
diff --git a/ui/fast_forward_button.js b/ui/fast_forward_button.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.FastForwardButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -57,8 +56,8 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
    * @private
    */
   updateAriaLabel_() {
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.FAST_FORWARD));
+    this.button_.ariaLabel =
+        this.localization.resolve(shaka.ui.Locales.Ids.FAST_FORWARD);
   }
 
   /**

diff --git a/ui/fullscreen_button.js b/ui/fullscreen_button.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.FullscreenButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -71,8 +70,7 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     const label = document.fullscreenElement ?
         LocIds.EXIT_FULL_SCREEN : LocIds.FULL_SCREEN;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(label));
+    this.button_.ariaLabel = this.localization.resolve(label);
   }
 
   /**

diff --git a/ui/language_utils.js b/ui/language_utils.js
@@ -138,7 +138,7 @@ shaka.ui.LanguageUtils = class {
       if (updateChosen && (combinationName == selectedCombination)) {
         button.appendChild(shaka.ui.Utils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
-        button.setAttribute('aria-selected', 'true');
+        button.ariaSelected = 'true';
         currentSelectionElement.textContent = span.textContent;
       }
       langMenu.appendChild(button);

diff --git a/ui/loop_button.js b/ui/loop_button.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.LoopButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -151,8 +150,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     const ariaText = this.video.loop ?
         LocIds.EXIT_LOOP_MODE : LocIds.ENTER_LOOP_MODE;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(ariaText));
+    this.button_.ariaLabel = this.localization.resolve(ariaText);
   }
 };
 

diff --git a/ui/mute_button.js b/ui/mute_button.js
@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.MuteButton');
 
 goog.require('shaka.ads.AdManager');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -97,8 +96,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
       label = this.video.muted ? LocIds.UNMUTE : LocIds.MUTE;
     }
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(label));
+    this.button_.ariaLabel = this.localization.resolve(label);
   }
 
   /**

diff --git a/ui/overflow_menu.js b/ui/overflow_menu.js
@@ -10,7 +10,6 @@ goog.provide('shaka.ui.OverflowMenu');
 goog.require('goog.asserts');
 goog.require('shaka.ads.AdManager');
 goog.require('shaka.log');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -217,8 +216,8 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
    */
   updateAriaLabel_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.overflowMenuButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.MORE_SETTINGS));
+    this.overflowMenuButton_.ariaLabel =
+        this.localization.resolve(LocIds.MORE_SETTINGS);
   }
 };
 

diff --git a/ui/pip_button.js b/ui/pip_button.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.PipButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -142,8 +141,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE));
+    this.pipButton_.ariaLabel =
+        this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =
         this.localization.resolve(LocIds.ON);
   }
@@ -153,8 +152,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   onLeavePictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE));
+    this.pipButton_.ariaLabel =
+        this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =
         this.localization.resolve(LocIds.OFF);
   }
@@ -172,8 +171,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     const ariaLabel = document.pictureInPictureElement ?
         LocIds.EXIT_PICTURE_IN_PICTURE :
         LocIds.ENTER_PICTURE_IN_PICTURE;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(ariaLabel));
+    this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
 
     const currentPipState = document.pictureInPictureElement ?
         LocIds.ON : LocIds.OFF;

diff --git a/ui/play_button.js b/ui/play_button.js
@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.PlayButton');
 
 goog.require('shaka.ads.AdManager');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -101,8 +100,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     const LocIds = shaka.ui.Locales.Ids;
     const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
 
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(label));
+    this.button.ariaLabel = this.localization.resolve(label);
   }
 
   /**

diff --git a/ui/playback_rate_selection.js b/ui/playback_rate_selection.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.PlaybackRateSelection');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -70,10 +69,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.BACK));
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.PLAYBACK_RATE));
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
+    this.button.ariaLabel = this.localization.resolve(LocIds.PLAYBACK_RATE);
     this.nameSpan.textContent = this.localization.resolve(LocIds.PLAYBACK_RATE);
     this.backSpan.textContent = this.localization.resolve(LocIds.PLAYBACK_RATE);
   }
@@ -105,7 +102,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     if (span) {
       const button = span.parentElement;
       button.appendChild(shaka.ui.Utils.checkmarkIcon());
-      button.setAttribute('aria-selected', 'true');
+      button.ariaSelected = 'true';
       span.classList.add('shaka-chosen-item');
     }
 

diff --git a/ui/presentation_time.js b/ui/presentation_time.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.PresentationTimeTracker');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Locales');
@@ -108,8 +107,7 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
   onTracksChanged_() {
     if (this.player.isLive()) {
       const ariaLabel = shaka.ui.Locales.Ids.SKIP_TO_LIVE;
-      this.currentTime_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-          this.localization.resolve(ariaLabel));
+      this.currentTime_.ariaLabel = this.localization.resolve(ariaLabel);
     }
   }
 };

diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js
@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.ResolutionSelection');
 
 goog.require('goog.asserts');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -137,7 +136,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
       if (!abrEnabled && track == selectedTrack) {
         // If abr is disabled, mark the selected track's resolution.
-        button.setAttribute('aria-selected', 'true');
+        button.ariaSelected = 'true';
         button.appendChild(shaka.ui.Utils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
         this.currentSelection.textContent = span.textContent;
@@ -163,7 +162,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
     // If abr is enabled reflect it by marking 'Auto' as selected.
     if (abrEnabled) {
-      autoButton.setAttribute('aria-selected', 'true');
+      autoButton.ariaSelected = 'true';
       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
 
       this.abrOnSpan_.classList.add('shaka-chosen-item');
@@ -198,10 +197,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.RESOLUTION));
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.RESOLUTION));
+    this.button.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
     this.backSpan.textContent =
         this.localization.resolve(LocIds.RESOLUTION);
     this.nameSpan.textContent =

diff --git a/ui/rewind_button.js b/ui/rewind_button.js
@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.RewindButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -57,8 +56,8 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
    * @private
    */
   updateAriaLabel_() {
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.REWIND));
+    this.button_.ariaLabel =
+        this.localization.resolve(shaka.ui.Locales.Ids.REWIND);
   }
 
   /**

diff --git a/ui/seek_bar.js b/ui/seek_bar.js
@@ -372,8 +372,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
 
   /** @private */
   updateAriaLabel_() {
-    this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.SEEK));
+    this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
   }
 };
 

diff --git a/ui/spacer.js b/ui/spacer.js
@@ -29,7 +29,7 @@ shaka.ui.Spacer = class extends shaka.ui.Element {
     const div = shaka.util.Dom.createHTMLElement('div');
     div.classList.add('shaka-spacer');
     // Make screen readers ignore the spacer
-    div.setAttribute('aria-hidden', true);
+    div.ariaHidden = 'true';
     this.parent.appendChild(div);
   }
 };