fix: #1920 use svelte:element for AccordionItem

[shinokada]

🔗 Related issue (optional)

Closes #1920

---

📑 Description

---

🔍 PR Type

• Bug fix
• Feature
• Documentation
• Refactor / Code cleanup
• Build / Tooling
• Other (please describe)

---

🚦 PR Status

• Draft (work in progress, not ready for review)
• Ready for review ✅

---

✅ Checklist

• My code follows the existing code style
• I have run pnpm lint && pnpm check && pnpm test:e2e and all tests pass
• CoderabbitAI review has been completed and actionable suggestions were reviewed
• I have updated documentation if my changes require it
• My PR is based on the latest main branch (not the published npm version)
• I have checked accessibility where applicable (ARIA, keyboard nav, etc.)
• I have reviewed the rendered component in the browser

---

🧪 Screenshots / Demos (optional)

---

⚠️ Breaking Changes (optional)

---

ℹ️ Additional Information

Summary by CodeRabbit

• New Features
  • Accordion items now support a customizable heading tag, allowing you to specify the semantic heading level (h2, h3, h4, h5, h6, or div) for improved accessibility and flexibility.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flowbite-svelte	Ready	Preview, Comment	Mar 26, 2026 10:14am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 56ccb236-67c7-477e-be23-1efb88f55a13

📥 Commits

Reviewing files that changed from the base of the PR and between 27efafc and cb906e4.

📒 Files selected for processing (2)

• src/lib/accordion/AccordionItem.svelte
• src/lib/types.ts

---

📝 Walkthrough

Walkthrough

Added an optional headingTag prop to AccordionItem that allows consumers to specify the semantic heading level (h2, h3, h4, h5, h6, or div) rendered for the accordion header wrapper, defaulting to h2 for backward compatibility. The component now dynamically renders the heading element instead of always using a static h2.

Changes

Cohort / File(s)	Summary
AccordionItem Type Definition src/lib/types.ts	Added optional headingTag prop to AccordionItemProps interface with allowed values 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'.
AccordionItem Component src/lib/accordion/AccordionItem.svelte	Updated component to destructure the new headingTag prop and replaced static <h2> element with dynamic <svelte:element this={headingTag ?? "h2"}> rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A flexible wrapper, now semantic and free,
No more fixed h2s for all eyes to see!
h3, h4, or div—pick what feels right,
Accordion items in harmony and light!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description follows the template structure with related issue (#1920), PR type (Bug fix), and PR status marked. However, the Description section is completely empty, leaving key details about the change unexplained.	Fill in the Description section to briefly explain the purpose and what the PR changes, particularly how the new headingTag prop addresses the issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: using svelte:element for AccordionItem to address issue #1920, which focuses on making the heading element dynamic.
Linked Issues check	✅ Passed	The PR successfully implements the proposed solution from issue #1920: adds an optional headingTag prop with type 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div', defaults to 'h2', and uses svelte:element for dynamic rendering.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to addressing issue #1920: AccordionItemProps type definition and component implementation match the proposed solution without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/accordion

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}