commit 69c387627d55dd4718b31a976cd71682ba0d23ec
author John Emau <John.Emau@microsoft.com> Mon Nov 25 18:17:47 2019 -0800
committer Commit Bot <commit-bot@chromium.org> Tue Nov 26 02:34:24 2019 +0000
tree d8742750cce1dfb0352b7ce02c6d78c306310fae
parent a4d8446198d2a774c00e27effd696f56932afcbe

Audits: Mark progress bar with role="progressbar"

This change give the audits status progress bar role="progressbar"
with values marking it for assistive technology like screen readers.

To support this change UI.ARIAUtils.setProgressBarValue was added which
can optionally set aria-valuetext. The audits status has a value that
matches the index of the phase we are in.

Additionally this change removes the 'order' property from audit phases
and instead phase changes now rely on the phase's index position.

This meets the following WCAG success criteria
1.3.1 https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships
4.1.2 https://www.w3.org/WAI/WCAG21/quickref/#name-role-value

Note on testing: The progress bar value is already read out by the
aria-live="status" on most screen readers like NVDA on windows.

Change-Id: I5fead17a7bd859129f1148b1107a319ea29af8bb
Bug: 963183
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1872382
Commit-Queue: John Emau <John.Emau@microsoft.com>
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>

front_end/audits/AuditsStatusView.js

diff --git a/front_end/audits/AuditsStatusView.js b/front_end/audits/AuditsStatusView.js
index 3717a42..49a044e 100644
--- a/front_end/audits/AuditsStatusView.js
+++ b/front_end/audits/AuditsStatusView.js
@@ -55,6 +55,8 @@
     this._progressWrapper = fragment.$('progress-wrapper');
     this._progressBar = fragment.$('progress-bar');
     this._statusText = fragment.$('status-text');
+    // Use StatusPhases array index as progress bar value
+    UI.ARIAUtils.markAsProgressBar(this._progressBar, 0, Audits.StatusView.StatusPhases.length - 1);
     this._cancelButton = cancelButton;
     UI.ARIAUtils.markAsStatus(this._statusText);
 
@@ -123,15 +125,19 @@
     }
 
     const nextPhase = this._getPhaseForMessage(message);
+    const nextPhaseIndex = Audits.StatusView.StatusPhases.indexOf(nextPhase);
+    const currentPhaseIndex = Audits.StatusView.StatusPhases.indexOf(this._currentPhase);
     if (!nextPhase && !this._currentPhase) {
       this._commitTextChange(Common.UIString('Lighthouse is warming up\u2026'));
       clearTimeout(this._scheduledFastFactTimeout);
-    } else if (nextPhase && (!this._currentPhase || this._currentPhase.order < nextPhase.order)) {
+    } else if (nextPhase && (!this._currentPhase || currentPhaseIndex < nextPhaseIndex)) {
       this._currentPhase = nextPhase;
-      this._scheduleTextChange(this._getMessageForPhase(nextPhase));
+      const text = this._getMessageForPhase(nextPhase);
+      this._scheduleTextChange(text);
       this._scheduleFastFactCheck();
       this._resetProgressBarClasses();
       this._progressBar.classList.add(nextPhase.progressBarClass);
+      UI.ARIAUtils.setProgressBarValue(this._progressBar, nextPhaseIndex, text);
     }
   }
 
@@ -300,27 +306,24 @@
   /^You probably have multiple tabs open/,
 ];
 
-/** @typedef {{message: string, progressBarClass: string, order: number}} */
+/** @typedef {{message: string, progressBarClass: string}} */
 export const StatusPhases = [
   {
     id: 'loading',
     progressBarClass: 'loading',
     statusMessagePrefix: 'Loading page',
-    order: 10,
   },
   {
     id: 'gathering',
     progressBarClass: 'gathering',
     message: ls`Lighthouse is gathering information about the page to compute your score.`,
     statusMessagePrefix: 'Gathering',
-    order: 20,
   },
   {
     id: 'auditing',
     progressBarClass: 'auditing',
     message: ls`Almost there! Lighthouse is now generating your report.`,
     statusMessagePrefix: 'Auditing',
-    order: 30,
   }
 ];
 

front_end/ui/ARIAUtils.js

diff --git a/front_end/ui/ARIAUtils.js b/front_end/ui/ARIAUtils.js
index 246c395..3535091 100644
--- a/front_end/ui/ARIAUtils.js
+++ b/front_end/ui/ARIAUtils.js
@@ -399,6 +399,19 @@
 
 /**
  * @param {!Element} element
+ * @param {number} valueNow
+ * @param {string=} valueText
+ */
+export function setProgressBarValue(element, valueNow, valueText) {
+  element.setAttribute('aria-valuenow', valueNow);
+
+  if (valueText) {
+    element.setAttribute('aria-valuetext', valueText);
+  }
+}
+
+/**
+ * @param {!Element} element
  * @param {string} name
  */
 export function setAccessibleName(element, name) {
@@ -593,6 +606,7 @@
   setInvalid,
   setPressed,
   setProgressBarCurrentPercentage,
+  setProgressBarValue,
   setAccessibleName,
   setDescription,
   setActiveDescendant,