Merge pull request #2618 from Azure/shpaster/a11y-bugs

Accessibility bug fixes

Author: gingi

data/themes/classic.json

@@ -56,11 +56,11 @@
     "core-count": "#1c3f95",
     "low-priority-core-count": "#a36a00",
     "task-start-event": "#a36a00",
-    "task-complete-event": "#388e3c",
+    "task-complete-event": "#428000",
     "task-fail-event": "#aa3939",
     "starting-node-count": "#1c3f95",
     "idle-node-count": "#be93d9",
-    "running-node-count": "#388e3c",
+    "running-node-count": "#428000",
     "start-task-failed-node-count": "#aa3939",
     "rebooting-node-count": "#ff755c"
   },
@@ -74,10 +74,5 @@
     "disabled-text": "var(--color-text-primary)",
     "disabled-background": "#e5e5e5"
   },
-  "chart-colors": [
-    "#003f5c",
-    "#aa3939",
-    "#4caf50",
-    "#ffa600"
-  ]
+  "chart-colors": ["#003f5c", "#aa3939", "#4caf50", "#ffa600"]
 }

src/@batch-flask/ui/list-and-show-layout/entity-details-list.html

@@ -21,6 +21,6 @@
         <ng-content select="[bl-list-buttons]"></ng-content>
     </div>
 </div>
-<div class="entity-details-list-content">
+<div class="entity-details-list-content" aria-live="polite">
     <ng-content></ng-content>
 </div>

src/@batch-flask/ui/property-list/link-property/link-property.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, Input } from "@angular/core";
+import { ENTER, SPACE } from "@batch-flask/core/keys";
 
 @Component({
     selector: "bl-link-property",
@@ -11,4 +12,12 @@ export class LinkPropertyComponent {
     @Input() public value: string;
 
     @Input() public link: string;
+
+    @HostListener("keyup", ["$event"])
+    keyPressed($event: KeyboardEvent) {
+        $event.stopImmediatePropagation();
+        if ($event.code === ENTER || $event.code === SPACE) {
+            ($event.target as HTMLElement).click();
+        }
+    }
 }

src/@batch-flask/ui/property-list/property-content/property-content.component.ts

@@ -10,7 +10,6 @@ import "./property-content.scss";
 export class PropertyContentComponent {
     @Input() @HostBinding("class.wrap") public wrap = false;
 
-    @HostBinding("attr.role") public readonly role = "textbox";
     @HostBinding("attr.aria-readonly") public readonly ariaReadonly = true;
     @HostBinding("attr.aria-labelledby") public ariaLablledby = null;
     @HostBinding("attr.aria-describedby") public ariaDescribedBy = null;

src/app/components/pool/action/add/os-picker/os-offer-tile/os-offer-tile.html

@@ -15,6 +15,7 @@
 <button
     class="select-version"
     [matMenuTriggerFor]="menu"
+    name="button-version-select-{{prettyName}}"
     matTooltip="{{'os-offer-tile.select-version-button.tooltip' | i18n}}"
     title="{{'os-offer-tile.select-version-button.tooltip' | i18n}} ({{prettyName}})">
     <i class="fa fa-cog" aria-hidden="true"></i>

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

@@ -16,7 +16,7 @@ import { Subscription } from "rxjs";
 import "./pool-state-graph.scss";
 
 const idleColor = "#edeef2";
-const runningColor = "#388e3c";
+const runningColor = "#328000";
 const waitingForStartTaskColor = "#be93d9";
 const offlineColor = "#305796";
 const preemptedColor = "#606060";
@@ -133,8 +133,8 @@ export class PoolStateGraphComponent implements OnChanges, OnDestroy {
             return this._counts.get(this.pool.id);
         }
 
-        const dedicatedCounts: NodeCountsAttributes = {...emptyNodeCount};
-        const lowPriorityCounts: NodeCountsAttributes = {...emptyNodeCount};
+        const dedicatedCounts: NodeCountsAttributes = { ...emptyNodeCount };
+        const lowPriorityCounts: NodeCountsAttributes = { ...emptyNodeCount };
 
         for (const count of this._counts.values()) {
             this._addToSum(dedicatedCounts, count.dedicated);