Merged in A11y/shibui-259 (pull request #44)

A11y/shibui-259: Added labels to auto-complete textboxes for accessibility requirements Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Apr 3, 2018 · de29dd8 · de29dd8
2 parents 68068aa + 7489961
commit de29dd8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 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
@@ -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
@@ -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>
+</form>
diff --git 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"