From a74aaa388ef74c0a8a05c515fff721695850f461 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 21 Nov 2019 11:21:45 -0700 Subject: [PATCH] SHIBUI-1498 Fixed issues with a11y --- .../resources/i18n/messages_en.properties | 8 ++--- .../wizards/metadata-source-base.spec.ts | 3 +- .../container/copy-resolver.component.html | 2 +- .../widget/datalist/datalist.component.html | 29 ++++++++--------- .../widget/datalist/datalist.component.ts | 8 +++++ .../widget/number/float.component.html | 30 ++++++++--------- .../widget/number/float.component.ts | 8 +++++ .../widget/number/number.component.html | 30 ++++++++--------- .../widget/number/number.component.ts | 8 +++++ .../widget/select/select.component.html | 32 +++++++++---------- .../widget/select/select.component.ts | 8 +++++ .../widget/string/string.component.html | 29 ++++++++--------- .../widget/string/string.component.ts | 8 +++++ .../autocomplete/autocomplete.component.html | 1 - .../autocomplete/autocomplete.component.scss | 1 + .../autocomplete.component.spec.ts | 1 + 16 files changed, 120 insertions(+), 86 deletions(-) diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties index cd1d036ef..a74377b64 100644 --- 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 index 0e4c84e6c..c013dcd18 100644 --- 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 index a3cd9e95d..6ea4fce81 100644 --- 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 @@

- - - , - error - - - - {{ schema.widget.help }} + + + {{ schema.widget.help }} + + + + , + error + + diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts index ce3244e6f..728af8f3f 100644 --- 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 index 7ba661eb1..9f3ccf68d 100644 --- 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'"> - - - , - error - - - - {{ schema.widget.help }} + + + {{ schema.widget.help }} + + + + , + error + + diff --git a/ui/src/app/schema-form/widget/number/float.component.ts b/ui/src/app/schema-form/widget/number/float.component.ts index f78495b64..9df6f72bb 100644 --- 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 index 976150817..0a2f48d6e 100644 --- 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'"> - - - , - error - - - - {{ schema.widget.help }} + + + {{ schema.widget.help }} + + + + , + error + + diff --git a/ui/src/app/schema-form/widget/number/number.component.ts b/ui/src/app/schema-form/widget/number/number.component.ts index 6a1675373..e6885edeb 100644 --- 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 index 47ef81b2d..f2f1d5a43 100644 --- 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"> - - - , - error - - - - {{ schema.widget.help }} + + + {{ schema.widget.help }} + + + + , + error + + + diff --git a/ui/src/app/schema-form/widget/select/select.component.ts b/ui/src/app/schema-form/widget/select/select.component.ts index 0d52b0835..a596d740e 100644 --- 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 index 9c629f873..e4f9e76c2 100644 --- 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'"> - - - , - error - - - - {{ schema.widget.help }} + + + {{ schema.widget.help }} + + + + , + error + + diff --git a/ui/src/app/schema-form/widget/string/string.component.ts b/ui/src/app/schema-form/widget/string/string.component.ts index 22cdf8d4f..d4a3c7ee1 100644 --- 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 index 7a6f0fd24..735b3bc48 100644 --- 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 index 262779eab..2bd2273d3 100644 --- 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 index 05ead3f49..c7fe5fc32 100644 --- 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)