Skip to content

fix(client): make pages route actions keyboard accessible - #1173

Open
ninadsutrave wants to merge 1 commit into
vuejs:mainfrom
ninadsutrave:fix/pages-a11y
Open

ninadsutrave wants to merge 1 commit into
vuejs:mainfrom
ninadsutrave:fix/pages-a11y

Conversation

@ninadsutrave

Copy link
Copy Markdown

Summary

In the Pages panel, dynamic routes (e.g. /projects/:slug) open their "Fill params and navigate" popover from a <code> element, and route meta opens from a <span>. Neither can be reached with Tab, and the route/param inputs only have placeholders.

  • Render the dynamic route trigger as a native button so Tab, Enter and Space open the param popover.
  • Render route meta as a native button for routes that have meta; routes without meta show a plain - and are no longer tab stops.
  • Add accessible names to the route path input and the param inputs.
  • Add an integration test for the labels, button semantics and meta selection.

Styling and click behaviour are unchanged. This is limited to pages/pages.vue and doesn't overlap with #1146, #1170 or #1171.

Relates to #885.

Validation

  • pnpm vitest run tests/integration/client/pages.test.ts (fails on the original code, passes with the fix)
  • pnpm lint, pnpm typecheck, pnpm format:check, pnpm build
  • pnpm test (68 files, 418 tests passed)

@ninadsutrave ninadsutrave mentioned this pull request Oct 18, 2026
3 tasks
@netlify

netlify Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vue-devtools-docs canceled.

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

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