Bug 1014824 - improving FTU app accessibility around screen/dialog vi…

…sibility. r=fcampo
yzen · Jun 3, 2014 · 9bc1e3c · 9bc1e3c
1 parent 0f187f9
commit 9bc1e3c
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 7 deletions.
diff --git a/apps/ftu/js/navigation.js b/apps/ftu/js/navigation.js
@@ -118,6 +118,7 @@ var Navigation = {
           if (result) { // sending process ok, we advance
             UIManager.activationScreen.classList.remove('show');
             UIManager.finishScreen.classList.add('show');
+            UIManager.hideActivationScreenFromScreenReader();
           } else { // error on sending, we stay where we are
             self.currentStep--;
           }

diff --git a/apps/ftu/js/tutorial.js b/apps/ftu/js/tutorial.js
@@ -104,6 +104,9 @@
       });
       // Init in progress
       initialized = true;
+      // Custom event that can be used to apply (screen reader) visibility
+      // changes.
+      window.dispatchEvent(new CustomEvent('tutorialinitialized'));
     },
     handleEvent: function(evt) {
       if (evt.type === 'click') {

diff --git a/apps/ftu/js/ui.js b/apps/ftu/js/ui.js
@@ -224,6 +224,20 @@ var UIManager = {
     var button = this.offlineErrorDialog.querySelector('button');
     button.addEventListener('click',
                             this.onOfflineDialogButtonClick.bind(this));
+
+    // Handle activation screen visibility.
+    ['confirmdialogshowing',
+     'loadingoverlayshowing',
+     'tutorialinitialized'].forEach(function(event) {
+      window.addEventListener(event,
+        this.hideActivationScreenFromScreenReader.bind(this));
+    }, this);
+
+    ['confirmdialoghiding',
+     'loadingoverlayhiding'].forEach(function(event) {
+      window.addEventListener(event,
+        this.showActivationScreenToScreenReader.bind(this));
+    }, this);
   },
 
   scrollToElement: function ui_scrollToElement(container, element) {
@@ -416,12 +430,24 @@ var UIManager = {
         text = _('offline-dialog-text', { url: href });
     dialog.querySelector('small').textContent = text;
     dialog.classList.add('visible');
+    this.hideActivationScreenFromScreenReader();
   },
 
   onOfflineDialogButtonClick: function ui_onOfflineDialogButtonClick(e) {
     this.offlineErrorDialog.classList.remove('visible');
+    this.showActivationScreenToScreenReader();
   },
 
+  hideActivationScreenFromScreenReader:
+    function ui_hideActivationScreenFromScreenReader() {
+      this.activationScreen.setAttribute('aria-hidden', true);
+    },
+
+  showActivationScreenToScreenReader:
+    function ui_showActivationScreenToScreenReader() {
+      this.activationScreen.setAttribute('aria-hidden', false);
+    },
+
   setDate: function ui_sd() {
     if (!!this.lock) {
       return;

diff --git a/apps/ftu/test/unit/mock_ui_manager.js b/apps/ftu/test/unit/mock_ui_manager.js
@@ -83,7 +83,8 @@ var MockUIManager = {
 
   sendNewsletter: function(callback) {return callback(true);},
   updateDataConnectionStatus: function(status) {return DataMobile.getStatus();},
-  displayOfflineDialog: function() {}
+  displayOfflineDialog: function() {},
+  hideActivationScreenFromScreenReader: function() {}
 };
 
 function toCamelCase(str) {

diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css
@@ -81,7 +81,8 @@ body:not(.rb-enabled) #statusbar {
 
 #screen.rocketbar-expanded:not(.on-homescreen):not(.locked) #statusbar-icons,
 #screen.on-homescreen.rocketbar-focused:not(.locked) #statusbar-icons,
-#screen.rocketbar-expanded.cards-view #statusbar-icons {
+#screen.rocketbar-expanded.cards-view #statusbar-icons,
+#screen.fullscreen-app #statusbar-icons {
   visibility: hidden;
   opacity: 0;
 }

diff --git a/shared/js/confirm.js b/shared/js/confirm.js
@@ -47,6 +47,9 @@ var ConfirmDialog = (function() {
     screen.classList.remove('fade-in');
     screen.classList.add('fade-out');
     isAnimationPlaying = true;
+    // Custom event that can be used to apply (screen reader) visibility
+    // changes.
+    window.dispatchEvent(new CustomEvent('confirmdialoghiding'));
     screen.addEventListener('animationend', function cd_fadeOut(ev) {
       isAnimationPlaying = false;
       screen.removeEventListener('animationend', cd_fadeOut);
@@ -128,12 +131,15 @@ var ConfirmDialog = (function() {
     screen.classList.remove('fade-out');
     screen.classList.add('fade-in');
     isAnimationPlaying = true;
+    // Custom event that can be used to apply (screen reader) visibility
+    // changes.
+    window.dispatchEvent(new CustomEvent('confirmdialogshowing'));
     screen.addEventListener('animationend', function cd_fadeIn(ev) {
       isAnimationPlaying = false;
       screen.removeEventListener('animationend', cd_fadeIn);
       screen.classList.remove('no-opacity');
+      isShown = true;
     });
-    isShown = true;
   };
 
   return {

diff --git a/shared/js/contacts/import/utilities/overlay.js b/shared/js/contacts/import/utilities/overlay.js
@@ -38,12 +38,13 @@ var utils = window.utils || {};
     this.update = function(value) {
       if (value && value <= total && value >= counter) {
         counter = value;
-        progressElement.setAttribute('value', (counter * 100) / total);
       } else {
-        progressElement.setAttribute('value', (++counter * 100) / total);
+        counter++;
       }
-       showMessage();
-     };
+      progressElement.setAttribute('value',
+        ((counter * 100) / total).toFixed()); // Percent fraction is not needed.
+      showMessage();
+    };
 
     this.setTotal = function(ptotal) {
       total = ptotal;
@@ -76,6 +77,9 @@ var utils = window.utils || {};
     overlay.classList.remove('fade-out');
     overlay.classList.add('fade-in');
     utils.overlay.isAnimationPlaying = true;
+    // Custom event that can be used to apply (screen reader) visibility
+    // changes.
+    window.dispatchEvent(new CustomEvent('loadingoverlayshowing'));
     overlay.addEventListener('animationend', function ov_onFadeIn(ev) {
       utils.overlay.isAnimationPlaying = false;
       overlay.removeEventListener('animationend', ov_onFadeIn);
@@ -157,6 +161,9 @@ var utils = window.utils || {};
     overlay.classList.remove('fade-in');
     overlay.classList.add('fade-out');
     utils.overlay.isAnimationPlaying = true;
+    // Custom event that can be used to apply (screen reader) visibility
+    // changes.
+    window.dispatchEvent(new CustomEvent('loadingoverlayhiding'));
     overlay.addEventListener('animationend', function ov_onFadeOut(ev) {
       utils.overlay.isAnimationPlaying = false;
       overlay.removeEventListener('animationend', ov_onFadeOut);