fix(core): resolves #2408 for roving-tabindex-controller (#2410)

* fix(core): resolves #2408 for roving-tabindex-controller

* fix(roving-tabindex-controller): added changeset

* Update .changeset/fresh-pumas-wave.md

Co-authored-by: Benny Powers <[email protected]>

* fix(core): fixed roving-tabindex-controller eventListener

* fix(core): this binding in roving-tabindex-controller.ts

.bind() creates a new object on each call, so we can't use it to removeEventListener.

Also makes the itemsContainer default to the host at each initItems call

---------

Co-authored-by: Benny Powers <[email protected]>

Author: nikkimk

.changeset/fresh-pumas-wave.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-core": minor
+---
+
+`roving-tabindex-controller`: enabled controller to be used by aria-expanded elements

core/pfe-core/controllers/roving-tabindex-controller.ts

@@ -15,6 +15,9 @@ export class RovingTabindexController implements ReactiveController {
   /** active focusable element */
   #activeItem?: HTMLElement;
 
+  /** closest ancestor containing items */
+  #itemsContainer?: HTMLElement;
+
   /** array of all focusable elements */
   #items: HTMLElement[] = [];
 
@@ -87,7 +90,7 @@ export class RovingTabindexController implements ReactiveController {
   /**
    * handles keyboard navigation
    */
-  #onKeydown(event: KeyboardEvent):void {
+  #onKeydown = (event: KeyboardEvent) => {
     if (event.ctrlKey || event.altKey || event.metaKey || this.#focusableItems.length < 1) {
       return;
     }
@@ -97,9 +100,9 @@ export class RovingTabindexController implements ReactiveController {
     const horizontalOnly =
         !item ? false
       : item.tagName === 'SELECT' ||
-        item.getAttribute('aria-expanded') === 'true' ||
         item.getAttribute('role') === 'spinbutton';
 
+
     switch (event.key) {
       case 'ArrowLeft':
         this.focusOnItem(this.prevItem);
@@ -153,7 +156,7 @@ export class RovingTabindexController implements ReactiveController {
       event.stopPropagation();
       event.preventDefault();
     }
-  }
+  };
 
   /**
    * sets tabindex of item based on whether or not it is active
@@ -188,17 +191,35 @@ export class RovingTabindexController implements ReactiveController {
   /**
    * from array of HTML items, and sets active items
    */
-  initItems(items: HTMLElement[]) {
+  initItems(items: HTMLElement[], itemsContainer: HTMLElement = this.host) {
     this.#items = items ?? [];
     const focusableItems = this.#focusableItems;
     const [focusableItem] = focusableItems;
     this.#activeItem = focusableItem;
     for (const item of focusableItems) {
       item.tabIndex = this.#activeItem === item ? 0 : -1;
     }
+    /**
+     * removes listener on previous contained and applies it to new container
+     */
+    if (!this.#itemsContainer || itemsContainer !== this.#itemsContainer) {
+      this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
+      this.#itemsContainer = itemsContainer;
+      this.hostConnected();
+    }
   }
 
+  /**
+   * adds event listners to items container
+   */
   hostConnected() {
-    this.host.addEventListener('keydown', this.#onKeydown.bind(this));
+    this.#itemsContainer?.addEventListener('keydown', this.#onKeydown);
+  }
+
+  /**
+   * removes event listners from items container
+   */
+  hostDisconnected() {
+    this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
   }
 }