From 7b85342fb24f2c38942506db00970753678d9e07 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Wed, 3 Oct 2018 11:12:26 -0700 Subject: [PATCH 1/3] SHIBUI-354 Attempt to fix a11y of popovers --- .../shared/component/info-icon.component.html | 10 ++++++++-- .../app/shared/component/info-icon.component.ts | 17 ++++++++++++++++- .../shared/directive/info-label.directive.ts | 11 +---------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html index 58c70b2db..2babfedd5 100644 --- a/ui/src/app/shared/component/info-icon.component.html +++ b/ui/src/app/shared/component/info-icon.component.html @@ -1,12 +1,18 @@ - {{ description }} + {{ description }} \ No newline at end of file diff --git a/ui/src/app/shared/component/info-icon.component.ts b/ui/src/app/shared/component/info-icon.component.ts index d5a7fb207..fe9787c79 100644 --- a/ui/src/app/shared/component/info-icon.component.ts +++ b/ui/src/app/shared/component/info-icon.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, Renderer } from '@angular/core'; +import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'info-icon', @@ -8,4 +9,18 @@ import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from }) export class InfoIconComponent { @Input() description: string; + + id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString(); + + triggers = 'mouseenter:mouseleave'; + container = 'body'; + placement = ['top']; + + constructor( + private renderer: Renderer + ) { } + focus(element): void { + console.log(element.elementRef.nativeElement); + this.renderer.invokeElementMethod(element.elementRef.nativeElement, 'focus'); + } } diff --git a/ui/src/app/shared/directive/info-label.directive.ts b/ui/src/app/shared/directive/info-label.directive.ts index 893bd139d..c0a4e85cd 100644 --- a/ui/src/app/shared/directive/info-label.directive.ts +++ b/ui/src/app/shared/directive/info-label.directive.ts @@ -7,19 +7,10 @@ import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'; providers: [NgbPopover] }) export class InfoLabelDirective { - @HostListener('keydown.space') onSpaceDown() { - this.config.open(); - } - @HostListener('keyup.space') onSpaceUp() { - this.config.close(); - } constructor( private config: NgbPopover, private element: ElementRef ) { - config.triggers = 'mouseenter:mouseleave'; - config.placement = ['top', 'left']; - config.container = 'body'; - element.nativeElement.setAttribute('tabindex', 0); + } } From 541919b0ddaa2caaddc959259131f82e6651f920 Mon Sep 17 00:00:00 2001 From: Jodie Muramoto Date: Thu, 11 Oct 2018 13:29:42 -0700 Subject: [PATCH 2/3] a11y/SHIBUI-354: Added screen reader accessibility to info icon tooltips; --- backend/src/main/resources/i18n/messages_en.properties | 2 +- ui/src/app/shared/component/info-icon.component.html | 7 ++----- ui/src/app/shared/component/info-icon.component.ts | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties index 6d64dd72a..964ef0e77 100644 --- a/backend/src/main/resources/i18n/messages_en.properties +++ b/backend/src/main/resources/i18n/messages_en.properties @@ -400,7 +400,7 @@ tooltip.authentication-methods-to-use=Authentication Methods to Use tooltip.ignore-auth-method=Ignore any SP-Requested Authentication Method tooltip.omit-not-before-condition=Omit Not Before Condition tooltip.responder-id=ResponderId -tooltip.instruction=Information icon - press spacebar to read additional information for this form field +tooltip.instruction=Information icon tooltip.attribute-release-table=Attribute release table - select the attributes you want to release (default unchecked) tooltip.metadata-filter-name=Metadata Filter Name tooltip.metadata-filter-type=Metadata Filter Type diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html index 2babfedd5..70c09fadf 100644 --- a/ui/src/app/shared/component/info-icon.component.html +++ b/ui/src/app/shared/component/info-icon.component.html @@ -4,15 +4,12 @@ \ No newline at end of file + diff --git a/ui/src/app/shared/component/info-icon.component.ts b/ui/src/app/shared/component/info-icon.component.ts index fe9787c79..5c340b410 100644 --- a/ui/src/app/shared/component/info-icon.component.ts +++ b/ui/src/app/shared/component/info-icon.component.ts @@ -12,7 +12,7 @@ export class InfoIconComponent { id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString(); - triggers = 'mouseenter:mouseleave'; + triggers = 'mouseenter:mouseleave focus:blur'; container = 'body'; placement = ['top']; From c54b1717e2434b2fc20f04b378ccc126589cf74e Mon Sep 17 00:00:00 2001 From: Jodie Muramoto Date: Thu, 11 Oct 2018 14:02:05 -0700 Subject: [PATCH 3/3] a11y/SHIBUI-354: Removed spacebar keydown trigger (redundant); --- ui/src/app/shared/component/info-icon.component.html | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html index 70c09fadf..38dee05bd 100644 --- a/ui/src/app/shared/component/info-icon.component.html +++ b/ui/src/app/shared/component/info-icon.component.html @@ -5,7 +5,6 @@ #toggle="ngbPopover" [attr.aria-label]="'tooltip.instruction' | translate" [ngbPopover]="tooltipContent" - (keydown.space)="toggle.open()" [triggers]="triggers" [placement]="placement" [attr.aria-flowto]="id"