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

Accessibility bug fixes
Azure · Jan 27, 2023 · 4cc837e · 4cc837e
2 parents ee1f66d + 87c2a34
commit 4cc837e
Show file tree

Hide file tree

Showing 96 changed files with 379 additions and 138 deletions.
diff --git a/i18n/resources.de.json b/i18n/resources.de.json
@@ -76,8 +76,8 @@
   "profile-button.profile": "Profil",
   "profile-button.settings": "Einstellungen",
   "profile-button.viewLogs": "Logs anzeigen",
-  "programatic-usage.authenticationType": "Authentifizierungstyp",
-  "programatic-usage.credentials": "Anmeldeinformationen",
+  "programmatic-usage.authenticationType": "Authentifizierungstyp",
+  "programmatic-usage.credentials": "Anmeldeinformationen",
   "rerun-task-form.action": "Erneut ausführen",
   "resource-permission-button.none": "NONE",
   "resource-permission-button.permission": "Berechtigung",

diff --git a/i18n/resources.es.json b/i18n/resources.es.json
@@ -128,8 +128,8 @@
   "profile-button.settings": "Configuración",
   "profile-button.viewLogs": "Ver registros",
   "profile-button.viewTheme": "Ver colores del tema",
-  "programatic-usage.authenticationType": "Tipo de autenticación",
-  "programatic-usage.credentials": "Credenciales",
+  "programmatic-usage.authenticationType": "Tipo de autenticación",
+  "programmatic-usage.credentials": "Credenciales",
   "rerun-task-form.action": "Volver a ejecutar",
   "rerun-task-form.title": "Volver a ejecutar tarea",
   "resource-permission-button.giveRole": "Papel de dar {rol}",

diff --git a/i18n/resources.fr.json b/i18n/resources.fr.json
@@ -154,8 +154,8 @@
   "profile-button.settings": "Paramètres",
   "profile-button.thirdPartyNotices": "Avis de tiers",
   "profile-button.viewTheme": "Couleurs de thème d’affichage",
-  "programatic-usage.authenticationType": "Type d'authentification ",
-  "programatic-usage.credentials": "Informations d'identification",
+  "programmatic-usage.authenticationType": "Type d'authentification ",
+  "programmatic-usage.credentials": "Informations d'identification",
   "rerun-task-form.action": "Réexécuter",
   "rerun-task-form.title": "Réexécuter la tâche",
   "resource-permission-button.none": "Aucun(e)",

diff --git a/i18n/resources.it.json b/i18n/resources.it.json
@@ -120,10 +120,10 @@
   "profile-button.settings": "Impostazioni",
   "profile-button.viewLogs": "Visualizza i log",
   "profile-button.viewTheme": "Mostra colori del tema",
-  "programatic-usage.authenticationType": "Tipo di autenticazione",
-  "programatic-usage.credentials": "Credenziali",
-  "programatic-usage.setup": "setup",
-  "programatic-usage.title": "Credenziali ed esempi di codice per questo account batch",
+  "programmatic-usage.authenticationType": "Tipo di autenticazione",
+  "programmatic-usage.credentials": "Credenziali",
+  "programmatic-usage.setup": "setup",
+  "programmatic-usage.title": "Credenziali ed esempi di codice per questo account batch",
   "rerun-task-form.action": "Riesegui",
   "rerun-task-form.subtitle": "Questo eliminerà il task e ne creerà uno nuovo con lo stesso id.",
   "rerun-task-form.title": "Riesegui attività",

diff --git a/i18n/resources.ja.json b/i18n/resources.ja.json
@@ -216,10 +216,10 @@
   "profile-button.thirdPartyNotices": "サードパーティ通知",
   "profile-button.viewLogs": "ログの表示",
   "profile-button.viewTheme": "テーマカラーの表示",
-  "programatic-usage.authenticationType": "認証の種類",
-  "programatic-usage.credentials": "資格情報",
-  "programatic-usage.setup": "セットアップ",
-  "programatic-usage.title": "資格情報とこのバッチ アカウントのコード サンプル",
+  "programmatic-usage.authenticationType": "認証の種類",
+  "programmatic-usage.credentials": "資格情報",
+  "programmatic-usage.setup": "セットアップ",
+  "programmatic-usage.title": "資格情報とこのバッチ アカウントのコード サンプル",
   "rerun-task-form.action": "再実行",
   "rerun-task-form.subtitle": "タスクを削除し、同じ id で新しいタスクを作成します。",
   "rerun-task-form.title": "タスクの再実行",

diff --git a/i18n/resources.ko.json b/i18n/resources.ko.json
@@ -207,10 +207,10 @@
   "profile-button.thirdPartyNotices": "제 3자 통지",
   "profile-button.viewLogs": "로그 보기",
   "profile-button.viewTheme": "테마 색상 보기",
-  "programatic-usage.authenticationType": "인증 유형",
-  "programatic-usage.credentials": "자격 증명",
-  "programatic-usage.setup": "설치",
-  "programatic-usage.title": "이 배치 계정의 자격증명 및 코드샘플",
+  "programmatic-usage.authenticationType": "인증 유형",
+  "programmatic-usage.credentials": "자격 증명",
+  "programmatic-usage.setup": "설치",
+  "programmatic-usage.title": "이 배치 계정의 자격증명 및 코드샘플",
   "rerun-task-form.action": "재실행",
   "rerun-task-form.subtitle": "이렇게 하면 작업이 삭제되고 동일한 ID로 새 작업이 생성됩니다.",
   "rerun-task-form.title": "작업 재실행",

diff --git a/i18n/resources.pt-BR.json b/i18n/resources.pt-BR.json
@@ -216,10 +216,10 @@
   "profile-button.thirdPartyNotices": "Anúncios de terceiros",
   "profile-button.viewLogs": "Exibição de Logs",
   "profile-button.viewTheme": "Exibição de cores de tema",
-  "programatic-usage.authenticationType": "Tipo de autenticação",
-  "programatic-usage.credentials": "Credenciais",
-  "programatic-usage.setup": "Configuração",
-  "programatic-usage.title": "Credenciais e exemplos de código para esta conta de lote",
+  "programmatic-usage.authenticationType": "Tipo de autenticação",
+  "programmatic-usage.credentials": "Credenciais",
+  "programmatic-usage.setup": "Configuração",
+  "programmatic-usage.title": "Credenciais e exemplos de código para esta conta de lote",
   "rerun-task-form.action": "Reexecutar",
   "rerun-task-form.subtitle": "Isto irá excluir a tarefa e criar uma nova com o mesmo id.",
   "rerun-task-form.title": "Reexecutar tarefa",

diff --git a/i18n/resources.pt.json b/i18n/resources.pt.json
@@ -86,9 +86,9 @@
   "profile-button.settings": "Definições",
   "profile-button.thirdPartyNotices": "Avisos de terceiros",
   "profile-button.viewLogs": "Ver Registos",
-  "programatic-usage.authenticationType": "Tipo de autenticação",
-  "programatic-usage.credentials": "Credenciais",
-  "programatic-usage.setup": "Configuração",
+  "programmatic-usage.authenticationType": "Tipo de autenticação",
+  "programmatic-usage.credentials": "Credenciais",
+  "programmatic-usage.setup": "Configuração",
   "rerun-task-form.action": "Voltar a executar",
   "resource-permission-button.none": "Nenhum",
   "resource-permission-button.removeAccess": "Remover acesso",

diff --git a/i18n/resources.ru.json b/i18n/resources.ru.json
@@ -69,8 +69,8 @@
   "pool-picker.reset": "Сброс",
   "profile-button.profile": "Профиль",
   "profile-button.settings": "Параметры",
-  "programatic-usage.authenticationType": "Тип проверки подлинности",
-  "programatic-usage.credentials": "Учетные данные",
+  "programmatic-usage.authenticationType": "Тип проверки подлинности",
+  "programmatic-usage.credentials": "Учетные данные",
   "resource-permission-button.none": "NONE",
   "resource-permission-button.permission": "Разрешение",
   "settings.general": "Общее",

diff --git a/i18n/resources.zh-Hans.json b/i18n/resources.zh-Hans.json
@@ -216,10 +216,10 @@
   "profile-button.thirdPartyNotices": "第三方通知",
   "profile-button.viewLogs": "查看日志",
   "profile-button.viewTheme": "查看主题颜色",
-  "programatic-usage.authenticationType": "身份验证类型",
-  "programatic-usage.credentials": "凭据",
-  "programatic-usage.setup": "设置",
-  "programatic-usage.title": "这批帐户的凭据和代码示例",
+  "programmatic-usage.authenticationType": "身份验证类型",
+  "programmatic-usage.credentials": "凭据",
+  "programmatic-usage.setup": "设置",
+  "programmatic-usage.title": "这批帐户的凭据和代码示例",
   "rerun-task-form.action": "重新运行",
   "rerun-task-form.subtitle": "这将删除该任务并创建一个具有相同ID的新任务。",
   "rerun-task-form.title": "重新运行任务",

diff --git a/i18n/resources.zh-Hant.json b/i18n/resources.zh-Hant.json
@@ -63,8 +63,8 @@
   "profile-button.report": "回報 bug 或功能請求",
   "profile-button.settings": "設定",
   "profile-button.viewLogs": "查看日誌",
-  "programatic-usage.authenticationType": "驗證類型",
-  "programatic-usage.credentials": "認證",
+  "programmatic-usage.authenticationType": "驗證類型",
+  "programmatic-usage.credentials": "認證",
   "resource-permission-button.giveRole": "給 {role} 角色",
   "resource-permission-button.none": "無",
   "resource-permission-button.permission": "使用權限",
@@ -88,4 +88,4 @@
   "task-resource-files.fileMode": "檔案模式",
   "user-account-picker.password": "密碼",
   "user-account-picker.username": "使用者名稱"
-}
+}
diff --git a/...batch-flask/ui/activity/activity-monitor-footer/activity-monitor-footer.component.spec.ts b/...batch-flask/ui/activity/activity-monitor-footer/activity-monitor-footer.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync, inject, tick } from "@angular/cor
 import { By } from "@angular/platform-browser";
 import { Router } from "@angular/router";
 import { MaterialModule } from "@batch-flask/core";
+import { I18nTestingModule } from "@batch-flask/core/testing";
 import {
     Activity,
     ActivityModule,
@@ -22,7 +23,7 @@ describe("ActivityMonitorFooterComponent", () => {
         };
 
         TestBed.configureTestingModule({
-            imports: [MaterialModule, ActivityModule],
+            imports: [MaterialModule, ActivityModule, I18nTestingModule],
             declarations: [
             ],
             providers: [

diff --git a/src/@batch-flask/ui/buttons/button.scss b/src/@batch-flask/ui/buttons/button.scss
@@ -125,9 +125,9 @@ bl-button {
 
         &[color="light"] {
             color: $button-basic-text-color;
-            background: $button-basic-bg-color;
+            background: transparent;
 
-            &:hover, &:focus {
+            &:hover {
                 background: $button-basic-hover-bg-color;
             }
         }

diff --git a/src/@batch-flask/ui/dropdown/dropdown.component.spec.ts b/src/@batch-flask/ui/dropdown/dropdown.component.spec.ts
@@ -0,0 +1,48 @@
+import { Component, Type } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { I18nTestingModule } from "@batch-flask/core/testing";
+import { ButtonsModule } from "../buttons";
+import { DropdownComponent } from "./dropdown.component";
+
+describe("DropdownComponent", () => {
+    let fixture: ComponentFixture<Component>;
+
+    function createComponent(comp: Type<Component>) {
+        TestBed.configureTestingModule({
+            imports: [FormsModule, ButtonsModule, I18nTestingModule],
+            declarations: [DropdownComponent, comp],
+        });
+        fixture = TestBed.createComponent(comp);
+        fixture.detectChanges();
+    }
+
+    function $(selector) {
+        return fixture.debugElement.query(By.css("bl-dropdown"))
+            .nativeElement.querySelector(selector);
+    }
+
+    it("uses a default title", () => {
+        createComponent(TestComponent);
+
+        expect($(".dropdown-btn-container").getAttribute("title"))
+            .toEqual("dropdown.button-title");
+    });
+    it("uses a host button title", () => {
+        createComponent(TestComponentWithButton);
+
+        expect($(".dropdown-btn-container").getAttribute("title"))
+            .toEqual("Host title");
+    });
+});
+
+@Component({ template: `<bl-dropdown [title]="title"></bl-dropdown>` })
+class TestComponent { }
+
+@Component({
+    template: `<bl-dropdown [title]="title">
+        <div bl-dropdown-btn button-title="Host title">Button</div>
+    </bl-dropdown>`
+})
+class TestComponentWithButton { }
diff --git a/src/@batch-flask/ui/dropdown/dropdown.component.ts b/src/@batch-flask/ui/dropdown/dropdown.component.ts
@@ -1,6 +1,7 @@
 import {
-    ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output,
+    ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output,
 } from "@angular/core";
+import { I18nService } from "@batch-flask/core";
 
 import "./dropdown.scss";
 
@@ -18,7 +19,11 @@ export class DropdownComponent {
     public forcedOpen = false;
     public showDropdown = false;
 
-    constructor(private changeDetector: ChangeDetectorRef) { }
+    constructor(
+        private changeDetector: ChangeDetectorRef,
+        private elementRef: ElementRef,
+        private i18n: I18nService,
+    ) { }
 
     public mouseEnter() {
         this.showDropdown = true;
@@ -51,6 +56,12 @@ export class DropdownComponent {
         }
     }
 
+    public dropdownButtonTitle() {
+        const hostTitle = this.elementRef.nativeElement
+            .querySelector("[bl-dropdown-btn")?.getAttribute("button-title");
+        return hostTitle || this.i18n.t("dropdown.button-title");
+    }
+
     public close() {
         this.showDropdown = false;
         this.changeDetector.markForCheck();

diff --git a/src/@batch-flask/ui/dropdown/dropdown.html b/src/@batch-flask/ui/dropdown/dropdown.html
@@ -1,5 +1,11 @@
 <div class="dropdown" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-    <bl-clickable class="dropdown-btn-container" [class.active]="showDropdown" (do)="toggleForceOpen($event)" (dblclick)="dblClick.emit($event)">
+    <bl-clickable
+        class="dropdown-btn-container"
+        [class.active]="showDropdown"
+        (do)="toggleForceOpen($event)"
+        (dblclick)="dblClick.emit($event)"
+        [title]="dropdownButtonTitle()"
+    >
         <ng-content select="[bl-dropdown-btn]"></ng-content>
     </bl-clickable>
     <div class="dropdown-content" *ngIf="showDropdown" [class.above]="footer" [class.below]="!footer" [attr.align]="align">

diff --git a/src/@batch-flask/ui/dropdown/dropdown.i18n.yml b/src/@batch-flask/ui/dropdown/dropdown.i18n.yml
@@ -0,0 +1,2 @@
+dropdown:
+  button-title: Dropdown button
diff --git a/src/@batch-flask/ui/dropdown/dropdown.module.ts b/src/@batch-flask/ui/dropdown/dropdown.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { MaterialModule } from "@batch-flask/core";
 import { ButtonsModule } from "@batch-flask/ui/buttons";
+import { I18nUIModule } from "@batch-flask/ui/i18n";
 import { ScrollableModule } from "../scrollable";
 import { DropdownComponent } from "./dropdown.component";
 
@@ -19,6 +20,7 @@ import { DropdownComponent } from "./dropdown.component";
         MaterialModule,
         ScrollableModule,
         ButtonsModule,
+        I18nUIModule
     ],
 })
 export class DropdownModule {

diff --git a/src/@batch-flask/ui/form/complex-form/footer/form-footer.scss b/src/@batch-flask/ui/form/complex-form/footer/form-footer.scss
@@ -12,6 +12,9 @@ bl-form-footer {
     > .toggle-error-btn {
         button {
             font-size: 26px;
+            mat-icon {
+                color: $danger-color;
+            }
         }
     }
 

diff --git a/src/@batch-flask/ui/form/form-field/form-field.html b/src/@batch-flask/ui/form/form-field/form-field.html
@@ -5,7 +5,7 @@
         [attr.for]="control.id"
         [attr.aria-owns]="control.id">
         {{control.placeholder}}
-        <sup *ngIf="control.required">
+        <sup class="required" *ngIf="control.required">
             <i class="fa fa-asterisk" aria-hidden="true"></i>
         </sup>
     </label>

diff --git a/src/@batch-flask/ui/form/form-field/form-field.scss b/src/@batch-flask/ui/form/form-field/form-field.scss
@@ -5,6 +5,13 @@ bl-form-field {
     .label-container {
         display: block;
         color: $primary-text;
+        sup.required {
+            line-height: 1em;
+            .fa-asterisk {
+                color: var(--color-danger);
+                font-size: 8px;
+            }
+        }
     }
 
     .input-container {
@@ -28,11 +35,6 @@ bl-form-field {
         // Having this opacity make contrast ratio too loos
         // opacity: 0.5;
     }
-
-    .fa-asterisk {
-        color: var(--color-danger);
-        font-size: 8px;
-    }
 }
 
 bl-form-field {