From 9bc1e3c4f391aa61dc8697eae3442ae1fd241cac Mon Sep 17 00:00:00 2001 From: Yura Zenevich Date: Mon, 2 Jun 2014 23:20:08 -0400 Subject: [PATCH] Bug 1014824 - improving FTU app accessibility around screen/dialog visibility. r=fcampo --- apps/ftu/js/navigation.js | 1 + apps/ftu/js/tutorial.js | 3 +++ apps/ftu/js/ui.js | 26 +++++++++++++++++++ apps/ftu/test/unit/mock_ui_manager.js | 3 ++- apps/system/style/statusbar/statusbar.css | 3 ++- shared/js/confirm.js | 8 +++++- .../js/contacts/import/utilities/overlay.js | 15 ++++++++--- 7 files changed, 52 insertions(+), 7 deletions(-) diff --git a/apps/ftu/js/navigation.js b/apps/ftu/js/navigation.js index 17092e60fa7b..bd7807818765 100644 --- 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 index 0e4a8fd5c7d0..cedde4255591 100644 --- 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 index ace03d215b65..23496dbb7223 100644 --- 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 index c59c8884fc6b..6e38cff8267a 100644 --- 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 index b3b718c61538..a7cac67d694a 100644 --- 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 index dd9dcd5f4b04..b4083584a3e2 100644 --- 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 index 433a9b116932..0b7f76e346cd 100644 --- 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);