WAI-ARIA + until-found を使用したアクセシブルなアコーディオンの実装

/* （装飾） */
.accordions {
	--bdc: hsl(210, 16%, 80%);
	--bdrs: 8px;

	overflow: clip;
	border-radius: var(--bdrs);
	border: solid 1px var(--bdc);
}

/* （装飾）2つ目以降のアコーディオンには上部にボーダーを追加 */
.accordion + .accordion {
	border-top: solid 1px var(--bdc);
}

.accordion {
	--duration: 0.25s;
	--icon-transform: rotate(0deg); /* icon 変化用の変数 */
}
/* 開いている時 */
.accordion[data-opened] {
	--icon-transform: rotate(90deg);
}

.accordion__title {
	font: inherit; /* 見出しタグのフォントを打ち消す */
	background-color: color-mix(in srgb, var(--bdc), transparent 80%);
}

.accordion__button {
	display: flex;
	background: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.25rem 1rem;
	gap: 1rem;

	/* button のスタイルリセット */
	height: auto;
	border: none;
	font-size: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

.accordion__panel {
	position: relative;
	overflow: hidden;

	height: 0px;
	transition: height var(--duration);

	/* jsで変数にセットする */
	--height--opened: auto;
}

/* 開いている時 */
[data-opened] > .accordion__panel {
	height: var(--height--opened);
}

/* パネルが完全に閉じている時にabsoluteで飛ばしておくと、Chromeでも検索時に正常にハイライトされるようになる（なぜかは不明） */
[hidden] > .accordion__content{
	position: absolute;
}

/* コンテンツの paddingは __panel ではなくこっちにつける */
.accordion__content {
	padding: 1.25rem 1rem;
}

/* コンテンツ間の余白 */
.flow > * + *{
	margin-block-start: 1rem;
}

/* アイコンの描画 */
.accordion__icon {
	display: grid;
	width: 1em;
	height: 1em;
	place-items: center;
	flex-shrink: 0;

	&::before,
	&::after {
		content: '';
		display: block;
		grid-area: 1 / 1;
		background-color: currentColor;
	}
	&::before {
		width: 0.1em;
		height: 100%;
		transition: transform var(--duration);
		transform: var(--icon-transform);
	}
	&::after {
		height: 0.1em;
		width: 100%;
	}
}

/* タイトルホバー時、背景色を少し濃くする */
@media (any-hover: hover) {
	.accordion__title:hover {
		background-color: color-mix(in srgb, var(--bdc), transparent 60%);
	}
}
/* Tabキーでのフォーカス時も同じスタイリング */
.accordion__title:has(> :focus-visible) {
	background-color: color-mix(in srgb, var(--bdc), transparent 60%);
}

/* フォーカス時のアウトラインを少し内側に寄せる( overflow:hidden によって途切れてしまうので)  */
.accordion__button:focus-visible {
	outline: solid 2px currentColor;
	outline-color: revert;
	outline-offset: -3px; /* offset 調整だけだとブラウザ間の差が大きい */
}

/* --- (任意) フォーカスリングの角丸調整 --- */
.accordion:first-child .accordion__button {
	border-top-left-radius: var(--bdrs);
	border-top-right-radius: var(--bdrs);
}
.accordion:last-child:not([data-opened]) .accordion__button {
	border-bottom-left-radius: var(--bdrs);
	border-bottom-right-radius: var(--bdrs);
}


/* --- 「視差効果を減らす」設定を考慮 --- */
@media (prefers-reduced-motion: reduce) {
	.accordion{
		--duration: 0s;
	}
}

/* --- JSオフ環境の考慮 --- */
@media (scripting: none) {
	.accordion__panel {
		height: auto !important;
		content-visibility: visible !important;
	}
	.accordion__content{
		position: static !important;
	}
}

<p>「コンテンツ」でページ内テキスト検索して動作を確かめてみてください。</p>
<br />
<div class="accordions">
	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--01">
				アコーディオン01 (WAI-ARIA + "until-found")
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--01" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 01 のコンテンツです。<a href="!">このリンク</a>はフォーカス確認のためのダミーリンクです。</p>
				<h4 id="acc-content-h4">これはパネルコンテンツ内の見出し要素です。</h4>
				<p>ここに並ぶアコーディオンは連打してもスムーズに動作し、until-foundによってページ内検索時に自動で展開されます。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--02">
				アコーディオン 02
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--02" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 02 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--03">
				アコーディオン 03
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--03" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 03 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>
</div>

<br />
<p><a href="#acc-content-h4">アコーディオン内の見出しへのリンク</a></p>

import { waitFrame, waitAnimation, maybePauseAnimation } from './_helper.js';

// hidden を付け外しする時の値
let ACCORDION_HIDDEN_VALUE = 'until-found';

// アコーディオン要素から必要な要素を取得
const getAccordionElements = (accordion) => {
	const title = accordion.querySelector('.accordion__title');
	const panel = accordion.querySelector('.accordion__panel');
	return {
		title,
		button: title.querySelector('button'),
		panel,
		content: panel.querySelector('.accordion__content'),
	};
};

// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
//   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
const maybeCloseOpenedItems = (accordion) => {
	const parent = accordion.parentNode;
	if (!parent) return;

	// 親のdata-allow-multiple 属性の有無をチェック
	if (parent.hasAttribute('data-allow-multiple')) return;

	// 開いているアコーディオンを取得して閉じる
	parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
};

async function openAccordion(accordion) {
	const { panel, content, button } = getAccordionElements(accordion);

	// アニメーションがあれば一時停止
	maybePauseAnimation(panel);

	// hidden を削除
	panel.removeAttribute('hidden');

	// 1フレーム待機
	await waitFrame();

	// 次フレームで高さセット（ 目標の高さ = content の高さ ）
	panel.style.setProperty('--height--opened', `${content.offsetHeight}px`);

	// さらに1フレーム待機
	await waitFrame();

	// アニメーション開始
	accordion.setAttribute('data-opened', '');
	button.setAttribute('aria-expanded', 'true');

	// アニメーションを待つ
	const status = await waitAnimation(panel);

	// アニメーションが最後まで完了した時、--height--opened削除（（高さセットしたままだとリサイズできない）
	if ('finished' === status) {
		panel.style.removeProperty('--height--opened');
	}
}

async function closeAccordion(accordion) {
	const { panel, button } = getAccordionElements(accordion);

	// アニメーションがあれば一時停止
	maybePauseAnimation(panel);

	// 現在の高さをセットする
	panel.style.setProperty('--height--opened', `${panel.offsetHeight}px`);

	// 1フレーム待機
	await waitFrame();

	// 次フレームで属性を削除してアニメーション開始;
	accordion.removeAttribute('data-opened');
	button.setAttribute('aria-expanded', 'false');

	// アニメーションを待つ
	const status = await waitAnimation(panel);

	// アニメーションが最後まで完了した時、hidden付与 & --height--opened削除
	if ('finished' === status) {
		panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
		panel.style.removeProperty('--height--opened');
	}
}

// アコーディオンのトグル処理
function toggleAccordion(accordion) {
	if (accordion.hasAttribute('data-opened')) {
		// 自身を閉じる
		closeAccordion(accordion);
	} else {
		// 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
		maybeCloseOpenedItems(accordion, closeAccordion);

		// 自身を開く
		openAccordion(accordion);
	}
}

/**
 * アコーディオンにイベントセット
 */
(function () {
	const accordionAll = document.querySelectorAll('.accordion');
	accordionAll.forEach((accordion) => {
		const { button, panel } = getAccordionElements(accordion);

		// until-found のオン・オフが使い分けれるように、最初に初期値を取得
		if (panel.hasAttribute('hidden')) {
			ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
		}

		// clickイベント登録
		button.addEventListener('click', function (e) {
			e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
			toggleAccordion(accordion);
		});

		// beforematchイベント登録 (ページ検索時などはこっちが発火する)
		panel.addEventListener('beforematch', function (e) {
			e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
			toggleAccordion(accordion);
		});
	});
})();

// 1フレーム待機
export const waitFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));

// パネルのアニメーションが完了するのを待つ（アニメーションステータスを文字列で返す）
export const waitAnimation = async (panel) => {
	const animations = panel.getAnimations();

	// アニメーションがなければ 'finished' を返す
	if (animations.length === 0) return 'finished';

	// allSettled を使うことで、キャンセル時も例外にならずに結果を取得できる
	const results = await Promise.allSettled(animations.map((a) => a.finished));

	// （ pause()で止めた時用 ）rejected があれば false
	return results.every((r) => r.status === 'fulfilled') ? 'finished' : 'canceled';
};

// 実行中のアニメーションがあれば一旦停止させる
export const maybePauseAnimation = (panel) => {
	const animations = panel.getAnimations();
	if (animations.length === 0) return;
	animations.forEach((a) => a.pause());
};

<div class="accordions" data-allow-multiple>
	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--01">
				アコーディオン01 (allow-multiple)
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--01" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 01 のコンテンツです。<a href="!">このリンク</a>はフォーカス確認のためのダミーリンクです。</p>
				<h4>これはパネルコンテンツ内の見出し要素です。</h4>
				<p>ここに並んでいるアコーディオンは、同時に複数展開可能です。その代わり、role="region" は除去しています。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--02">
				アコーディオン 02
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--02" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 02 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" aria-expanded="false" aria-controls="AccID-panel--03">
				アコーディオン 03
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--03" hidden="until-found">
			<div class="accordion__content flow">
				<p>アコーディオン 03 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>
</div>

<div class="accordions">
	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" id="AccID-label--01" aria-expanded="false" aria-controls="AccID-panel--01">
				アコーディオン01 (ふつうの hidden)
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--01" role="region" aria-labelledby="AccID-label--01" hidden>
			<div class="accordion__content flow">
				<p>アコーディオン 01 のコンテンツです。<a href="!">このリンク</a>はフォーカス確認のためのダミーリンクです。</p>
				<h4>これはパネルコンテンツ内の見出し要素です。</h4>
				<p>ここに並ぶアコーディオンのコンテンツは、折り畳まれている間はページ内検索の対象外となります。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" id="AccID-label--02" aria-expanded="false" aria-controls="AccID-panel--02">
				アコーディオン 02
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--02" role="region" aria-labelledby="AccID-label--02" hidden>
			<div class="accordion__content flow">
				<p>アコーディオン 02 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>

	<div class="accordion">
		<h3 class="accordion__title">
			<button class="accordion__button" type="button" id="AccID-label--03" aria-expanded="false" aria-controls="AccID-panel--03">
				アコーディオン 03
				<span class="accordion__icon" aria-hidden="true"></span>
			</button>
		</h3>
		<div class="accordion__panel" id="AccID-panel--03" role="region" aria-labelledby="AccID-label--03" hidden>
			<div class="accordion__content flow">
				<p>アコーディオン 03 のコンテンツです。</p>
				<p>ダミーテキスト: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
			</div>
		</div>
	</div>
</div>