fix: make collapsible section title a toggle button

[thealxlabs]

🔗 Linked issue

resolves #1518
resolves #1392

🧭 Context

The CollapsibleSection title text was not interactive — only the small chevron button beside it toggled the section. This meant users had to click a small icon rather than the larger, more obvious heading text. Additionally, the title button was missing aria-expanded and aria-controls attributes required by WCAG for disclosure buttons.

📚 Description

• Made the title text a <button> element that calls toggle() on click, so the full heading text is a clickable toggle target.
• Added aria-expanded (bound to isOpen) and aria-controls (pointing to the content div id) to the title button.
• Removed the redundant aria-label from the title button so the button's accessible name comes from its visible text content, avoiding a label/content mismatch.
• Removed unused LinkBase import.

Tests added to test/nuxt/a11y.spec.ts verify that:

1. Clicking the title button toggles aria-expanded from true to false and back.
2. aria-controls references the actual content element id.
3. The component passes the axe audit with a subtitle (which was a potential label mismatch source).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 7:04pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 7:04pm
npmx-lunaria	Ignored		Mar 22, 2026 7:04pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The CollapsibleSection.vue component has been refactored to remove the LinkBase dependency and replace the link-based title with a dedicated button element. The title button now uses aria-expanded and aria-controls attributes to trigger the existing toggle handler on click. This removes hash-navigation behaviour from the title area. Three new test cases verify the button's aria-expanded toggling behaviour, aria-controls reference integrity, and accessibility compliance using an axe audit.

Suggested reviewers

• danielroe
• knowler

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the replacement of a link-based title with a toggle button and the addition of WCAG accessibility attributes.
Linked Issues check	✅ Passed	The pull request meets requirements from both linked issues: #1518 is resolved by replacing hash-link navigation with a toggle button, eliminating scroll behaviour; #1392 is resolved by making the title text clickable for expand/collapse functionality.
Out of Scope Changes check	✅ Passed	All changes are within scope: the CollapsibleSection component modification, LinkBase import removal, and three new accessibility test cases directly address the stated objectives.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

app/components/CollapsibleSection.vue (1)

106-110: Use the project-wide focus-visible styling for this new button.

The new title toggle button adds an inline focus-visible utility class. In this codebase, button focus-visible styles are handled globally, so this should be removed to keep styling consistent.

♻️ Proposed change

-          class="text-start focus-visible:outline-accent/70 rounded"
+          class="text-start rounded"

Based on learnings: In the npmx.dev project, focus-visible styling for buttons and selects is applied globally in app/assets/main.css; components should not add per-element focus-visible utility classes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 32f68e92-4a05-420a-911a-f97b8ec3de08

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and bc48f80.

📒 Files selected for processing (2)

• app/components/CollapsibleSection.vue
• test/nuxt/a11y.spec.ts

[knowler]

Instead of creating a new separate button next to an existing button, we should just use a single button for the expand/collapse functionality, as having two is verbose and extra work to get past when using keyboard nav or a screen reader. It should include both the chevron icon and the section title.

Further, similar to what you’ve done with this new button, we should get rid of the computed aria-label as toggle buttons shouldn’t change their label based on state as the state is already communicated with aria-expanded.

Finally, we should keep the links to the sections. I was thinking that it can still use the chain link icon without any visible text, but the format of the accessible name would be Permalink for [section title].

Let me know if you’ve got any questions.