From 4c525315c7992b70016c0094effb9bb03aab8425 Mon Sep 17 00:00:00 2001
From: bhh1988 <bhh1988@gmail.com>
Date: Tue, 1 Aug 2017 13:43:17 -0700
Subject: [PATCH] Update: Add aria-pressed setting for CC button (#264)

Small accessibility improvement
https://www.w3.org/TR/wai-aria-practices/examples/button/button.html
---
 src/lib/viewers/media/MediaControls.html           | 2 +-
 src/lib/viewers/media/Settings.js                  | 6 ++++++
 src/lib/viewers/media/__tests__/Settings-test.html | 2 +-
 src/lib/viewers/media/__tests__/Settings-test.js   | 3 +++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/viewers/media/MediaControls.html b/src/lib/viewers/media/MediaControls.html
index 2d4d631e3..a67d8929d 100644
--- 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
index d1dc99922..81bd3afa0 100644
--- 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
index 1db8a0f78..7bc08f5f2 100644
--- 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
index 5b28981c1..9da27a0f4 100644
--- 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');
         });
     });