Merge pull request #636 from threema-ch/accessibility2

Accessibility improvements

src/app.ts

@@ -41,6 +41,7 @@ angular.module('3ema', [
     // Angular
     'ngAnimate',
     'ngSanitize',
+    'ngAria',
 
     // 3rd party
     'ui.router',

src/components/toggle_button.ts

@@ -32,20 +32,20 @@ export default {
         iconEnabled: '@',
         iconDisabled: '@',
     },
+    controller: function() {
+        this.getLabel = () => this.flag ? this.labelEnabled : this.labelDisabled;
+        this.getIcon = () => this.flag ? this.iconEnabled : this.iconDisabled;
+        this.action = () => this.flag ? this.onDisable() : this.onEnable();
+    },
     template: `
         <md-button
             class="md-icon-button"
-            translate-attr="{'aria-label': $ctrl.labelEnabled, 'title': $ctrl.labelEnabled}"
-            ng-if="$ctrl.flag"
-            ng-click="$ctrl.onDisable()">
-            <md-icon><img ng-src="{{ $ctrl.iconEnabled }}"></md-icon>
-        </md-button>
-        <md-button
-            class="md-icon-button"
-            translate-attr="{'aria-label': $ctrl.labelDisabled, 'title': $ctrl.labelDisabled}"
-            ng-if="!$ctrl.flag"
-            ng-click="$ctrl.onEnable()">
-            <md-icon><img ng-src="{{ $ctrl.iconDisabled }}"></md-icon>
+            translate-attr="{'aria-label': $ctrl.getLabel(), 'title': $ctrl.getLabel()}"
+            role="button"
+            tabindex="0"
+            ng-click="$ctrl.action()"
+            aria-pressed="$ctrl.flag">
+            <md-icon><img ng-src="{{ $ctrl.getIcon() }}"></md-icon>
         </md-button>
     `,
 };

src/partials/welcome.html

@@ -17,12 +17,12 @@
                     size="{{ ctrl.qrCode.size }}" data="{{ ctrl.qrCode.data }}"></qrcode>
             <div class="password-entry">
                 <label>
-                    <p translate>welcome.CHOOSE_PASSWORD</p>
+                    <p translate id="aria-label-password-create">welcome.CHOOSE_PASSWORD</p>
                     <form autocomplete="off">
                         <md-input-container md-no-float class="md-block">
                             <input type="password"
                                    ng-model="ctrl.password"
-                                   aria-label="Password"
+                                   aria-labelledby="aria-label-password-create"
                                    translate-attr="{'placeholder': 'welcome.PASSWORD', 'aria-label': 'welcome.PASSWORD'}"
                                    autocomplete="new-password">
                         </md-input-container>
@@ -39,15 +39,15 @@
             <h2 class="instructions" translate>welcome.PLEASE_UNLOCK</h2>
             <div class="password-entry">
                 <label>
-                    <p translate>welcome.ENTER_PASSWORD</p>
+                    <p translate id="aria-label-password-reconnecte">welcome.ENTER_PASSWORD</p>
                     <form ng-submit="ctrl.unlockConfirm()">
                         <md-input-container md-no-float class="md-block">
                             <input type="password"
                                    ng-model="ctrl.password"
                                    ng-disabled="ctrl.formLocked"
                                    autofocus
-                                   aria-label="Password"
-                                   translate-attr="{'placeholder': 'welcome.PASSWORD', 'aria-label': 'welcome.PASSWORD'}"
+                                   aria-labelledby="aria-label-password-reconnect"
+                                   translate-attr="{'placeholder': 'welcome.PASSWORD'}"
                                    autocomplete="current-password">
                         </md-input-container>
                         <md-button type="submit" class="md-raised md-primary" translate translate-attr-aria-label="welcome.BTN_RECONNECT">
@@ -65,9 +65,9 @@
         <div ng-if="ctrl.showLoadingIndicator">
             <h2 class="instructions" translate>welcome.CONNECTING</h2>
             <div class="loading">
-                <md-progress-circular md-mode="determinate" value="{{ ctrl.progress }}" md-diameter="250">
+                <md-progress-circular md-mode="determinate" value="{{ ctrl.progress }}" md-diameter="250" ng-aria-disable>
                 </md-progress-circular>
-                <div class="info">
+                <div class="info" aria-live="polite" ng-aria-disable>
                     <p class="percentage">{{ ctrl.progress }}%</p>
                     <p ng-if="ctrl.state === 'push'" translate>welcome.WAITING_FOR_PUSH</p>
                     <p ng-if="ctrl.state === 'peer_handshake'" translate>welcome.CONNECTING_TO_APP</p>
@@ -100,11 +100,11 @@
                                 <span translate>troubleshooting.ADBLOCKER</span>
                             </li>
                         </ul>
-                        <md-button class="md-raised md-primary reload-btn" ng-click="ctrl.deleteSession()" ng-if="ctrl.state === 'push'">
-                        	<span translate>welcome.FORGET_SESSION_BTN</span>
+                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.deleteSession()" ng-if="ctrl.state === 'push'" aria-labelledby="aria-label-forget">
+                           <span translate id="aria-label-forget">welcome.FORGET_SESSION_BTN</span>
                         </md-button>
-                        <md-button class="md-raised md-primary reload-btn" ng-click="ctrl.reload()">
-                        	<i class="material-icons">refresh</i> <span translate>welcome.RELOAD</span>
+                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.reload()" aria-labelledby="aria-label-reload">
+                            <i class="material-icons">refresh</i> <span translate id="aria-label-reload">welcome.RELOAD</span>
                         </md-button>
                     </div>
                 </div>