Update: Add aria-pressed setting for CC button (#264)

Small accessibility improvement https://www.w3.org/TR/wai-aria-practices/examples/button/button.html
box · Aug 1, 2017 · 4c52531 · 4c52531
1 parent 6b361ed
commit 4c52531
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/src/lib/viewers/media/MediaControls.html b/src/lib/viewers/media/MediaControls.html
@@ -35,7 +35,7 @@
         <label class="bp-media-controls-label bp-media-controls-timecode">00:00</label>
         <span class="bp-media-controls-label">&nbsp;&#47;&nbsp;</span>
         <label class="bp-media-controls-label bp-media-controls-duration">00:00</label>
-        <button class="bp-media-controls-btn bp-media-cc-icon">
+        <button class="bp-media-controls-btn bp-media-cc-icon" aria-pressed="false">
             <div class="bp-media-controls-cc-icon-text">CC</div>
         </button>
         <button class="bp-media-controls-btn bp-media-gear-icon" aria-haspopup="true">

diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js
@@ -108,6 +108,9 @@ class Settings extends EventEmitter {
     /** @property {HTMLElement} - Settings button element (gear icon) */
     settingsButtonEl;
 
+    /** @property {HTMLElement} - CC button element */
+    ccButtonEl;
+
     /** @property {boolean} - Whether settings menu is visible */
     visible = false;
 
@@ -140,6 +143,7 @@ class Settings extends EventEmitter {
         this.firstMenuItem = this.settingsEl.querySelectorAll('.bp-media-settings-item')[0];
 
         this.settingsButtonEl = this.containerEl.querySelector('.bp-media-gear-icon');
+        this.ccButtonEl = this.containerEl.querySelector('.bp-media-cc-icon');
 
         addActivationListener(this.settingsEl, this.menuEventHandler);
         this.containerEl.classList.add(CLASS_SETTINGS_SUBTITLES_UNAVAILABLE);
@@ -450,8 +454,10 @@ class Settings extends EventEmitter {
             }
 
             this.containerEl.classList.remove(CLASS_SETTINGS_SUBTITLES_ON);
+            this.ccButtonEl.setAttribute('aria-pressed', 'false');
         } else {
             this.containerEl.classList.add(CLASS_SETTINGS_SUBTITLES_ON);
+            this.ccButtonEl.setAttribute('aria-pressed', 'true');
         }
     }
 

diff --git a/src/lib/viewers/media/__tests__/Settings-test.html b/src/lib/viewers/media/__tests__/Settings-test.html
@@ -1 +1 @@
-<div class="container"><div class="bp-media-gear-icon" tabindex="0"></div></div>
+<div class="container"><div class="bp-media-gear-icon" tabindex="0"/><button class="bp-media-cc-icon" tabindex="0"/></div>
diff --git a/src/lib/viewers/media/__tests__/Settings-test.js b/src/lib/viewers/media/__tests__/Settings-test.js
@@ -633,6 +633,7 @@ describe('lib/viewers/media/Settings', () => {
 
             expect(settings.toggleToSubtitle).to.equal('3');
             expect(settings.areSubtitlesOn()).to.equal(false);
+            expect(settings.ccButtonEl.getAttribute('aria-pressed')).to.equal('false');
             expect(settings.containerEl).to.not.have.class('bp-media-settings-subtitles-on');
         });
 
@@ -642,12 +643,14 @@ describe('lib/viewers/media/Settings', () => {
 
             expect(settings.toggleToSubtitle).to.equal('2');
             expect(settings.areSubtitlesOn()).to.equal(false);
+            expect(settings.ccButtonEl.getAttribute('aria-pressed')).to.equal('false');
             expect(settings.containerEl).to.not.have.class('bp-media-settings-subtitles-on');
         });
 
         it('should set subtitles-on on container when subtitles are selected', () => {
             settings.handleSubtitleSelection('-1', '2');
 
+            expect(settings.ccButtonEl.getAttribute('aria-pressed')).to.equal('true');
             expect(settings.containerEl).to.have.class('bp-media-settings-subtitles-on');
         });
     });