[Xinglan233]

Summary

The setup, props, and data section headings in the Components inspector can be clicked to expand or collapse, but keyboard users cannot reach them with Tab. They are rendered as divs, so their expanded state is also missing from the accessibility tree.

• Render section headings as native buttons so they support Tab, Enter, and Space.
• Expose each section’s expanded state with aria-expanded.
• Preserve the existing layout and collapse behavior, with a visible keyboard focus indicator.
• Add regression tests for section toggling and state handling.

This change is limited to state section headings and does not overlap with the AppList changes in #1152 or the Render Code changes in #1146.

Relates to #885.

Validation

• Regression tests fail on the original code and pass with the fix; pnpm test passes (61 files, 360 tests).
• pnpm check, pnpm typecheck, pnpm lint, pnpm format:check, pnpm build, and git diff --check pass.
• Verified in Chrome on macOS: Tab/Shift+Tab, Enter/Space, mouse toggling, visible focus in both themes, state editing, component switching, and Pinia sections.
• Screen-reader testing has not been performed.

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	0e71ff8
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/6ad030a9dc7d30f39ae78d00

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vue/devtools-api@1156

npm i https://pkg.pr.new/@vue/devtools-kit@1156

npm i https://pkg.pr.new/vite-plugin-vue-devtools@1156

commit: 0e71ff8