[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 <suneet.gupta@hyland.com>

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">
 

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();
+        }
     }
 }

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">
     <span class="adf-search-filter-placeholder">

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();
+        }
     }
 }