From 275d30b043bcde02be3e9eb3507536ad497bfa56 Mon Sep 17 00:00:00 2001 From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Date: Tue, 14 Feb 2023 22:01:12 +0530 Subject: [PATCH] [ACS-4257] - Resolved a11y issue around jumping focus (#8168) * ACS-4257 - Clicking on filter buttons on search results no longer switches focus from button to first element * [ACS-4257] Added key listeners to open and close the menus to improve keyboard only usability * ACS-4257 - Clicking on filter buttons on search results no longer switches focus from button to first element * [ACS-4257] Added key listeners to open and close the menus to improve keyboard only usability --------- Co-authored-by: suneet-gupta --- .../search-facet-chip.component.html | 1 + .../search-facet-chip.component.ts | 13 +++++++++++-- .../search-widget-chip.component.html | 1 + .../search-widget-chip.component.ts | 13 +++++++++++-- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html index bed1264a8e..c55d8c0f15 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html @@ -6,6 +6,7 @@ [matMenuTriggerFor]="menu" (onMenuOpen)="onMenuOpen()" (keydown.enter)="onEnterKeydown()" + (keydown.escape)="onEscKeydown()" [attr.title]="facetField.displayValue$ | async" #menuTrigger="matMenuTrigger"> diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts index 804b7bd374..ed92fe9571 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts @@ -46,7 +46,6 @@ export class SearchFacetChipComponent { onMenuOpen() { if (this.menuContainer && !this.focusTrap) { this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement); - this.focusTrap.focusInitialElement(); } } @@ -66,6 +65,16 @@ export class SearchFacetChipComponent { } onEnterKeydown(): void { - this.menuTrigger.openMenu(); + if (!this.menuTrigger.menuOpen) { + this.menuTrigger.openMenu(); + } else { + this.menuTrigger.closeMenu(); + } + } + + onEscKeydown() { + if (this.menuTrigger.menuOpen) { + this.menuTrigger.closeMenu(); + } } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html index 05fdf16c8a..aac5798455 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html @@ -6,6 +6,7 @@ [matMenuTriggerFor]="menu" (onMenuOpen)="onMenuOpen()" (keydown.enter)="onEnterKeydown()" + (keydown.escape)="onEscKeydown()" [attr.title]="widget.getDisplayValue() | async" #menuTrigger="matMenuTrigger"> diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts index f67812c9d0..b7a779a5b3 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts @@ -47,7 +47,6 @@ export class SearchWidgetChipComponent { onMenuOpen() { if (this.menuContainer && !this.focusTrap) { this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement); - this.focusTrap.focusInitialElement(); } } @@ -67,6 +66,16 @@ export class SearchWidgetChipComponent { } onEnterKeydown(): void { - this.menuTrigger.openMenu(); + if (!this.menuTrigger.menuOpen) { + this.menuTrigger.openMenu(); + } else { + this.menuTrigger.closeMenu(); + } + } + + onEscKeydown() { + if (this.menuTrigger.menuOpen) { + this.menuTrigger.closeMenu(); + } } }