Skip to content

fix(client): make state entry expansion keyboard accessible - #1176

Open
Luyii wants to merge 1 commit into
vuejs:mainfrom
Luyii:fix/state-entry-row-a11y-pr
Open

Luyii wants to merge 1 commit into
vuejs:mainfrom
Luyii:fix/state-entry-row-a11y-pr

Conversation

@Luyii

@Luyii Luyii commented Oct 21, 2026

Copy link
Copy Markdown

Summary

  • Make state entry arrows native buttons so they can be focused with Tab and toggled with Enter or Space.
  • Expose the expanded state with aria-expanded and add a visible keyboard focus outline.
  • Show row actions on keyboard focus, keeping edit and copy controls separate from the toggle.
  • Add regression tests for toggling, lazy loading, cache reuse, and nested actions.

Existing mouse clicks and state editing are preserved.

Relates to #885. This is scoped to individual state entries; #1156 covers section headings.

Validation

  • pnpm build
  • pnpm check
  • pnpm typecheck
  • pnpm test --maxWorkers=4 — 69 files, 426 tests passed.
  • StateEntryRow browser tests — 2 tests passed in Chromium 153, covering both themes.
  • Regression tests fail on the original code and pass with the fix.
  • git diff --check
  • Manually tested with the Chrome extension on a local Vue 3 app.

@netlify

netlify Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vue-devtools-docs canceled.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant