Accessibility bug fixes

python/server/websocket_server.py

@@ -82,7 +82,7 @@ async def process_request(self, request: JsonRpcRequest):
             print(traceback.format_exc())
             response = JsonRpcResponse(
                 request=request,
-                error=error.JsonRpcError(500, "Server internal error", str(e)),
+                error=error.JsonRpcError(500, "Internal server error", str(e)),
             )
             await self.send_response(response)
 

src/@batch-flask/core/keys.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match */
 export const ENTER = "Enter";
-export const SPACE = " ";
+export const SPACE = "Space";
 
 /**
  * Mapping of the key to keyCode

src/@batch-flask/ui/form/form-field/form-field.html

@@ -19,9 +19,9 @@
         <ng-content select="[blFormFieldSuffix]"></ng-content>
     </div>
 </div>
-<div class="hints-container" *ngIf="hints.length > 0">
+<div class="hints-container" aria-live="polite">
     <ng-content select="bl-hint"></ng-content>
 </div>
-<div class="errors-container" *ngIf="errors.length > 0">
+<div class="errors-container" aria-live="assertive">
     <ng-content select="bl-error"></ng-content>
 </div>

src/@batch-flask/ui/notifications/notification-service.ts

@@ -1,4 +1,5 @@
-import { Injectable } from "@angular/core";
+import { LiveAnnouncer } from "@angular/cdk/a11y";
+import { Injectable, Injector } from "@angular/core";
 import { List } from "immutable";
 import { BehaviorSubject, Observable } from "rxjs";
 import { Notification, NotificationConfig, NotificationLevel, NotificationTimer } from "./notification";
@@ -16,9 +17,12 @@ export class NotificationService {
     private _persistedNotifications = new BehaviorSubject(List<Notification>([]));
     private _dismissTimers: StringMap<NotificationTimer> = {};
 
-    constructor() {
+    private liveAnnouncer: LiveAnnouncer;
+
+    constructor(injector: Injector) {
         this.notifications = this._notifications.asObservable();
         this.persistedNotifications = this._persistedNotifications.asObservable();
+        this.liveAnnouncer = injector.get(LiveAnnouncer);
     }
 
     public notify(
@@ -32,6 +36,7 @@ export class NotificationService {
         if (config.autoDismiss > 0) {
             this._registerForDismiss(notification);
         }
+        this.liveAnnouncer.announce(`${title} ${message}`, "polite");
         return notification;
     }
 

src/@batch-flask/ui/notifications/toast/toast.component.ts

@@ -14,9 +14,7 @@ import "./toast.scss";
 export class ToastComponent extends ClickableComponent {
     @Input() public notification: Notification;
 
-    // Aria
     @HostBinding("attr.role") public readonly role = "alert";
-    @HostBinding("attr.live") public readonly ariaLive = "assertive";
 
     @HostBinding("class")
     public get notificationClass(): string {

src/@batch-flask/ui/notifications/toast/toast.html

@@ -1,7 +1,7 @@
 <div class="notification-title">{{notification.title}}</div>
 <div class="notification-message">{{notification.message}}</div>
 <div class="separator"></div>
-<div class="actions">
+<div *ngIf="actions.length > 0" class="actions" autofocus>
     <bl-clickable *ngFor="let action of actions;trackBy: trackAction" (do)="performAction($event, action)" class="action">
         {{action.name}}
     </bl-clickable>

src/@batch-flask/ui/property-list/property-group/property-group.html

@@ -10,7 +10,7 @@ <h4 class="noselect">{{label}}</h4>
     <bl-button color="light" type="round" [action]="triggerEdit" *ngIf="edit" title="Edit"><i class="fa fa-pencil"></i></bl-button>
 </bl-clickable>
 <div class="group-content" *ngIf="!collapsed" [id]="contentId">
-    <div class="warning-message" *ngIf="warningMessage">
+    <div class="warning-message" *ngIf="warningMessage" aria-live="polite">
         <i class="fa fa-warning"></i>
         <span>{{warningMessage}}</span>
     </div>

src/@batch-flask/ui/select/select.component.spec.ts

@@ -120,12 +120,14 @@ describe("SelectComponent", () => {
 
         it("Should show placeholder when no value", () => {
             expect(labelEl.nativeElement.textContent).toContain("Myselect");
+            expect(de.nativeElement.getAttribute("aria-label")).toContain("Myselect");
         });
 
         it("Should show value when picked", () => {
             testComponent.value.setValue("opt-3");
             fixture.detectChanges();
             expect(labelEl.nativeElement.textContent).toContain("Carrot");
+            expect(de.nativeElement.getAttribute("aria-label")).toEqual("Myselect: Carrot");
         });
 
         it("list all options when clicking on button", async () => {

src/@batch-flask/ui/select/select.component.ts

@@ -116,7 +116,7 @@ export class SelectComponent<TValue = any> implements FormFieldControl<any>, Opt
     @HostBinding("attr.aria-haspopup") public readonly ariaHasPopup = "listbox";
     @Input("attr.aria-label") @HostBinding("attr.aria-label")
     public set ariaLabel(label: string) { this._ariaLabel = label; }
-    public get ariaLabel() { return this._ariaLabel || this.placeholder; }
+    public get ariaLabel() { return this._ariaLabel || this.title; }
     @HostBinding("attr.aria-expanded") public get ariaExpanded() { return this.dropdownOpen; }
     @HostBinding("attr.aria-owns") public get ariaOwns() { return this.dropdownId; }
     @HostBinding("attr.tabindex") public readonly tabindex = -1;

src/app/components/account/details/programatic-usage/aad-credentials-picker/aad-credentials-picker.html

@@ -23,7 +23,7 @@ <h1>AAD Credentials</h1>
             <bl-property-group>
                 <bl-text-property label="Tenant Id" [value]="tenantId"></bl-text-property>
                 <bl-text-property label="Client Id" [value]="pickedApplication.id"></bl-text-property>
-                <div class="danger">
+                <div class="danger" aria-live="polite">
                     <i class="fa fa-warning"></i>Save this key, you will not see it again after closing this dialog.
                 </div>
                 <bl-text-property label="Secret" [value]="pickedSecret.value"></bl-text-property>

src/app/components/account/details/programatic-usage/aad-credentials-picker/generate-aad-app-secret/generate-aad-app-secret.html

@@ -31,11 +31,11 @@ <h4>Secret</h4>
         <bl-aad-app-secret-picker [formControl]="secret">
         </bl-aad-app-secret-picker>
 
-        <bl-button type="wide" color="primary" [action]="addNewSecret" matTooltip="Add a new secret without modifing the existing ones">
+        <bl-button type="wide" color="primary" [action]="addNewSecret" title="Add a new secret without modifing the existing ones">
             Add
         </bl-button>
 
-        <bl-button *ngIf="passwordCredentials.size > 0" type="wide" color="danger" [action]="resetCredentials" matTooltip="Reset credentials. This will remove all existing secrets and replace it with a new one">
+        <bl-button *ngIf="passwordCredentials.size > 0" type="wide" color="danger" [action]="resetCredentials" title="Reset credentials. This will remove all existing secrets and replace it with a new one">
             Reset
         </bl-button>
     </div>

src/app/components/account/details/programatic-usage/programatic-usage.html

@@ -17,7 +17,7 @@ <h1>
             <div>
                 {{'programatic-usage.credentials' | i18n}}
             </div>
-            <div *ngIf="pickedCredentialType === CredentialType.AAD && !aadCredentials" class="aad-needs-setup-creds"
+            <div *ngIf="pickedCredentialType === CredentialType.AAD && !aadCredentials" class="aad-needs-setup-creds" aria-live="polite"
                 matTooltip="Pick an application and generate a key to have the templates filled with the correct informations">
                 <i class="fa fa-warning"></i>{{'programatic-usage.setup' | i18n}}
             </div>

src/app/components/account/details/programatic-usage/programing-sample/programing-sample.html

@@ -1,5 +1,5 @@
 <div class="description">
-    <div *ngIf="credentialType === CredentialType.AAD && !aadCredentials" class="aad-needs-setup-creds">
+    <div *ngIf="credentialType === CredentialType.AAD && !aadCredentials" class="aad-needs-setup-creds" aria-live="polite">
         <i class="fa fa-warning"></i>You haven't picked an Azure AD application yet. The sample below will not have all the information filled.
     </div>
     <bl-property-group label="" class="wide" class="prerequisites">

src/app/components/data/action/delete/delete-container-dialog.html

@@ -7,7 +7,7 @@
                 {{ container.name}}
             </li>
         </ul>
-        <div class="warning-message">
+        <div class="warning-message" aria-live="polite">
             <i class="fa fa-warning"></i>&nbsp;
             <span>{{"delete-container-dialog.warning" | i18n}}</span>
         </div>

src/app/components/job/details/job-progress-status/job-progress-status.html

@@ -21,7 +21,7 @@
         </div>
     </div>
 </div>
-<div class="warning-container">
+<div class="warning-container" aria-live="polite">
     <div class="unaccurate-data" *ngIf="taskCountTooHigh">
         <i class="fa fa-warning"></i>{{'job-progress-status.inaccurate' | i18n}}
     </div>

src/app/components/pool/details/pool-cost-card/pool-cost-card.html

@@ -7,13 +7,4 @@
             [attr.aria-label]="label">
         </canvas>
     </div>
-    <div class="total">
-        <i *ngIf="showPartialDataWarning" class="fa fa-warning" matTooltip="Cost tracking at the pool level is a recent change. Data will be missing before April 2019"></i>
-        <bl-time-range-picker [formControl]="timeRange" [quickRanges]="quickRanges" [showLabel]="false"></bl-time-range-picker>
-
-        <i *ngIf="loading" class="fa fa-spiner fa-spin"  title="Loading"></i>
-        <span *ngIf="!loading">
-            {{total}} {{currency}}
-        </span>
-    </div>
 </ng-container>

src/app/components/pool/graphs/performance-graph/enable-app-insights-doc/enable-app-insights-doc.html

@@ -2,15 +2,17 @@ <h2>To view stats like cpu and memory usage you must enable application insights
 
 <p>
     You can check the documentation here
-    <bl-clickable (do)="openDoc()" role="link">https://github.com/Azure/batch-insights</bl-clickable>
+    <bl-clickable (do)="openDoc()"
+        [title]="'enable-app-insights-doc.doc-title' | i18n"
+        role="link">https://github.com/Azure/batch-insights</bl-clickable>
 </p>
 
 <h4>Quick Steps</h4>
 <ol>
     <li>1. Add `APP_INSIGHTS_INSTRUMENTATION_KEY` environment variable in the start task(App insights instrumentation key)</li>
     <li>2. Add `APP_INSIGHTS_APP_ID` environment variable in the start task(App insights application ID)</li>
     <li>3. Add os specific one liner in your start task see
-        <bl-clickable (do)="openDoc('#ubuntu')"  role="link">doc</bl-clickable>
+        <bl-clickable (do)="openDoc('#ubuntu')" [title]="'enable-app-insights-doc.doc-title-os-specific' | i18n" role="link">doc</bl-clickable>
     </li>
 </ol>
 <p class="warning">

src/app/components/pool/graphs/performance-graph/enable-app-insights-doc/enable-app-insights-doc.i18n.yml

@@ -0,0 +1,3 @@
+enable-app-insights-doc:
+  doc-title: Instructions on enabling Batch Insights
+  doc-title-os-specific: OS-specific instructions on adding Batch Insights to start task

src/app/components/pool/graphs/pool-graphs.component.ts

@@ -156,6 +156,7 @@ export class PoolGraphsComponent implements OnChanges, OnDestroy {
 
     @autobind()
     public openEditStartTask() {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
         const ref = this.sidebarManager.open(`edit-start-task-${this.pool.id}`, StartTaskEditFormComponent);
         ref.component.pool = this.pool;
     }

src/app/components/pool/graphs/pool-graphs.html

@@ -1,25 +1,39 @@
 <div>
-    <bl-banner *ngIf="startTaskFailedError" fixMessage="Edit the start task" [fix]="openEditStartTask">
-        <div message>The start task has failed on {{startTaskFailedError.failedStartTaskNodes}} out of {{startTaskFailedError.nodeCount}} nodes.</div>
-        <div [other-fix]="rebootFailedNodes" fixMessage="Reboot failed nodes"></div>
-        <div *ngIf="isPaasPool" [other-fix]="reimageFailedNodes" fixMessage="Reimage failed nodes"></div>
+    <bl-banner *ngIf="startTaskFailedError"
+        [fixMessage]="'pool-graphs.fixes.edit-start-task' | i18n"
+        [fix]="openEditStartTask">
+        <div message>
+            {{'pool-graphs.errors.start-task-failed' | i18n: {
+                failed: startTaskFailedError.failedStartTaskNodes,
+                total: startTaskFailedError.nodeCount
+            } }}
+        </div>
+        <div [other-fix]="rebootFailedNodes"
+            [fixMessage]="'pool-graphs.fixes.reboot-failed-nodes' | i18n">
+        </div>
+        <div *ngIf="isPaasPool" [other-fix]="reimageFailedNodes"
+            [fixMessage]="'pool-graphs.fixes.reimage-failed-nodes' | i18n">
+        </div>
     </bl-banner>
     <bl-banner *ngIf="unusableNodeError">
-        <div message>{{unusableNodeError.failedUnusableNodes}} out of {{unusableNodeError.nodeCount}} nodes are in an unusable state.
-            Please click the nodes for more details.
+        <div message>
+            {{'pool-graphs.errors.unusable-nodes' | i18n: {
+                failed: unusableNodeError.failedUnusableNodes,
+                total: unusableNodeError.nodeCount
+            } }}
         </div>
     </bl-banner>
 </div>
 <bl-metrics-monitor class="graphs-container">
     <!-- Only show the heatmap, available nodes and running tasks on the pool -->
     <ng-container *ngIf="!node">
-        <bl-metrics-monitor-metric label="Heatmap">
+        <bl-metrics-monitor-metric [label]="'pool-graphs.heatmap' | i18n">
             <bl-nodes-heatmap blMonitorGraphPreview [pool]="pool" [nodes]="nodes" [showRunningTasks]="false"
                 [showLegend]="false" [interactive]="false" [limitNode]="10"></bl-nodes-heatmap>
 
             <bl-nodes-heatmap blMonitorGraphChart [pool]="pool" [nodes]="nodes"></bl-nodes-heatmap>
         </bl-metrics-monitor-metric>
-        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.nodes'" label="Available nodes">
+        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.nodes'" [label]="'pool-graphs.available-nodes' | i18n">
             <bl-history-graph blMonitorGraphPreview [max]="pool.targetNodes" [history]="runningNodesHistory.history"
                 [interactive]="false" [historySize]="selectedHistoryLength.value">
             </bl-history-graph>
@@ -28,7 +42,7 @@
                 [historySize]="selectedHistoryLength.value">
             </bl-history-graph>
         </bl-metrics-monitor-metric>
-        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.tasks'" label="Running tasks">
+        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.tasks'" [label]="'pool-graphs.running-tasks' | i18n">
             <bl-history-graph blMonitorGraphPreview [max]="maxRunningTasks" [history]="runningTaskHistory.history"
                 [interactive]="false" [historySize]="selectedHistoryLength.value">
             </bl-history-graph>
@@ -70,12 +84,12 @@
 
                 <bl-network-usage-graph blMonitorGraphChart metric="network" [data]="performanceMetrics" [pool]="pool" class="full-display"></bl-network-usage-graph>
             </bl-metrics-monitor-metric>
-            <bl-metrics-monitor-metric label="Gpu usage" *ngIf="hasGPU">
+            <bl-metrics-monitor-metric [label]="'pool-graphs.gpu-usage' | i18n" *ngIf="hasGPU">
                 <bl-gpu-usage-graph blMonitorGraphPreview #gpuUsage [data]="performanceMetrics" [pool]="pool" [interactive]="false"></bl-gpu-usage-graph>
                 <div blMetricsStatus>{{gpuUsage.status | async}}</div>
                 <bl-gpu-usage-graph blMonitorGraphChart [data]="performanceMetrics" [pool]="pool" [showIndividualGpu]="node" class="full-display"></bl-gpu-usage-graph>
             </bl-metrics-monitor-metric>
-            <bl-metrics-monitor-metric label="Gpu memory" *ngIf="hasGPU">
+            <bl-metrics-monitor-metric [label]="'pool-graphs.gpu-memory' | i18n" *ngIf="hasGPU">
                 <bl-gpu-memory-usage-graph blMonitorGraphPreview #gpuUsage [data]="performanceMetrics" [pool]="pool" [interactive]="false"></bl-gpu-memory-usage-graph>
                 <div blMetricsStatus>{{gpuUsage.status | async}}</div>
                 <bl-gpu-memory-usage-graph blMonitorGraphChart [data]="performanceMetrics" [pool]="pool" [showIndividualGpu]="node"
@@ -84,9 +98,9 @@
         </ng-container>
     </ng-container>
     <ng-container *ngIf="!appInsightsEnabled">
-        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.insights'" label="Application Insights">
+        <bl-metrics-monitor-metric *blFeatureOn="'pool.graphs.insights'" [label]="'pool-graphs.application-insights' | i18n">
             <bl-cpu-usage-graph blMonitorGraphPreview [data]="performanceMetrics" [pool]="pool" [interactive]="false"></bl-cpu-usage-graph>
-            <div blMetricsStatus>{{'pool-graphs.notEnabled' | i18n}}</div>
+            <div blMetricsStatus>{{'pool-graphs.not-enabled' | i18n}}</div>
 
             <bl-enable-app-insights-doc blMonitorGraphChart></bl-enable-app-insights-doc>
         </bl-metrics-monitor-metric>

src/app/components/pool/graphs/pool-graphs.i18n.yml

@@ -1,11 +1,24 @@
 pool-graphs:
+  application-insights: Application Insights
+  available-nodes: Available nodes
   cpu: CPU
-  memory: Memory
   diskIO: Disk IO
   diskUsage: Disk usage
-  network: Network
-  notEnabled: Cpu, memory, disk, etc.
+  errors:
+    start-task-failed: The start task has failed on {failed} out of {total} nodes.
+    unusable-nodes: "{failed} out of {total} nodes are in an unusable state. Please click the nodes for more details."
+  fixes:
+    edit-start-task: Edit the start task
+    reboot-failed-nodes: Reboot failed nodes
+    reimage-failed-nodes: Reimage failed nodes
+  gpu-memory: Gpu memory
+  gpu-usage: Gpu usage
+  heatmap: Heatmap
   last: Last
+  memory: Memory
+  network: Network
+  not-enabled: Cpu, memory, disk, etc.
+  running-tasks: Running tasks
   timespan:
     label: Graphs timespan
     10min: 10 minutes

src/app/components/task/base/task-state/task-state.html

@@ -1,4 +1,4 @@
-<span [matTooltip]="errorMessage" matTooltipPosition="right">
+<span [matTooltip]="errorMessage" matTooltipPosition="right" aria-live="polite">
     <i class="fa"
         aria-hidden="true"
         [class.fa-warning]="hasError"