Merged in bugfix/SHIBUI-1470 (pull request #422)

SHIBUI-1470 Fixed error messages for screenreaders Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Nov 19, 2019 · 7393c1b · 7393c1b
2 parents e33ed1c + 8a4c244
commit 7393c1b
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 19 deletions.
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -65,7 +65,7 @@
                 <ul class="list-inline">
                     <li class="list-inline-item" [translate]="brand.footer.text">{{ brand.footer.text }}</li>
                     <li class="list-inline-item" *ngFor="let link of brand.footer.links; let i = index;">
-                        <a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
+                        <a [href]="link.url" target="_blank" [attr.aria-label]="link.description | translate" [title]="link.description">
                             <translate-i18n [key]="link.label">{{ link.label }}</translate-i18n>
                         </a>
                     </li>

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group">
     <label [id]="formProperty._canonicalPath + '-label'" [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span [ngClass]="{'sr-only': formProperty.parent.schema.type === 'array'}">
-            <translate-i18n [key]="title">{{ title }}</translate-i18n>
+            {{ title | translate }}&nbsp;
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
@@ -20,12 +21,25 @@
         [attr.disabled]="schema.readOnly?true:null"
         role="textbox"
         [attr.aria-label]="title | translate"
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'"
         (onChange)="getData($event)">
     </auto-complete>
-    <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
+    <small class="form-text text-danger"
+        [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{'sr-only': !control.touched}"
+        *ngIf="errorMessages && errorMessages.length">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
             <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
+        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
+        [translate]="schema.widget.help">
+        {{ schema.widget.help }}
+    </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
@@ -25,6 +25,7 @@ export class DatalistComponent extends ControlWidget implements AfterViewInit {
         } else {
             this.control.enable();
         }
+        console.log(this.formProperty);
     }
 
     getData(query: string): void {

diff --git a/ui/src/app/schema-form/widget/number/float.component.html b/ui/src/app/schema-form/widget/number/float.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+    <label [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span>
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
@@ -21,5 +22,24 @@
         [attr.max]="schema.maximum"
         [attr.placeholder]="schema.placeholder | translate"
         [attr.step]="schema.multipleOf || schema.widget.step"
-        [attr.aria-label]="schema.title">
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-danger"
+        [ngClass]="{'sr-only': !control.touched}"
+        *ngIf="errorMessages && errorMessages.length">
+        <ng-container *ngFor="let error of errorMessages; let first=first;">
+            <ng-container *ngIf="!first">, </ng-container>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
+        </ng-container>
+    </small>
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
+        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
+        [translate]="schema.widget.help">
+        {{ schema.widget.help }}
+    </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/number/float.component.ts b/ui/src/app/schema-form/widget/number/float.component.ts
@@ -3,6 +3,7 @@ import {
 } from '@angular/core';
 import { IntegerWidget } from 'ngx-schema-form';
 import { SchemaService } from '../../service/schema.service';
+import { HARD_CODED_REQUIRED_MSG, REQUIRED_MSG_OVERRIDE } from '../../model/messages';
 
 @Component({
     selector: 'float-component',
@@ -65,4 +66,8 @@ export class CustomFloatComponent extends IntegerWidget implements AfterViewInit
             this.schema.minimum :
             this.formProperty.value === null ? null : this.schema.minimum;
     }
+
+    getError(error: string): string {
+        return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+    <label [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span>
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
@@ -21,5 +22,24 @@
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.step]="schema.multipleOf || schema.widget.step"
-        [attr.aria-label]="schema.title">
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-danger"
+        [ngClass]="{'sr-only': !control.touched}"
+        *ngIf="errorMessages && errorMessages.length">
+        <ng-container *ngFor="let error of errorMessages; let first=first;">
+            <ng-container *ngIf="!first">, </ng-container>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
+        </ng-container>
+    </small>
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
+        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
+        [translate]="schema.widget.help">
+        {{ schema.widget.help }}
+    </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/number/number.component.ts b/ui/src/app/schema-form/widget/number/number.component.ts
@@ -3,6 +3,7 @@ import {
 } from '@angular/core';
 import { IntegerWidget } from 'ngx-schema-form';
 import { SchemaService } from '../../service/schema.service';
+import { HARD_CODED_REQUIRED_MSG, REQUIRED_MSG_OVERRIDE } from '../../model/messages';
 
 @Component({
     selector: 'integer-component',
@@ -18,4 +19,8 @@ export class CustomIntegerComponent extends IntegerWidget {
     get required(): boolean {
         return this.widgetService.isRequired(this.formProperty);
     }
+
+    getError(error: string): string {
+        return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group">
-    <label [attr.for]="cleanId" class="horizontal control-label">
+    <label [for]="cleanId" class="horizontal control-label">
         <span *ngIf="schema.title">
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="!schema.title" class="sr-only" [translate]="formProperty.parent.schema.title">
             {{ formProperty.parent.schema.title }}
@@ -19,7 +20,11 @@
         [formControl]="control"
         [attr.name]="name"
         class="form-control"
-        [attr.aria-label]="schema.title">
+        [attr.aria-label]="schema.title"
+        [ngClass]="{'text-muted': !this.formProperty.value}"
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
         <option selected value="">
             <translate-i18n *ngIf="schema.placeholder" [key]="schema.placeholder">{{ schema.placeholder }}</translate-i18n>
             <translate-i18n *ngIf="!schema.placeholder" [key]="schema.title">{{ schema.title }}</translate-i18n>
@@ -43,11 +48,20 @@
         class="form-control">
         <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
-    <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{'sr-only': !control.touched}"
+        class="form-text text-danger" *ngIf="errorMessages && errorMessages.length">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
             <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
-    <input *ngIf="schema.readOnly" [id]="cleanId" [attr.name]="name" type="hidden" [formControl]="control">
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
+        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
+        [translate]="schema.widget.help">
+        {{ schema.widget.help }}
+    </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group" [class.d-none]="this.getInputType() === 'hidden'">
-    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+    <label [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span>
-            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>&nbsp;
+            {{ schema.title | translate }}&nbsp;
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
@@ -21,15 +22,22 @@
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null"
-        [attr.aria-label]="schema.title">
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
     <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [id]="formProperty._canonicalPath" [attr.name]="name" type="hidden" [formControl]="control">
-    <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{'sr-only': !control.touched}"
+        class="form-text text-danger" *ngIf="errorMessages && errorMessages.length">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
             <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
-    <small class="form-text text-secondary"
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
         *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
         [translate]="schema.widget.help">
         {{ schema.widget.help }}

diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -1,8 +1,9 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+    <label [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span>
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+            <span *ngIf="required" class="sr-only required" translate="message.required">required</span>
         </span>
         <span *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
@@ -18,11 +19,24 @@
         [attr.minLength]="schema.minLength || null"
         [rows]="schema.widget.rows || 5"
         [formControl]="control"
-        [attr.aria-label]="schema.title"></textarea>
-    <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
+        [attr.required]="schema.isRequired || null"
+        [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
+        [attr.aria-describedby]="formProperty._canonicalPath + '-help'"></textarea>
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-danger"
+        [ngClass]="{'sr-only': !control.touched}"
+        *ngIf="errorMessages && errorMessages.length">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
             <translate-i18n [key]="getError(error)">error</translate-i18n>
         </ng-container>
     </small>
+    <small
+        [id]="formProperty._canonicalPath + '-help'"
+        class="form-text text-secondary"
+        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
+        [translate]="schema.widget.help">
+        {{ schema.widget.help }}
+    </small>
 </div>