From 3b2f7dba042f62250dddf9a67dfb7d83da86c631 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= Date: Wed, 7 Jul 2021 21:30:32 +0200 Subject: [PATCH] Fix(UI): Stop using setAttribute for ARIA (#3489) * Stop using setAttribute for ARIA * Remove references to shaka.ui.Constants.ARIA_LABEL --- externs/aria.js | 6 ++++++ ui/airplay_button.js | 2 +- ui/audio_language_selection.js | 7 ++----- ui/cast_button.js | 10 ++++------ ui/constants.js | 3 --- ui/fast_forward_button.js | 5 ++--- ui/fullscreen_button.js | 4 +--- ui/language_utils.js | 2 +- ui/loop_button.js | 4 +--- ui/mute_button.js | 4 +--- ui/overflow_menu.js | 5 ++--- ui/pip_button.js | 12 +++++------- ui/play_button.js | 4 +--- ui/playback_rate_selection.js | 9 +++------ ui/presentation_time.js | 4 +--- ui/resolution_selection.js | 11 ++++------- ui/rewind_button.js | 5 ++--- ui/seek_bar.js | 3 +-- ui/spacer.js | 2 +- ui/text_selection.js | 19 ++++++++----------- ui/ui_utils.js | 2 +- ui/volume_bar.js | 4 +--- 22 files changed, 49 insertions(+), 78 deletions(-) diff --git a/externs/aria.js b/externs/aria.js index a795ff2a1..a1be3fe44 100644 --- 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 index 5eb95573b..fe755cb4d 100644 --- 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 index b7bd7bd86..638d673a8 100644 --- 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 index 303b94195..2ea57c8ea 100644 --- 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 index 7bdc5c08d..e1306c7c6 100644 --- 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 index 69cce7210..db21c453b 100644 --- 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 index 4c0147bba..32d1a4788 100644 --- 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 index a24246192..32948d334 100644 --- 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 index 7cf75515f..fff3b6aff 100644 --- 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 index 6d7a8c91f..3a58c23ce 100644 --- 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 index 8abad5988..e93b6c3df 100644 --- 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 index 1cf859abb..2dac19261 100644 --- 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 index b141af04f..86f1756f2 100644 --- 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 index da2495da7..64fefbb32 100644 --- 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 index f6aa82766..721ef747b 100644 --- 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 index da3cba735..fe76e1623 100644 --- 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 index 3006f74d4..071330042 100644 --- 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 index b9aa63bb4..b30662b72 100644 --- 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 index 697c18f0e..300730ee0 100644 --- 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); } }; diff --git a/ui/text_selection.js b/ui/text_selection.js index a0e08ae83..aeb3580c8 100644 --- a/ui/text_selection.js +++ b/ui/text_selection.js @@ -7,7 +7,6 @@ goog.provide('shaka.ui.TextSelection'); -goog.require('shaka.ui.Constants'); goog.require('shaka.ui.Enums'); goog.require('shaka.ui.LanguageUtils'); goog.require('shaka.ui.Locales'); @@ -38,9 +37,9 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { this.menu.classList.add('shaka-text-languages'); if (this.player && this.player.isTextTrackVisible()) { - this.button.setAttribute('aria-pressed', 'true'); + this.button.ariaPressed = 'true'; } else { - this.button.setAttribute('aria-pressed', 'false'); + this.button.ariaPressed = 'false'; } this.addOffOption_(); @@ -92,7 +91,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { */ addOffOption_() { const off = shaka.util.Dom.createButton(); - off.setAttribute('aria-selected', 'true'); + off.ariaSelected = 'true'; this.menu.appendChild(off); off.appendChild(shaka.ui.Utils.checkmarkIcon()); @@ -110,11 +109,11 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { if (this.player.isTextTrackVisible()) { this.icon.classList.add('shaka-captions-on'); this.icon.classList.remove('shaka-captions-off'); - this.button.setAttribute('aria-pressed', 'true'); + this.button.ariaPressed = 'true'; } else { this.icon.classList.add('shaka-captions-off'); this.icon.classList.remove('shaka-captions-on'); - this.button.setAttribute('aria-pressed', 'false'); + this.button.ariaPressed = 'false'; } this.controls.dispatchEvent( @@ -148,7 +147,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { this.menu.appendChild(offButton); if (!this.player.isTextTrackVisible()) { - offButton.setAttribute('aria-selected', 'true'); + offButton.ariaSelected = 'true'; offButton.appendChild(shaka.ui.Utils.checkmarkIcon()); this.captionsOffSpan_.classList.add('shaka-chosen-item'); this.currentSelection.textContent = @@ -184,10 +183,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { updateLocalizedStrings_() { const LocIds = shaka.ui.Locales.Ids; - this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL, - this.localization.resolve(LocIds.CAPTIONS)); - this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL, - this.localization.resolve(LocIds.BACK)); + this.button.ariaLabel = this.localization.resolve(LocIds.CAPTIONS); + this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK); this.nameSpan.textContent = this.localization.resolve(LocIds.CAPTIONS); this.backSpan.textContent = diff --git a/ui/ui_utils.js b/ui/ui_utils.js index 2daa10de5..d14f1c9cf 100644 --- a/ui/ui_utils.js +++ b/ui/ui_utils.js @@ -70,7 +70,7 @@ shaka.ui.Utils = class { icon.classList.add('shaka-chosen-item'); icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK; // Screen reader should ignore icon text. - icon.setAttribute('aria-hidden', 'true'); + icon.ariaHidden = 'true'; return icon; } diff --git a/ui/volume_bar.js b/ui/volume_bar.js index ed5b0f6f3..e73cb314b 100644 --- a/ui/volume_bar.js +++ b/ui/volume_bar.js @@ -9,7 +9,6 @@ goog.provide('shaka.ui.VolumeBar'); goog.require('goog.asserts'); goog.require('shaka.ads.AdManager'); -goog.require('shaka.ui.Constants'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); @@ -121,8 +120,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement { /** @private */ updateAriaLabel_() { - this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL, - this.localization.resolve(shaka.ui.Locales.Ids.VOLUME)); + this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.VOLUME); } };