fix(accordion): removing auto focus on expanded in the header (#2458)

* fix(accordion): removing auto focus on expanded in the header

* chore: adding changeset

* fix(accordion): adding focus attribute to expand function

* fix(accordion): reverting focus back to false for expanded

* refactor: don't add new param to public method

* docs: update changeset

---------

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

Author: brianferry

.changeset/stale-boxes-watch.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-accordion>`: prevented `expanded` accordion headers from stealing focus when the page loads.
+

elements/pf-accordion/BaseAccordion.ts

@@ -116,9 +116,15 @@ export abstract class BaseAccordion extends LitElement {
 
   async firstUpdated() {
     const { headers } = this;
-    for (const header of headers.filter(x => x.expanded)) {
-      await this.expand(headers.indexOf(header));
-    }
+    headers.forEach((header, index) => {
+      if (header.expanded) {
+        this.#expandHeader(header, index);
+        const panel = this.#panelForHeader(header);
+        if (panel) {
+          this.#expandPanel(panel);
+        }
+      }
+    });
   }
 
   /**
@@ -350,6 +356,7 @@ export abstract class BaseAccordion extends LitElement {
 
   /**
    * Accepts a 0-based index value (integer) for the set of accordion items to expand.
+   * Accepts an optional parent accordion to search for headers and panels.
    */
   public async expand(index: number, parentAccordion?: BaseAccordion) {
     if (index === -1) {

elements/pf-accordion/pf-accordion.ts

@@ -44,6 +44,24 @@ export class PfAccordion extends BaseAccordion {
 
   @property({ type: Boolean, reflect: true }) fixed = false;
 
+  async firstUpdated() {
+    let index: number | null = null;
+    if (this.single) {
+      const allHeaders = [...this.querySelectorAll('pf-accordion-header')];
+      const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();
+      if (lastExpanded) {
+        index = allHeaders.indexOf(lastExpanded);
+      }
+    }
+    await super.firstUpdated();
+    if (index !== null) {
+      this.headers.forEach((_, i) => {
+        this.headers.at(i)?.toggleAttribute('expanded', i === index);
+        this.panels.at(i)?.toggleAttribute('expanded', i === index);
+      });
+    }
+  }
+
   override async expand(index: number, parentAccordion?: BaseAccordion) {
     if (index === -1) {
       return;
@@ -57,6 +75,7 @@ export class PfAccordion extends BaseAccordion {
         ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),
       ]);
     }
+
     await super.expand(index, parentAccordion);
   }
 }

elements/pf-accordion/test/pf-accordion.spec.ts

@@ -954,7 +954,7 @@ describe('<pf-accordion>', function() {
       [header, secondHeader] = headers;
       [panel, secondPanel] = panels;
       await allUpdates(element);
-      await nextFrame();
+      await aTimeout(100);
     });
     it('hides the first panel', function() {
       expect(panel).to.not.have.attribute('expanded');
@@ -966,6 +966,7 @@ describe('<pf-accordion>', function() {
       expect(panels[2]).to.not.have.attribute('expanded');
     });
   });
+
   describe('with no h* tag in heading lightdom', function() {
     beforeEach(async function() {
       element = await createFixture<PfAccordion>(html`
@@ -1088,4 +1089,3 @@ describe('<pf-accordion>', function() {
     });
   });
 });
-