Merge pull request #2631 from Azure/rechen/jan-a11y-fixes

Accessibility bug fixes
Azure · Jan 30, 2023 · d7b7b82 · d7b7b82
2 parents 098f128 + c95cdae
commit d7b7b82
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/@batch-flask/ui/buttons/button.scss b/src/@batch-flask/ui/buttons/button.scss
@@ -6,7 +6,6 @@ bl-button-group {
 
 bl-button {
     display: inline-block;
-    height: $action-btn-size;
     outline: none;
     cursor: pointer;
     text-align: center;
@@ -42,12 +41,16 @@ bl-button {
     }
 
     &[type="wide"] {
+        border: 2px solid transparent;
+
         &.focus-outline.focus-visible, &.focus-visible {
-            outline-color: rgb(39, 185, 211);
+            border-color: $primary-color-dark;
+            outline-color: white;
             outline-width: 2.5px;
             outline-style: solid;
-            outline-offset: -1px;
+            outline-offset: -4.5px;
             opacity: 1;
+            text-align: center;
         }
     }
 

diff --git a/src/@batch-flask/ui/file/file-explorer/file-tree-view/file-tree-view.html b/src/@batch-flask/ui/file/file-explorer/file-tree-view/file-tree-view.html
@@ -27,14 +27,15 @@
     (keydown)="handleKeyboardNavigation($event)"
     (contextmenu)="showContextMenu($event)">
 
+    <p *ngIf="treeRows.length === 0" tabindex="0" class="tree-view-empty">{{'file-explorer.noFiles' | i18n }}</p>
+    <p *ngIf="fileNavigator.error" tabindex="0" class="tree-view-error">{{fileNavigator.error.message}}</p>
+
     <div class="tree-rows-container"
         [class.drop-target]="dropTargetPath === ''"
         (dragenter)="dragEnterRow($event)"
         (dragleave)="dragLeaveRow($event)"
         (dragover)="handleDragHover($event)"
         (drop)="handleDropOnRow($event)">
-        <div *ngIf="treeRows.length === 0" class="tree-view-empty">{{'file-explorer.noFiles' | i18n }}</div>
-        <div *ngIf="fileNavigator.error" class="tree-view-error">{{fileNavigator.error.message}}</div>
 
         <bl-file-tree-view-row *ngFor="let treeRow of treeRows; let  i = index; trackBy: treeRowTrackBy"
             id="{{id}}-row-{{i}}"

diff --git a/src/app/components/job/job-hook-task/job-hook-task-browser/job-hook-task-browser.html b/src/app/components/job/job-hook-task/job-hook-task-browser/job-hook-task-browser.html
@@ -2,13 +2,17 @@
     <div style="padding: 10px; flex: 1">
         <mat-checkbox [formControl]="onlyFailedControl" color="primary">Only failed</mat-checkbox>
     </div>
-    <div class="type-toggle">
+    <div role="radiogroup" aria-required="true" class="type-toggle">
         <bl-clickable class="option" (do)="updateType(HookTaskType.PreparationTask)"
+            role="radio"
+            [attr.aria-checked]="type === HookTaskType.PreparationTask"
             [attr.aria-selected]="type === HookTaskType.PreparationTask"
             [class.active]="type === HookTaskType.PreparationTask">
             Preparation tasks
         </bl-clickable>
         <bl-clickable class="option" (do)="updateType(HookTaskType.ReleaseTask)"
+            role="radio"
+            [attr.aria-checked]="type === HookTaskType.ReleaseTask"
             [attr.aria-selected]="type === HookTaskType.ReleaseTask"
             [class.active]="type === HookTaskType.ReleaseTask"
             [attr.aria-disabled]="!hasReleaseTask"