fix(accordion): adding rti for keyboard navigation, removed internal navigation (#2493)

* fix(accordion): adding RTI to accordion, adding headers, removing old code

* fix(accordion): adding RTI index after initialized

* fix(accordion): removing older code for rti fix

* chore: adding changeset

* Merge branch `fix/accordion-rovingtabindex-controller` into `fix/accordion-rovingtabindex-controller`

* fix(core): ensured rti arrow key listeners only apply to focusable items

* fix(core): ensured rti error key listeners only apply to focusable items

* fix(accordion): adding init items on mutation observer for RTI, removing tab tests

* fix(tabs): reverting code change made locally

* docs: update changeset

* perf: defer computing composedPath()

* test(accordion): adding test cases for rti navigation in nested, multiple accordions

* fix(accordion): activeHeader a private accessor

---------

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

Author: 3 people

.changeset/brown-shirts-think.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-core": patch
+---
+
+**roving-tabindex-controller**: fixes arrow keydown event listeners

.changeset/empty-trainers-tickle.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-accordion>`: fixed keyboard navigation inside of nested accordions

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

@@ -93,10 +93,14 @@ export class RovingTabindexController<
    * handles keyboard navigation
    */
   #onKeydown = (event: KeyboardEvent) => {
-    if (event.ctrlKey || event.altKey || event.metaKey || this.#focusableItems.length < 1) {
+    if (event.ctrlKey ||
+        event.altKey ||
+        event.metaKey ||
+        !this.#focusableItems.length ||
+        !event.composedPath().some(x =>
+          this.#focusableItems.includes(x as ItemType))) {
       return;
     }
-
     const item = this.activeItem;
     let shouldPreventDefault = false;
     const horizontalOnly =

elements/pf-accordion/BaseAccordion.ts

@@ -11,6 +11,8 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';
 import { BaseAccordionPanel } from './BaseAccordionPanel.js';
 
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+
 import style from './BaseAccordion.css';
 
 const CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;
@@ -48,6 +50,8 @@ export abstract class BaseAccordion extends LitElement {
     return target instanceof BaseAccordionPanel;
   }
 
+  #headerIndex = new RovingTabindexController<BaseAccordionHeader>(this);
+
   /**
    * Sets and reflects the currently expanded accordion 0-based indexes.
    * Use commas to separate multiple indexes.
@@ -78,6 +82,12 @@ export abstract class BaseAccordion extends LitElement {
     return this.#allPanels();
   }
 
+  get #activeHeader() {
+    const { headers } = this;
+    const index = headers.findIndex(header => header.matches(':focus,:focus-within'));
+    return headers.at(index);
+  }
+
   protected expandedSets = new Set<number>();
 
   #logger = new Logger(this);
@@ -103,7 +113,6 @@ export abstract class BaseAccordion extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('change', this.#onChange as EventListener);
-    this.addEventListener('keydown', this.#onKeydown);
     this.#mo.observe(this, { childList: true });
     this.#init();
   }
@@ -135,9 +144,18 @@ export abstract class BaseAccordion extends LitElement {
    */
   async #init() {
     this.#initialized ||= !!await this.updateComplete;
+    this.#headerIndex.initItems(this.headers);
+    // Event listener to the accordion header after the accordion has been initialized to add the roving tabindex
+    this.addEventListener('focusin', this.#updateActiveHeader as EventListener);
     this.updateAccessibility();
   }
 
+  #updateActiveHeader() {
+    if (this.#activeHeader) {
+      this.#headerIndex.updateActiveItem(this.#activeHeader);
+    }
+  }
+
   #panelForHeader(header: BaseAccordionHeader) {
     const next = header.nextElementSibling;
     if (!BaseAccordion.isPanel(next)) {