From 7489961adeadb57154874ac3613833db3fb1f0aa Mon Sep 17 00:00:00 2001
From: Jodie Muramoto <jmuramoto@unicon.net>
Date: Fri, 30 Mar 2018 15:31:52 -0700
Subject: [PATCH] A11y/shibui-259: Added labels to auto-complete textboxes for
 accessibility requirements

---
 .../metadata-filter/component/filter-form.component.html    | 1 +
 .../component/forms/relying-party-form.component.html       | 6 +++---
 ui/src/app/shared/autocomplete/autocomplete.component.html  | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/metadata-filter/component/filter-form.component.html b/ui/src/app/metadata-filter/component/filter-form.component.html
index f0c6cfcfb..cbba3a989 100644
--- a/ui/src/app/metadata-filter/component/filter-form.component.html
+++ b/ui/src/app/metadata-filter/component/filter-form.component.html
@@ -47,6 +47,7 @@
                                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
+                    <label for="entityId" class="sr-only">Search Entity ID</label>
                     <auto-complete
                         id="entityId"
                         class="component-control"
diff --git a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.html b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.html
index b21a1e955..d905aafcb 100644
--- a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.html
+++ b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.html
@@ -63,7 +63,7 @@
             </div>
             <div *ngIf="nameIdFormatList.length" class="p-2">
                 <div class="row" *ngFor="let format of nameIdFormatList.controls; let i=index; let isLast=last">
-                    <label [for]="'nameIdFormat-' + i" class="col-sm-12" i18n="@@label--nameid-format-indexed">NameID Format {{ i + 1 }}</label>
+                    <label [for]="'nameIdFormat-' + i" class="sr-only" i18n="@@label--nameid-format-indexed">NameID Format {{ i + 1 }}</label>
                     <auto-complete
                         class="col-sm-11"
                         [id]="'nameIdFormat-' + i"
@@ -96,7 +96,7 @@
             </div>
             <div *ngIf="authenticationMethodList.length" class="p-2">
                 <div class="row" *ngFor="let format of authenticationMethodList.controls; let i=index; let isLast=last">
-                    <label [for]="'authMethod-' + i" class="col-sm-12" i18n="@@label--auth-method-indexed">Authentication Method {{ i + 1 }}</label>
+                    <label [for]="'authMethod-' + i" class="sr-only" i18n="@@label--auth-method-indexed">Authentication Method {{ i + 1 }}</label>
                     <auto-complete
                         class="col-sm-11"
                         [id]="'authMethod-' + i"
@@ -152,4 +152,4 @@
             <input id="responderId" class="form-control" type="text" formControlName="responderId" role="textbox">
         </div>
     </fieldset>
-</form>
\ No newline at end of file
+</form>
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
index 977f346db..cb63416e7 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.html
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,4 +1,5 @@
 <div id="{{ id }}-container" class="dropdown form-group" (keydown)="handleKeyDown($event)" role='combobox' [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'">
+    <label for="{{ id }}__input" attr.aria-labelledby="{{ id }}__input" class="sr-only"></label>
     <input
         #inputField
         [formControl]="input"