Add September Accessibility Bug Fixes

src/@batch-flask/ui/callout/callout.directive.ts

@@ -3,6 +3,7 @@ import { TemplatePortal } from "@angular/cdk/portal";
 import { Directive, ElementRef,  HostListener, Input, ViewContainerRef } from "@angular/core";
 import { Subscription } from "rxjs";
 import { CalloutComponent } from "./callout.component";
+import { ENTER, SPACE } from "@batch-flask/core/keys";
 
 @Directive({
     selector: "[blCallout]",
@@ -25,6 +26,17 @@ export class CalloutDirective {
         }
     }
 
+    @HostListener("keydown", ["$event"])
+    public onkeydown(event: KeyboardEvent) {
+        if (event.key === SPACE || event.key === ENTER) {
+            if (this._overlayRef) {
+                this.close();
+            } else {
+                this.open();
+            }
+        }
+    }
+
     public open() {
         this._overlayRef = this.overlay.create(this._getOverlayConfig());
         this._backDropClickSub = this._overlayRef.backdropClick().subscribe(() => {

src/@batch-flask/ui/callout/callout.html

@@ -1,5 +1,5 @@
 <ng-template>
-    <div class="bl-callout">
+    <div class="bl-callout" tabindex="0">
         <ng-content></ng-content>
     </div>
 </ng-template>

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

@@ -9,7 +9,7 @@
         <bl-account-cost-card></bl-account-cost-card>
         <h1 class="section-title">{{'account-details.resources' | i18n }}</h1>
         <div class="account-cards">
-            <bl-card class="account-card">
+            <bl-card class="account-card" routerLink="/jobs" (click)="selectAccount(account.id)">
                 <div class="title">
                     <h2>Job status</h2>
                 </div>

src/app/components/account/details/account-monitoring-section/account-monitoring-section.html

@@ -22,9 +22,9 @@ <h1 class="section-title">{{'account-details.monitoring' | i18n }}</h1>
         role="application">
         <bl-monitor-chart [metrics]="metricType" [timeRange]="currentRange" [chartType]="chartType"></bl-monitor-chart>
     </a>
-    <div class="monitor-chart current-node-counts">
-        <h2>{{'account-monitoring.currentNodeStates' | i18n }}</h2>
-        <bl-pool-state-graph></bl-pool-state-graph>
+    <div class="monitor-chart current-node-counts" tabindex="0">
+        <h2 tabindex="0">{{'account-monitoring.currentNodeStates' | i18n }}</h2>
+        <bl-pool-state-graph tabindex="0" aria-label="graph"></bl-pool-state-graph>
     </div>
 </div>
 <div  *ngIf="!isArmAccount">

src/app/components/account/monitoring/monitor-chart/monitor-chart.html

@@ -1,20 +1,20 @@
 <ng-container *ngIf="!preview">
     <div class="header">
-        <h2>
+        <h2 tabindex="0">
             {{ 'account-monitoring.' + metrics | i18n }}
         </h2>
 
 
-        <div class="aggregation" *ngIf="aggregation">
+        <div class="aggregation" *ngIf="aggregation" tabindex="0">
             {{aggregation}}
         </div>
     </div>
     <ng-container *ngIf="isChartReady">
-        <div class="chart-container">
+        <div class="chart-container" tabindex="0" aria-label="graph">
             <canvas blChart [datasets]="datasets" [options]="options" [chartType]="chartType" [colors]="colors"></canvas>
         </div>
         <div class="legend">
-            <div class="legend-item" *ngFor="let dataset of datasets;trackBy: trackDataSet;let index=index">
+            <div class="legend-item" *ngFor="let dataset of datasets;trackBy: trackDataSet;let index=index" tabindex="0">
                 <div class="value">
                     {{total[index]}}
                 </div>
@@ -23,7 +23,7 @@ <h2>
                 </div>
             </div>
         </div>
-        <div class="interval-label" *ngIf="interval">
+        <div class="interval-label" *ngIf="interval" tabindex="0">
             {{'account-monitoring.aggregatedOver' | i18n: {interval: interval} }}
         </div>
     </ng-container>

src/app/components/pool/action/add/pool-create-basic-dialog.html

@@ -3,7 +3,7 @@
         <bl-form-section title="Pool details" subtitle="Basic information about the pool">
             <div class="grow">
                 <div class="gcol">
-                    <bl-form-field class="form-element">
+                    <bl-form-field class="form-element required">
                         <input blInput #idInput formControlName="id" placeholder="ID" maxlength="64">
 
                         <bl-hint align="end" attr.aria-label="{{idInput.value.length}} characters out of 64">{{idInput.value.length}} / 64</bl-hint>

src/app/components/pool/action/add/pool-create-basic-dialog.scss

@@ -26,3 +26,8 @@ bl-pool-create-basic-dialog {
         color: #1d54af;
     }
 }
+
+.required label:after {
+    content: "*";
+    color: $validation-error-color;
+}

src/client/proxy/manual-proxy-configuration-window/manual-proxy-configuration-window.html

@@ -52,15 +52,15 @@ <h1>Enter proxy configuration for BatchExplorer</h1>
     </div>
     <div class="form-element">
         <label for="port">Port</label>
-        <input id="port">
+        <input id="port" placeholder="ex: 80">
     </div>
     <div class="form-element">
         <label for="username">Username</label>
-        <input id="username">
+        <input id="username" placeholder="ex: sample_username">
     </div>
     <div class="form-element">
         <label for="password">Password</label>
-        <input id="password" type="password">
+        <input id="password" type="password" placeholder="ex: samplepassword">
     </div>
     <br>
     <button class="save-button" onclick="submit()">Save</button>