Skip to content

fix(client): make timeline layers keyboard accessible - #1171

Open
Singmin wants to merge 1 commit into
vuejs:mainfrom
Singmin:fix/885-timeline-layer-keyboard-selection
Open

Singmin wants to merge 1 commit into
vuejs:mainfrom
Singmin:fix/885-timeline-layer-keyboard-selection

Conversation

@Singmin

@Singmin Singmin commented Oct 18, 2026

Copy link
Copy Markdown

Timeline layer entries are clickable list items, so keyboard users cannot select a layer to inspect its events. Their Enable/Disable buttons are focusable but remain transparent without mouse hover.

Render layer selection as a native button beside the existing collection button, preserving the list structure without nested buttons. Expose the selected layer with aria-pressed, include the layer name in collection-action labels, and reveal collection controls on focus within the row. Add inset keyboard focus outlines, keep disabled-collection dimming off the focus indicators, and reserve space so long layer names do not overlap the action.

Add three integration regressions using the actual Timeline state logic for built-in and dynamic layer semantics, focusability, repeated selection, and independent collection controls. All three fail on the original page and pass with the fix.

Relates to #885. This is limited to the left-hand layer list; #1170 covers Timeline event rows. A local three-way merge with #1170 at 1b0e2e8 is clean.

Validation

  • pnpm exec vitest run --maxWorkers=4: 68 files, 408 tests passed.
  • Targeted regression tests, pnpm typecheck, pnpm check, and git diff --check: passed.
  • Full package build: passed. On Windows, ran the two steps of pnpm build separately to preserve the quoted filters:
    • pnpm --filter './packages/*' --filter '!vite-plugin-vue-devtools' -r build
    • pnpm --filter vite-plugin-vue-devtools build
  • Local Chrome 155 fixture with the actual Timeline, Splitpanes, UnoCSS, and RecycleScroller: Tab/Shift+Tab order, Enter/Space activation, repeated selection, collection-action isolation, visible focus in both themes, long names, and all 48 layer controls in a narrow layout passed. With 1,000 events per event layer, 48 event views were mounted; 28px event rows, scrolling, and mouse selection passed with no page errors.

Integration tests stub layout and scrolling; native key activation and layout were checked separately in the browser fixture. Full host smoke suites and screen-reader testing were not run.

@netlify

netlify Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vue-devtools-docs canceled.

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

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