Bug 1069630 - Updated "album rating bar" and "caption/share bar" with…

… ARIA roles/labels

apps/music/index.html

@@ -100,16 +100,16 @@ <h1 id="title-text" data-l10n-id="music"></h1>
           <div id="player-cover-caption">
             <div id="player-cover-artist" data-l10n-id="songArtist">Song Artist</div>
             <div id="player-cover-album" data-l10n-id="songAlbum">Song Album</div>
-            <button id="player-cover-share" class="player-cover-button" data-icon="share"></button>
+            <button id="player-cover-share" class="player-cover-button" data-icon="share" data-l10n-id="share-song"></button>
           </div>
           <div id="player-cover-buttons">
             <button id="player-album-repeat" class="player-cover-button" data-icon="repeat"></button>
-            <div id="player-album-rating">
-              <button class="rating-star" data-rating="1"></button>
-              <button class="rating-star" data-rating="2"></button>
-              <button class="rating-star" data-rating="3"></button>
-              <button class="rating-star" data-rating="4"></button>
-              <button class="rating-star" data-rating="5"></button>
+            <div id="player-album-rating" data-l10n-id="player-album-rating" role="radiogroup">
+              <button class="rating-star" data-rating="1" role="radio" data-l10n-id="rating-star" data-l10n-args='{"n":"1"}'></button>
+              <button class="rating-star" data-rating="2" role="radio" data-l10n-id="rating-star" data-l10n-args='{"n":"2"}'></button>
+              <button class="rating-star" data-rating="3" role="radio" data-l10n-id="rating-star" data-l10n-args='{"n":"3"}'></button>
+              <button class="rating-star" data-rating="4" role="radio" data-l10n-id="rating-star" data-l10n-args='{"n":"4"}'></button>
+              <button class="rating-star" data-rating="5" role="radio" data-l10n-id="rating-star" data-l10n-args='{"n":"5"}'></button>
             </div>
             <button id="player-album-shuffle" class="player-cover-button" data-icon="shuffle"></button>
           </div>

apps/music/js/ui/views/player_view.js

@@ -306,6 +306,12 @@ var PlayerView = {
     for (var i = 0; i < 5; i++) {
       var rating = this.ratings[i];
 
+      if (i === rated - 1) {
+          rating.setAttribute('aria-checked', true);
+      } else {
+          rating.setAttribute('aria-checked', false);
+      }
+
       if (i < rated) {
         rating.classList.add('star-on');
       } else {

apps/music/locales/music.en-US.properties

@@ -51,3 +51,14 @@ overlay-cancel-button = Cancel
 music-paused-notification = Music paused during the call
 done = Done
 
+# The following strings are spoken by screen readers and not shown on the
+# screen.
+share-song.ariaLabel = Share
+player-album-rating.ariaLabel = Rating
+rating-star.ariaLabel = {[ plural(n) ]}
+rating-star.ariaLabel[zero] = {{n}} stars
+rating-star.ariaLabel[one] = {{n}} star
+rating-star.ariaLabel[two] = {{n}} stars
+rating-star.ariaLabel[few] = {{n}} stars
+rating-star.ariaLabel[many] = {{n}} stars
+rating-star.ariaLabel[other] = {{n}} stars

apps/music/style/music.css

@@ -607,10 +607,12 @@ html[dir="rtl"] .tile:nth-child(12n+6) {
 
 #player-cover.slideOut #player-cover-caption {
   transform: translateY(100%);
+  visibility: visible;
 }
 
 #player-cover.slideOut #player-cover-buttons {
   transform: translateY(-100%);
+  visibility: visible;
 }
 
 #player-cover-caption,
@@ -619,7 +621,8 @@ html[dir="rtl"] .tile:nth-child(12n+6) {
   width: 100%;
   height: 5rem;
   background-color: rgba(0, 0, 0, 0.5);
-  transition: transform 700ms ease-in-out;
+  transition: transform 700ms ease-in-out, visibility 700ms ease-in-out;
+  visibility: hidden;
 }
 
 #player-cover-caption {

apps/music/test/unit/player_view_test.js

@@ -0,0 +1,44 @@
+/* global PlayerView, loadBodyHTML, MockL10n */
+
+'use strict';
+
+require('/js/ui/views/player_view.js');
+require('/shared/test/unit/mocks/mock_l10n.js');
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Player View Test', function() {
+  var pv, ratings;
+  var realL10n = navigator.mozL10n;
+  function testRatingsAriaChecked(checkedIndex) {
+    pv.setRatings(checkedIndex);
+    Array.prototype.forEach.call(ratings, function(rating, index) {
+      assert.equal(checkedIndex - 1 === index ? 'true' : 'false',
+        rating.getAttribute('aria-checked'));
+    });
+  }
+
+  suiteSetup(function() {
+    navigator.mozL10n = MockL10n;
+    //Insert the star-rating bar into the dom
+    loadBodyHTML('/index.html');
+
+    //Initialize the Player View
+    pv = PlayerView;
+
+    //Override #setSeekBar with stub to avoid excess work in init()
+    sinon.stub(pv, 'setSeekBar');
+    pv.init();
+    ratings = pv.ratings;
+  });
+
+  suiteTeardown(function() {
+    navigator.mozL10n = realL10n;
+  });
+
+  suite('#setRating accessibility', function() {
+    test('aria-checked="true" when star matches star-rating. false otherwise',
+      function() {
+        [0, 1, 2, 3, 4, 5].forEach(testRatingsAriaChecked);
+      });
+  });
+});