SHIBUI-784 Implemented fixes for a11y issues

TIER · Aug 28, 2018 · 80b82d5 · 80b82d5
1 parent 4a7bd22
commit 80b82d5
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 15 deletions.
diff --git a/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html
@@ -1,12 +1,12 @@
 <div class="row">
     <div class="col-xl-6 col-xs-12" *ngFor="let sections of columns">
-        <section class="px-3" *ngFor="let section of sections; let i = index;">
+        <section class="px-3" *ngFor="let section of sections; let i = index;" role="list">
             <button (click)="gotoPage(section.id)" class="tag tag-success tag-sm my-4 text-left" [attr.aria-label]="section.label" role="button">
                 <span class="index">{{ section.index }}</span>
                 <ng-container>{{ section.label }}</ng-container>
             </button>
             <ng-container *ngFor="let prop of section.properties">
-                <summary-property [property]="prop"></summary-property>
+                <summary-property [property]="prop" role="listitem"></summary-property>
             </ng-container>
         </section>
     </div>

diff --git a/ui/src/app/metadata/provider/component/summary-property.component.html b/ui/src/app/metadata/provider/component/summary-property.component.html
@@ -1,4 +1,4 @@
-<div role="listitem" class="mb-3" *ngIf="property">
+<div class="mb-3" *ngIf="property">
     <ng-container [ngSwitch]="property.type">
         <ng-container *ngSwitchDefault>
             <ng-container *ngIf="property.name">

diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
@@ -16,11 +16,12 @@
         </span>
     </div>
     <div *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex" class="mt-2">
-        <div class="row">
-            <sf-form-element class="col-sm-11" [formProperty]="itemProperty"></sf-form-element>
-            <div class="col-sm-1">
+        <div class="d-flex justify-content-between">
+            <sf-form-element class="flex-grow-1" [formProperty]="itemProperty"></sf-form-element>
+            <div class="py-2">
                 <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
                     <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
+                    <span class="sr-only">Remove</span>
                 </button>
             </div>
         </div>

diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -23,7 +23,9 @@
                                 role="checkbox"
                                 aria-checked="false"
                             />
-                            <label class="custom-control-label" for="input-{{ i }}"></label>
+                            <label class="custom-control-label" for="input-{{ i }}">
+                                <span class="sr-only">Toggle {{ attr.label }}</span>
+                            </label>
                         </div>
                     </fieldset>
                 </td>

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,6 +1,6 @@
 <div class="widget form-group">
-    <label [attr.for]="id" [id]="id" class="d-flex justify-content-between control-label">
-        <span>
+    <label [for]="id" class="d-flex justify-content-between control-label">
+        <span [ngClass]="{'sr-only': formProperty.parent.schema.type === 'array'}">
             {{ schema.title }}
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
@@ -15,6 +15,7 @@
     <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
     <auto-complete
         [id]="id"
+        [fieldId]="id"
         [formControl]="control"
         [matches]="schema.widget.data"
         [required]="true"

diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -33,7 +33,7 @@
             </div>
             <br />
             <div>
-                <label [attr.for]="id" class="d-flex justify-content-start control-label">
+                <label for="targetInput" class="d-flex justify-content-start control-label">
                     <span>
                         Search Criteria by {{ this.displayType }}
                         <i class="fa fa-asterisk text-danger"
@@ -54,7 +54,7 @@
                     <div class="w-100" [ngSwitch]="this.entityAttributesFilterTargetType">
                         <ng-container *ngSwitchDefault>
                             <auto-complete
-                                id="entityId"
+                                [fieldId]="'targetInput'"
                                 class="component-control"
                                 limit="10"
                                 [formControl]="search"
@@ -66,14 +66,14 @@
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
-                            <p class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
+                            <p id="targetInput" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
                             <small id="script-help" class="text-danger">
                                 <ng-container *ngIf="script.invalid && script.touched">Required for Scripts</ng-container>
                                 &nbsp;
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'REGEX'">
-                            <input class="form-control" type="text" [formControl]="script" name="script" />
+                            <input id="targetInput" class="form-control" type="text" [formControl]="script" name="script" />
                             <small id="regex-help" class="text-danger">
                                 <ng-container *ngIf="script.invalid && script.touched">Required for Regex</ng-container>
                                 &nbsp;

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,11 +1,11 @@
 <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>
+    <label *ngIf="!fieldId" for="{{ id }}__input" attr.aria-labelledby="{{ id }}__input" class="sr-only"></label>
     <div [ngClass]="{'input-group': dropdown}">
         <input
             #inputField
             [formControl]="input"
             [disableValidation]="true"
-            id="{{ id }}__input"
+            [id]="fieldId || (id + '__input')"
             class="form-control"
             autoComplete="off"
             type="text"
@@ -25,6 +25,7 @@
                 [attr.aria-labelledby]="id"
                 (click)="state.setState({menuOpen: !state.currentState.menuOpen})">
                 <i class="fa fa-caret-down"></i>
+                <span class="sr-only">Toggle Dropdown</span>
             </button>
         </div>
     </div>

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts
@@ -44,6 +44,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, AfterViewInit,
     @Input() defaultValue = '';
     @Input() matches: string[] = [];
     @Input() id: string;
+    @Input() fieldId: string;
     @Input() autoSelect = false;
     @Input() noneFoundText = 'No Options Found';
     @Input() limit = 0;

diff --git a/ui/src/assets/schema/filter/entity-attributes.schema.json b/ui/src/assets/schema/filter/entity-attributes.schema.json
@@ -141,6 +141,7 @@
                     "type": "array",
                     "uniqueItems": true,
                     "items": {
+                        "title": "NameID Format",
                         "type": "string",
                         "widget": {
                             "id": "datalist",
@@ -162,6 +163,7 @@
                     "uniqueItems": true,
                     "items": {
                         "type": "string",
+                        "title": "Authentication Method",
                         "widget": {
                             "id": "datalist",
                             "data": [