Skip to content

fix(client): make timeline events keyboard accessible - #1170

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

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

Conversation

@Singmin

@Singmin Singmin commented Oct 18, 2026

Copy link
Copy Markdown

Timeline event rows in v9 are clickable divs, so keyboard users cannot focus or activate them to inspect an event.

Render each event row as a native button with type="button". This provides Tab, Enter, and Space behavior through the existing selection and inspection callback. Expose the selected event with aria-pressed, retain the full event title, subtitle, and timestamp in the accessible name (including grouped rows that hide repeated titles), and add an inset keyboard focus outline. Keep the existing virtual scroller, 28px row height, and mouse selection behavior.

Add an Issue #885 regression test for native button semantics, focusability, accessible names, selection state, inspection callbacks, and repeated activation. Both tests fail on the original code and pass with this change.

Relates to #885. This is limited to Timeline event rows; the issue also tracks other accessibility work.

Validation

  • pnpm test: 68 files, 407 tests passed, including the two new regression tests.
  • pnpm typecheck, pnpm lint, pnpm format:check, and pnpm check: passed.
  • Full package build: passed. On Windows, ran both steps of pnpm build separately in PowerShell to preserve the quoted package filters:
    • pnpm --filter './packages/*' --filter '!vite-plugin-vue-devtools' -r build
    • pnpm --filter vite-plugin-vue-devtools build
  • git diff --check: passed.
  • Local Chrome 155 fixture check with the actual Timeline component and RecycleScroller: Tab/Shift+Tab, Enter/Space, repeated activation, mouse selection, pressed state, focus outlines in both themes, 28px row height, and selection after view recycling passed. The fixture contained 1,000 events with 51 mounted rows and no page errors.

The integration test stubs layout and scrolling; native key activation and virtualization 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 1b0e2e8
🔍 Latest deploy log https://app.netlify.com/projects/vue-devtools-docs/deploys/6ad4866c2cf843d05a873881

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