SHIBUI-1498 Fixed issues with a11y

TIER · Nov 21, 2019 · a74aaa3 · a74aaa3
1 parent 74b9046
commit a74aaa3
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 86 deletions.
diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
@@ -196,8 +196,8 @@ label.service-provider-status=Metadata Source Status:
 label.current-metadata-sources=Current Metadata Sources
 label.current-metadata-providers=Current Metadata Providers
 label.add-a-new-metadata-provider=Add a new metadata provider
-label.service-resolver-name-dashboard-display-only=Service Resolver Name (Dashboard Display Only)
-label.service-resolver-entity-id=Service Resolver Entity ID
+label.service-resolver-name-dashboard-display-only=Service Provider Name (Dashboard Display Only)
+label.service-resolver-entity-id=Service Provider Entity ID
 label.add-a-new-metadata-source=Add a new metadata source - Finish Summary
 label.name-and-entityid=Name and Entity ID.
 label.finish-summary-validation=Finished!
@@ -211,7 +211,7 @@ label.upload-url=Upload/URL
 label.or=or
 label.name-and-upload-url=Name and Upload Url
 label.service-resolver-file=Select Resolver Metadata File
-label.service-resolver-metadata-url=Service Resolver Metadata URL
+label.service-resolver-metadata-url=Service Provider Metadata URL
 label.search-criteria-by=Search Criteria by { displayType }
 label.entity-ids-added=Entity Ids Added
 label.ui-mdui-info=User Interface / MDUI Information
@@ -429,7 +429,7 @@ message.unsaved-editor=You have not saved your changes. If you exit this screen,
 message.editor-invalid=All forms must be valid before changes can be saved!
 message.unsaved-source-1=You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the \u0027Edit\u0027
 message.unsaved-source-2=icon on the dashboard.
-message.service-resolver-name-required=Service Resolver Name is required
+message.service-resolver-name-required=Service Provider Name is required
 message.entity-id-required=Entity ID is required
 message.entity-id-must-be-unique=Entity ID must be unique
 message.file-upload-alert=Note: You can only import a file with a single entityID (EntityDescriptor element) in it. Anything more in that file will result in an error.

diff --git a/ui/src/app/metadata/domain/model/wizards/metadata-source-base.spec.ts b/ui/src/app/metadata/domain/model/wizards/metadata-source-base.spec.ts
@@ -41,7 +41,8 @@ describe('Metadata Source Base class', () => {
             expect(Object.keys(getValidators([]))).toEqual([
                 '/',
                 '/entityId',
-                '/relyingPartyOverrides'
+                '/relyingPartyOverrides',
+                '/serviceProviderSsoDescriptor'
             ]);
         });
 

diff --git a/ui/src/app/metadata/resolver/container/copy-resolver.component.html b/ui/src/app/metadata/resolver/container/copy-resolver.component.html
@@ -31,7 +31,7 @@ <h3 class="tag tag-primary">
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <auto-complete
-                        id="target"
+                        id="target-parent"
                         fieldId="target"
                         formControlName="target"
                         [matches]="searchResults$ | async"

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -26,20 +26,19 @@
         [attr.aria-describedby]="formProperty._canonicalPath + '-help'"
         (onChange)="getData($event)">
     </auto-complete>
-    <small class="form-text text-danger"
-        [id]="formProperty._canonicalPath + '-help'"
-        [ngClass]="{'sr-only': !control.touched}"
-        *ngIf="errorMessages && errorMessages.length">
-        <ng-container *ngFor="let error of errorMessages; let first=first;">
-            <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="getError(error)">error</translate-i18n>
-        </ng-container>
-    </small>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-secondary"
-        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
-        [translate]="schema.widget.help">
-        {{ schema.widget.help }}
+    <small [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{
+            'text-danger': !showHint && showError,
+            'text-secondary': !showError
+        }" class="form-text text-secondary">
+        <span *ngIf="showHint" [translate]="schema.widget.help">
+            {{ schema.widget.help }}
+        </span>
+        <span *ngIf="showError" [ngClass]="{'sr-only': !control.touched}">
+            <ng-container *ngFor="let error of errorMessages; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="getError(error)">error</translate-i18n>
+            </ng-container>
+        </span>
     </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
@@ -42,4 +42,12 @@ export class DatalistComponent extends ControlWidget implements AfterViewInit {
     getError(error: string): string {
         return HARD_CODED_REQUIRED_MSG.test(error) ? 'message.required' : error;
     }
+
+    get showHint(): boolean {
+        return (this.control.touched ? !this.showError : true) && this.schema.widget.help;
+    }
+
+    get showError(): boolean {
+        return !!this.errorMessages && this.errorMessages.length > 0;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/number/float.component.html b/ui/src/app/schema-form/widget/number/float.component.html
@@ -25,21 +25,19 @@
         [attr.required]="schema.isRequired || null"
         [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
         [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-danger"
-        [ngClass]="{'sr-only': !control.touched}"
-        *ngIf="errorMessages && errorMessages.length">
-        <ng-container *ngFor="let error of errorMessages; let first=first;">
-            <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="getError(error)">error</translate-i18n>
-        </ng-container>
-    </small>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-secondary"
-        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
-        [translate]="schema.widget.help">
-        {{ schema.widget.help }}
+    <small [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{
+            'text-danger': !showHint && showError,
+            'text-secondary': !showError
+        }" class="form-text text-secondary">
+        <span *ngIf="showHint" [translate]="schema.widget.help">
+            {{ schema.widget.help }}
+        </span>
+        <span *ngIf="showError" [ngClass]="{'sr-only': !control.touched}">
+            <ng-container *ngFor="let error of errorMessages; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="getError(error)">error</translate-i18n>
+            </ng-container>
+        </span>
     </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/number/float.component.ts b/ui/src/app/schema-form/widget/number/float.component.ts
@@ -70,4 +70,12 @@ export class CustomFloatComponent extends IntegerWidget implements AfterViewInit
     getError(error: string): string {
         return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
     }
+
+    get showHint(): boolean {
+        return (this.control.touched ? !this.showError : true) && this.schema.widget.help;
+    }
+
+    get showError(): boolean {
+        return !!this.errorMessages && this.errorMessages.length > 0;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -25,21 +25,19 @@
         [attr.required]="schema.isRequired || null"
         [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
         [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-danger"
-        [ngClass]="{'sr-only': !control.touched}"
-        *ngIf="errorMessages && errorMessages.length">
-        <ng-container *ngFor="let error of errorMessages; let first=first;">
-            <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="getError(error)">error</translate-i18n>
-        </ng-container>
-    </small>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-secondary"
-        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
-        [translate]="schema.widget.help">
-        {{ schema.widget.help }}
+    <small [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{
+            'text-danger': !showHint && showError,
+            'text-secondary': !showError
+        }" class="form-text text-secondary">
+        <span *ngIf="showHint" [translate]="schema.widget.help">
+            {{ schema.widget.help }}
+        </span>
+        <span *ngIf="showError" [ngClass]="{'sr-only': !control.touched}">
+            <ng-container *ngFor="let error of errorMessages; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="getError(error)">error</translate-i18n>
+            </ng-container>
+        </span>
     </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/number/number.component.ts b/ui/src/app/schema-form/widget/number/number.component.ts
@@ -23,4 +23,12 @@ export class CustomIntegerComponent extends IntegerWidget {
     getError(error: string): string {
         return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
     }
+
+    get showHint(): boolean {
+        return (this.control.touched ? !this.showError : true) && this.schema.widget.help;
+    }
+
+    get showError(): boolean {
+        return !!this.errorMessages && this.errorMessages.length > 0;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -21,7 +21,6 @@
         [attr.name]="name"
         class="form-control"
         [attr.aria-label]="schema.title"
-        [ngClass]="{'text-muted': !this.formProperty.value}"
         [attr.required]="schema.isRequired || null"
         [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
         [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
@@ -48,21 +47,20 @@
         class="form-control">
         <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        [ngClass]="{'sr-only': !control.touched}"
-        class="form-text text-danger"
-        *ngIf="errorMessages && errorMessages.length">
-        <ng-container *ngFor="let error of errorMessages; let first=first;">
-            <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="getError(error)">error</translate-i18n>
-        </ng-container>
-    </small>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-secondary"
-        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
-        [translate]="schema.widget.help">
-        {{ schema.widget.help }}
+    <small [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{
+            'text-danger': !showHint && showError,
+            'text-secondary': !showError
+        }" class="form-text text-secondary">
+        <span *ngIf="showHint" [translate]="schema.widget.help">
+            {{ schema.widget.help }}
+        </span>
+        <span *ngIf="showError" [ngClass]="{'sr-only': !control.touched}">
+            <ng-container *ngFor="let error of errorMessages; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="getError(error)">error</translate-i18n>
+            </ng-container>
+        </span>
     </small>
+
 </div>
diff --git a/ui/src/app/schema-form/widget/select/select.component.ts b/ui/src/app/schema-form/widget/select/select.component.ts
@@ -65,4 +65,12 @@ export class CustomSelectComponent extends SelectWidget implements AfterViewInit
     get cleanId(): string {
         return this.formProperty._canonicalPath.replace('@', '');
     }
+
+    get showHint(): boolean {
+        return (this.control.touched ? !this.showError : true) && this.schema.widget.help;
+    }
+
+    get showError(): boolean {
+        return !!this.errorMessages && this.errorMessages.length > 0;
+    }
 }
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -26,20 +26,19 @@
         [attr.aria-invalid]="errorMessages && errorMessages.length > 0"
         [attr.aria-describedby]="formProperty._canonicalPath + '-help'">
     <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [id]="formProperty._canonicalPath" [attr.name]="name" type="hidden" [formControl]="control">
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        [ngClass]="{'sr-only': !control.touched}"
-        class="form-text text-danger" *ngIf="errorMessages && errorMessages.length">
-        <ng-container *ngFor="let error of errorMessages; let first=first;">
-            <ng-container *ngIf="!first">, </ng-container>
-            <translate-i18n [key]="getError(error)">error</translate-i18n>
-        </ng-container>
-    </small>
-    <small
-        [id]="formProperty._canonicalPath + '-help'"
-        class="form-text text-secondary"
-        *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help"
-        [translate]="schema.widget.help">
-        {{ schema.widget.help }}
+    <small [id]="formProperty._canonicalPath + '-help'"
+        [ngClass]="{
+            'text-danger': !showHint && showError,
+            'text-secondary': !showError
+        }" class="form-text text-secondary">
+        <span *ngIf="showHint" [translate]="schema.widget.help">
+            {{ schema.widget.help }}
+        </span>
+        <span *ngIf="showError" [ngClass]="{'sr-only': !control.touched}">
+            <ng-container *ngFor="let error of errorMessages; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="getError(error)">error</translate-i18n>
+            </ng-container>
+        </span>
     </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/string/string.component.ts b/ui/src/app/schema-form/widget/string/string.component.ts
@@ -50,4 +50,12 @@ export class CustomStringComponent extends StringWidget implements AfterViewInit
     getError(error: string): string {
         return HARD_CODED_REQUIRED_MSG.test(error) ? REQUIRED_MSG_OVERRIDE : error;
     }
+
+    get showHint(): boolean {
+        return (this.control.touched ? !this.showError : true) && this.schema.widget.help;
+    }
+
+    get showError(): boolean {
+        return !!this.errorMessages && this.errorMessages.length > 0;
+    }
 }
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -11,7 +11,6 @@
         [placeholder]="placeholder"
         [attr.aria-activedescendant]="activeDescendant"
         aria-autocomplete="both"
-        aria-multiline="false"
         [attr.aria-owns]="fieldId + '__listbox'"
         [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'"
         (focus)="handleInputFocus()"

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss
@@ -13,6 +13,7 @@
 
 :host {
     position: relative;
+    display: block;
 
     .btn-outline-secondary {
         border-color: $input-border-color;

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts b/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts
@@ -20,6 +20,7 @@ const regularAgent = `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3)
         <div [formGroup]="group">
             <auto-complete
                 [id]="config.id"
+                [fieldId]="config.id"
                 [autoSelect]="config.autoSelect"
                 [matches]="config.options"
                 formControlName="search"