fix(accordion): fixing header tag, fixing heading text attribute (#2435)

* fix(accordion): fixing issue with header tag showing in anonymous slot, fix issue with headingtext

* fix(accordion): remove unsafeStatic, html functions and render header

* style(accordion): reformatting render function to be cleaner

* fix: removing anonymous slot check, adding headingTag check in init

* refactor(accordion): simplify render method

---------

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

Author: brianferry

.changeset/pf-accordion-header-tags.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-accordion-header>`: fixed duplicated/nested headings when slotted heading 
+elements are used instead of the `header-text` attribute.

.changeset/pf-accordion-headers.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-accordion-header>`: fixed broken `header-tag` and `header-text` attributes

elements/pf-accordion/BaseAccordionHeader.ts

@@ -2,7 +2,6 @@ import type { TemplateResult } from 'lit';
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
-import { unsafeStatic, html as staticH } from 'lit/static-html.js';
 
 import { BaseAccordion } from './BaseAccordion.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
@@ -32,14 +31,16 @@ export abstract class BaseAccordionHeader extends LitElement {
 
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  @property({ reflect: true, attribute: 'heading-text' }) headingText = '';
+  @property({ reflect: true, attribute: 'heading-text' }) headingText?: string;
 
-  @property({ reflect: true, attribute: 'heading-tag' }) headingTag = 'h3';
+  @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;
 
   #generatedHtag?: HTMLHeadingElement;
 
   #logger = new Logger(this);
 
+  #header?: HTMLElement;
+
   override connectedCallback() {
     super.connectedCallback();
     this.addEventListener('click', this.#onClick);
@@ -49,16 +50,16 @@ export abstract class BaseAccordionHeader extends LitElement {
   }
 
   async #initHeader() {
-    const header = this.#getOrCreateHeader();
+    if (this.headingText && !this.headingTag) {
+      this.headingTag = 'h3';
+    }
+    this.#header = this.#getOrCreateHeader();
 
     // prevent double-logging
-    if (header !== this.#generatedHtag) {
+    if (this.#header !== this.#generatedHtag) {
       this.#generatedHtag = undefined;
     }
 
-    this.headingTag = header?.tagName.toLowerCase() ?? 'h3';
-    this.headingText = header?.textContent?.trim() ?? '';
-
     do {
       await this.updateComplete;
     } while (!await this.updateComplete);
@@ -71,19 +72,28 @@ export abstract class BaseAccordionHeader extends LitElement {
   renderAfterButton?(): TemplateResult;
 
   override render(): TemplateResult {
-    const tag = unsafeStatic(this.headingTag);
-    const ariaExpandedState = String(!!this.expanded) as 'true' | 'false';
-    return staticH`
-      <${tag} id="heading">
-        <button id="button"
-                class="toggle"
-                aria-expanded="${ariaExpandedState}">
-          <span part="text">${this.headingText || html`
-            <slot></slot>`}
-          </span>
-          ${this.renderAfterButton?.()}
-        </button>
-      </${tag}>
+    switch (this.headingTag) {
+      case 'h1': return html`<h1 id="heading">${this.#renderHeaderContent()}</h1>`;
+      case 'h2': return html`<h2 id="heading">${this.#renderHeaderContent()}</h2>`;
+      case 'h3': return html`<h3 id="heading">${this.#renderHeaderContent()}</h3>`;
+      case 'h4': return html`<h4 id="heading">${this.#renderHeaderContent()}</h4>`;
+      case 'h5': return html`<h5 id="heading">${this.#renderHeaderContent()}</h5>`;
+      case 'h6': return html`<h6 id="heading">${this.#renderHeaderContent()}</h6>`;
+      default: return this.#renderHeaderContent();
+    }
+  }
+
+  #renderHeaderContent() {
+    const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();
+    return html`
+      <button id="button"
+              class="toggle"
+              aria-expanded="${String(!!this.expanded) as 'true' | 'false'}">
+        <span part="text">${headingText ?? html`
+          <slot></slot>`}
+        </span>
+        ${this.renderAfterButton?.()}
+      </button>
     `;
   }