Merged in bugfix/SHIBUI-1015 (pull request #257)

SHIBUI-1015: Fixed issues with forms and labels (assigned ARIA labels); Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Dec 10, 2018 · 3d36ed9 · 3d36ed9
2 parents eb35a8b + ee9b889
commit 3d36ed9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/ui/src/app/metadata/manager/component/provider-search.component.html b/ui/src/app/metadata/manager/component/provider-search.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="searchForm">
-    <label for="search" class="sr-only" translate="action.search">Search</label>
     <div class="input-group input-group-sm">
+        <label [for]="search" class="sr-only" translate="action.search">Search</label>
         <input
             id="search"
             type="text"
@@ -9,6 +9,7 @@
             [placeholder]="'label.search-files' | translate"
             aria-label="To search for a source, enter name then press enter"
             formControlName="search"
+            role="textbox"
             (keyup)="search.emit($event.target.value)">
         <div class="input-group-append">
             <button class="btn btn-light"

diff --git a/ui/src/app/metadata/resolver/container/copy-resolver.component.html b/ui/src/app/metadata/resolver/container/copy-resolver.component.html
@@ -22,7 +22,7 @@ <h3 class="tag tag-primary">
             </ul>
             <fieldset class="bg-light border rounded p-4">
                 <div class="form-group">
-                    <label for="serviceProviderName">
+                    <label for="target">
                         <translate-i18n key="label.select-entity-id-to-copy">Select the Entity ID to copy</translate-i18n>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
@@ -96,7 +96,9 @@ <h3 class="tag tag-primary">
                                     [id]="'section-' + i"
                                     [name]="'section-' + i"
                                     role="checkbox" />
-                                <label class="custom-control-label" for="section-{{ i }}"></label>
+                                <label class="custom-control-label"
+                                    [for]="'section-' + i"
+                                    [attr.aria-label]="item.i18nKey"></label>
                             </div>
                         </fieldset>
                     </td>

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,5 +1,4 @@
 <div id="{{ id }}-container" class="dropdown form-group" (keydown)="handleKeyDown($event)" role='combobox' [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'">
-    <label *ngIf="!fieldId" for="{{ id }}__input" attr.aria-labelledby="{{ id }}__input" class="sr-only"></label>
     <div [ngClass]="{'input-group': dropdown}">
         <input
             #inputField