(#4993) Accordion No Nesting Headers

Closes #4993

Author: karlikpj

packages/ncids-js/src/components/usa-accordion/__tests__/example-dom.ts

@@ -153,3 +153,22 @@ export const exampleAccordionInitialized = (): HTMLElement => {
 		</div>`;
 	return div;
 };
+
+export const exampleAccordionNoNesting = (): HTMLElement => {
+	const div = document.createElement('div');
+
+	div.innerHTML = `
+		<div class="cgdp-article-body cgdp-article-body--multiple">
+			<section>
+				<h2>First Heading</h2>
+				<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech</p>
+				<h2>Inner Heading</h2>
+				<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech</p>
+			</section>
+			<section>
+				<h2>Second Section Heading</h2>
+				<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech</p>
+			</section>
+		</div>`;
+	return div;
+};

packages/ncids-js/src/components/usa-accordion/__tests__/usa-accordion.test.ts

@@ -9,6 +9,7 @@ import {
 	exampleAccordionBad,
 	exampleAccordionInitialized,
 	exampleProseless,
+	exampleAccordionNoNesting,
 } from './example-dom';
 
 describe('USAAccordion', () => {
@@ -141,4 +142,82 @@ describe('USAAccordion', () => {
 		await user.click(button);
 		expect(controlledSection!.hidden).toBeTruthy();
 	});
+
+	it('only converts first heading inside each section to buttons', async () => {
+		Object.defineProperty(window, 'innerWidth', {
+			writable: true,
+			configurable: true,
+			value: 375,
+		});
+
+		document.getElementsByTagName('body')[0].innerHTML = '';
+		const domContainer = exampleAccordionNoNesting();
+		document.body.append(domContainer);
+		const newOptions = {
+			...options,
+			containerSelector: 'section',
+		};
+		accordion = USAAccordion.create(domContainer, newOptions);
+
+		window.dispatchEvent(new Event('resize'));
+
+		const buttons = document.body.querySelectorAll('.usa-accordion__button');
+
+		expect(buttons).toHaveLength(2);
+		expect(buttons[0]).toHaveTextContent('First Heading');
+		expect(buttons[1]).toHaveTextContent('Second Section Heading');
+	});
+
+	it('does not convert inner headings into buttons', async () => {
+		Object.defineProperty(window, 'innerWidth', {
+			writable: true,
+			configurable: true,
+			value: 375,
+		});
+
+		document.getElementsByTagName('body')[0].innerHTML = '';
+		const domContainer = exampleAccordionNoNesting();
+		document.body.append(domContainer);
+		const newOptions = {
+			...options,
+			containerSelector: 'section',
+		};
+		accordion = USAAccordion.create(domContainer, newOptions);
+
+		window.dispatchEvent(new Event('resize'));
+
+		const allHeadings = document.body.querySelectorAll('h2');
+		const innerHeading = allHeadings[1];
+
+		expect(innerHeading.querySelector('button')).toBeNull();
+	});
+
+	it('wraps inner headings inside accordion content', async () => {
+		Object.defineProperty(window, 'innerWidth', {
+			writable: true,
+			configurable: true,
+			value: 375,
+		});
+
+		document.getElementsByTagName('body')[0].innerHTML = '';
+		const domContainer = exampleAccordionNoNesting();
+		document.body.append(domContainer);
+		const newOptions = {
+			...options,
+			containerSelector: 'section',
+		};
+		accordion = USAAccordion.create(domContainer, newOptions);
+
+		window.dispatchEvent(new Event('resize'));
+
+		const contents = document.body.querySelectorAll('.usa-accordion__content');
+
+		expect(contents).toHaveLength(2);
+
+		const firstContent = contents[0];
+		expect(firstContent.innerHTML).toContain('Inner Heading');
+		expect(firstContent.innerHTML).toContain(
+			'Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech'
+		);
+	});
 });

packages/ncids-js/src/components/usa-accordion/usa-accordion-options.ts

@@ -7,4 +7,6 @@ export type AccordionOptions = {
 	allowMultipleOpen: boolean;
 	/** specifies sections opened at init.  */
 	openSections: Array<number>;
+	/** optional param to prevent nesting */
+	containerSelector?: string;
 };

packages/ncids-js/src/components/usa-accordion/usa-accordion.component.ts

@@ -126,17 +126,39 @@ export class USAAccordion {
 				'usa-prose'
 			);
 
-		// Find all heading elements within the section
-		const headings = this.accordionContainer.querySelectorAll(
-			'h1, h2, h3, h4, h5, h6'
-		);
+		let accordionHeadings: Element[] = [];
+		let accordionHeadingLvl = 'H2';
 
-		const accordionHeadingLvl = headings[0].tagName;
+		if (this.options.containerSelector !== undefined) {
+			// Scoped mode: only first heading inside each container
+			const containers = this.accordionContainer.querySelectorAll(
+				this.options.containerSelector
+			);
 
-		// filter down to headings at the same level as the first one
-		const accordionHeadings = Array.from(headings).filter((heading) => {
-			return heading.tagName == accordionHeadingLvl;
-		});
+			containers.forEach((container) => {
+				const firstHeading = container.querySelector('h1, h2, h3, h4, h5, h6');
+				if (firstHeading) {
+					accordionHeadings.push(firstHeading);
+				}
+			});
+
+			if (accordionHeadings.length > 0) {
+				accordionHeadingLvl = accordionHeadings[0].tagName;
+			}
+		} else {
+			// Default behavior
+			const headings = this.accordionContainer.querySelectorAll(
+				'h1, h2, h3, h4, h5, h6'
+			);
+
+			if (!headings.length) return;
+
+			accordionHeadingLvl = headings[0].tagName;
+
+			accordionHeadings = Array.from(headings).filter((heading) => {
+				return heading.tagName === accordionHeadingLvl;
+			});
+		}
 
 		// Iterate over headings
 		accordionHeadings.forEach((heading, index) => {
@@ -199,10 +221,18 @@ export class USAAccordion {
 			contentContainer.setAttribute('id', accordionSectionId);
 			contentContainer.hidden = !initOpen;
 
-			// Select all content siblings until the next heading
 			let nextSibling = heading.nextElementSibling;
-			while (nextSibling && nextSibling.tagName !== accordionHeadingLvl) {
-				// Move the content into the section content container
+
+			const parentSection = this.options.containerSelector
+				? heading.closest('section')
+				: null;
+
+			const shouldContinue = (el: Element) =>
+				this.options.containerSelector
+					? el.closest('section') === parentSection
+					: el.tagName !== accordionHeadingLvl;
+
+			while (nextSibling && shouldContinue(nextSibling)) {
 				contentContainer.appendChild(nextSibling);
 				nextSibling = heading.nextElementSibling;
 			}