From 7b85342fb24f2c38942506db00970753678d9e07 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Wed, 3 Oct 2018 11:12:26 -0700 Subject: [PATCH 1/4] 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/4] 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/4] 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" From 4763697e38002ae8f50031e6a372a0c0b8493e2c Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Fri, 12 Oct 2018 09:53:37 -0700 Subject: [PATCH 4/4] SHIBUI-354 Removed old files --- .../directive/info-label.directive.spec.ts | 60 ------------------- .../shared/directive/info-label.directive.ts | 25 -------- ui/src/app/shared/shared.module.ts | 3 - 3 files changed, 88 deletions(-) delete mode 100644 ui/src/app/shared/directive/info-label.directive.spec.ts delete mode 100644 ui/src/app/shared/directive/info-label.directive.ts diff --git a/ui/src/app/shared/directive/info-label.directive.spec.ts b/ui/src/app/shared/directive/info-label.directive.spec.ts deleted file mode 100644 index e1e6d5b59..000000000 --- a/ui/src/app/shared/directive/info-label.directive.spec.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Component, DebugElement, ElementRef } from '@angular/core'; -import { By } from '@angular/platform-browser'; -import { TestBed, ComponentFixture } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { NgbPopover, NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap'; - -import { InfoLabelDirective } from './info-label.directive'; -import * as utility from '../../../testing/utility'; - - -@Component({ - template: `` -}) -class TestComponent { - tooltipName = 'Foobar!'; -} - -describe('Info Label Directive', () => { - let component: TestComponent; - let fixture: ComponentFixture; - let element: DebugElement; - let config: NgbPopover; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [NgbPopover, NgbPopoverConfig], - imports: [ - NgbPopoverModule - ], - declarations: [ - InfoLabelDirective, - TestComponent - ], - }); - - fixture = TestBed.createComponent(TestComponent); - element = fixture.debugElement.query(By.css('i.info-icon')); - config = element.injector.get(NgbPopover); - fixture.detectChanges(); - }); - - describe('functions', () => { - it('should compile', () => { - expect(element).toBeDefined(); - }); - it('should call the config open method when spacebar is pressed', () => { - spyOn(config, 'open'); - utility.dispatchKeyboardEvent(element.nativeElement, 'keydown', 'space'); - fixture.detectChanges(); - expect(config.open).toHaveBeenCalled(); - }); - it('should call the config close method when spacebar is released', () => { - spyOn(config, 'close'); - utility.dispatchKeyboardEvent(element.nativeElement, 'keyup', 'space'); - fixture.detectChanges(); - expect(config.close).toHaveBeenCalled(); - }); - }); -}); diff --git a/ui/src/app/shared/directive/info-label.directive.ts b/ui/src/app/shared/directive/info-label.directive.ts deleted file mode 100644 index 893bd139d..000000000 --- a/ui/src/app/shared/directive/info-label.directive.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Directive, ElementRef, Input, HostListener } from '@angular/core'; -import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'; - -/* tslint:disable:directive-selector */ -@Directive({ - selector: '.info-icon', - 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); - } -} diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts index 20792a8aa..e033083a0 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -6,7 +6,6 @@ import { AutoCompleteComponent } from './autocomplete/autocomplete.component'; import { ValidationClassDirective } from './validation/validation-class.directive'; import { InputDefaultsDirective } from './directive/input-defaults.directive'; import { ValidFormIconComponent } from './component/valid-form-icon.component'; -import { InfoLabelDirective } from './directive/info-label.directive'; import { PrettyXml } from './pipe/pretty-xml.pipe'; import { ToggleSwitchComponent } from './switch/switch.component'; import { ContenteditableDirective } from './contenteditable/contenteditable.directive'; @@ -31,7 +30,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; ValidationClassDirective, InputDefaultsDirective, ValidFormIconComponent, - InfoLabelDirective, PrettyXml, ReplacePipe, CustomDatePipe, @@ -48,7 +46,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; InputDefaultsDirective, ValidFormIconComponent, ValidationClassDirective, - InfoLabelDirective, ContenteditableDirective, ReplacePipe, CustomDatePipe,