Merged in bugfix/SHIBUI-713 (pull request #161)

SHIBUI-713: Associated labels with form elements to meet accessibility guidelines; Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com> Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Aug 15, 2018 · 6445b05 · 6445b05
1 parent 0d4c976
commit 6445b05
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -20,5 +20,6 @@
         [attr.placeholder]="schema.placeholder"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
-        [attr.step]="schema.multipleOf || schema.widget.step">
-</div>
+        [attr.step]="schema.multipleOf || schema.widget.step"
+        [attr.aria-label]="schema.title">
+</div>
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -18,12 +18,13 @@
     <select *ngIf="schema.type !== 'array'"
         [formControl]="control"
         [attr.name]="name"
-        class="form-control">
+        class="form-control"
+        [attr.aria-label]="schema.title">
         <option disabled selected>{{ schema.placeholder || schema.title }}</option>
         <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
     </select>
     <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
         <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
     </select>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
-</div>
+</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
@@ -20,7 +20,8 @@
         [attr.placeholder]="schema.placeholder"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
-        [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null">
+        [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null"
+        [attr.aria-label]="schema.title">
     <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [attr.name]="name" type="hidden" [formControl]="control">
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         {{ errorMessages }}

diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -20,5 +20,6 @@
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [rows]="schema.widget.rows || 5"
-        [formControl]="control"></textarea>
-</div>
+        [formControl]="control"
+        [attr.aria-label]="schema.title"></textarea>
+</div>
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -13,6 +13,7 @@
             [attr.aria-activedescendant]="activeDescendant"
             [placeholder]="placeholder"
             attr.aria-owns="{{ id }}__listbox"
+            [attr.aria-labelledby]="id"
             (focus)="handleInputFocus()"
             (blur)="handleInputBlur()"
         />