Merge pull request #373 from mozilla/aria-connecting-states

Add aria-label for all the connecting states without text. Fixes #368

Author: bakulf

src/_locales/en_US/messages.json

@@ -22,6 +22,12 @@
   "heroProxyOn": {
     "message": "ON"
   },
+  "heroProxyLogin": {
+    "message": "Login"
+  },
+  "heroProxyConnecting": {
+    "message": "Connecting"
+  },
 
   "injectedModalHeading": {
     "message": "Firefox Private Network"

src/view.js

@@ -73,11 +73,16 @@ export class View {
     settingsElement.toggleAttribute("hidden", !shouldShow);
   }
 
-  static setState(state, stateButtonText) {
+  static setState(state, stateButtonSettings = {}) {
     let stateElement = document.getElementById("state");
     stateElement.setAttribute("data-state", state);
     let stateButtonElement = document.getElementById("stateButton");
-    stateButtonElement.textContent = stateButtonText || "";
+    stateButtonElement.textContent = stateButtonSettings.text || "";
+    if (stateButtonSettings.label) {
+      stateButtonElement.setAttribute("aria-label", stateButtonSettings.label);
+    } else {
+      stateButtonElement.removeAttribute("aria-label");
+    }
   }
 
   // To be overwritten with a string for the header

src/views/connecting.js

@@ -3,7 +3,7 @@ import {View} from "../view.js";
 // This is the first view to be shown.
 class ViewConnecting extends View {
   show() {
-    View.setState("connecting");
+    View.setState("connecting", {label: this.getTranslation("heroProxyConnecting")});
     View.showToggleButton(true);
 
     return escapedTemplate`

src/views/error.js

@@ -2,7 +2,7 @@ import {View} from "../view.js";
 
 class ViewError extends View {
   show(data) {
-    View.setState("disabled", this.getTranslation("heroProxyOff"));
+    View.setState("disabled", {text: this.getTranslation("heroProxyOff")});
     return escapedTemplate`
     <p>
       ${this.getTranslation(data)}

src/views/exempt.js

@@ -2,7 +2,7 @@ import {View} from "../view.js";
 
 class ViewExemptTab extends View {
   show(proxyState) {
-    View.setState("disabled", this.getTranslation("heroProxyOff"));
+    View.setState("disabled", {text: this.getTranslation("heroProxyOff")});
     View.showToggleButton(false);
 
     return escapedTemplate`

src/views/loading.js

@@ -3,7 +3,7 @@ import {View} from "../view.js";
 // This is the first view to be shown.
 class ViewLoading extends View {
   show() {
-    View.setState("connecting");
+    View.setState("connecting", {label: this.getTranslation("heroProxyConnecting")});
     return escapedTemplate`
     <p>
       ${this.getTranslation("viewLoading")}

src/views/login.js

@@ -3,7 +3,7 @@ import {View} from "../view.js";
 // Login view.
 class ViewLogin extends View {
   show(proxyState) {
-    View.setState("login");
+    View.setState("login", {label: this.getTranslation("heroProxyLogin")});
 
     let text;
     if (proxyState === PROXY_STATE_UNAUTHENTICATED) {

src/views/main.js

@@ -36,9 +36,9 @@ class ViewMain extends View {
     this.proxyEnabled = data.proxyState === PROXY_STATE_ACTIVE;
 
     if (this.proxyEnabled) {
-      View.setState("enabled", this.getTranslation("heroProxyOn"));
+      View.setState("enabled", {text: this.getTranslation("heroProxyOn")});
     } else {
-      View.setState("disabled", this.getTranslation("heroProxyOff"));
+      View.setState("disabled", {text: this.getTranslation("heroProxyOff")});
     }
   }
 

src/views/offline.js

@@ -2,7 +2,7 @@ import {View} from "../view.js";
 
 class ViewOffline extends View {
   show() {
-    View.setState("disabled", this.getTranslation("heroProxyOff"));
+    View.setState("disabled", {text: this.getTranslation("heroProxyOff")});
     View.hideToggleButton();
 
     return escapedTemplate`<p>

src/views/otherInUse.js

@@ -2,7 +2,7 @@ import {View} from "../view.js";
 
 class ViewOtherInUse extends View {
   show() {
-    View.setState("disabled", this.getTranslation("heroProxyOff"));
+    View.setState("disabled", {text: this.getTranslation("heroProxyOff")});
     View.hideToggleButton();
 
     return escapedTemplate`