Merge pull request #32715 from Cwiiis/bug1216700-homescreen-a11y-polish

Bug 1216700 - Homescreen a11y polish. r=gmarty
mozilla-b2g · Oct 27, 2015 · 8ff28da · 8ff28da
2 parents dbf445e + 3afa14a
commit 8ff28da
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/apps/homescreen/index.html b/apps/homescreen/index.html
@@ -60,12 +60,12 @@
 
   <body>
     <header id="page-indicator-header">
-      <div id="page-indicator" role="slider" aria-valuemin="0" aria-valuenow="0" aria-valuemax="1" aria-controls="panels">
+      <div id="page-indicator" data-l10n-id="page-indicator-text" role="slider" aria-valuemin="1" aria-valuenow="1" aria-valuemax="2" aria-controls="panels">
         <span></span><span></span>
       </div>
     </header>
-    <div id="panels" role="main"><!--
-    --><div id="apps-panel">
+    <div id="panels"><!--
+    --><div id="apps-panel" aria-labelledby="page-indicator-header">
         <div class="shadow"></div>
         <div class="scrollable">
           <gaia-container id="apps" drag-and-drop></gaia-container>
@@ -85,7 +85,7 @@
           <button on-click="close" data-l10n-id="cancel-action"></button>
         </gaia-dialog>
       </div><!--
-   --><div id="pages-panel">
+   --><div id="pages-panel" aria-labelledby="page-indicator-header">
         <div class="shadow"></div>
         <div id="empty-pages">
           <h1 data-l10n-id="no-pinned-pages-header"></h1>

diff --git a/apps/homescreen/js/app.js b/apps/homescreen/js/app.js
@@ -698,9 +698,15 @@
 
         this.header.setAttribute('data-l10n-id', appsVisible ?
           'apps-panel' : 'pages-panel');
-        this.indicator.setAttribute('aria-valuenow', appsVisible ? 0 : 1);
+
         this.indicator.children[0].classList.toggle('active', appsVisible);
         this.indicator.children[1].classList.toggle('active', !appsVisible);
+        this.indicator.setAttribute('aria-valuenow', appsVisible ? 1 : 2);
+        this.indicator.setAttribute('data-l10n-args', JSON.stringify({
+          currentPage: appsVisible ? 1 : 2,
+          totalPages: 2
+        }));
+
         this.panel.setAttribute('aria-hidden', !appsVisible);
         this.pages.panel.setAttribute('aria-hidden', appsVisible);
       }

diff --git a/apps/homescreen/locales/homescreen.en-US.properties b/apps/homescreen/locales/homescreen.en-US.properties
@@ -8,6 +8,7 @@ cancel-action=Cancel
 
 apps-panel.ariaLabel=Applications
 pages-panel.ariaLabel=Pinned Pages
+page-indicator-text.ariaValueText = Page {{currentPage}} of {{totalPages}}
 
 no-pinned-pages-header=No Pinned Pages yet.
 no-pinned-pages-body=Use your browser to pin any web page to this screen.
diff --git a/apps/homescreen/test/unit/app_test.js b/apps/homescreen/test/unit/app_test.js
@@ -720,10 +720,20 @@ suite('Homescreen app', () => {
     });
 
     test('should update indicator when pages visible', () => {
+      var setAttributeSpy = sinon.spy(app.indicator, 'setAttribute');
+      var spy1 = setAttributeSpy.withArgs('aria-valuenow', 2);
+      var spy2 = setAttributeSpy.withArgs('data-l10n-args', JSON.stringify({
+        currentPage: 2,
+        totalPages: 2
+      }));
+
       mockPanels.scrollLeft = mockPanels.scrollLeftMax;
       app.updatePanelIndicator();
+
       assert.isTrue(indicatorToggleStubs[0].calledWith('active', false));
       assert.isTrue(indicatorToggleStubs[1].calledWith('active', true));
+      assert.isTrue(spy1.called);
+      assert.isTrue(spy2.called);
       assert.equal(app.header.getAttribute('data-l10n-id'), 'pages-panel');
     });