Skip to content

fix(ui): preserve carousel keyboard and accessibility semantics - #728

Draft
kvnloo wants to merge 3 commits into
CopilotKit:mainfrom
kvnloo:fix/carousel-keyboard-a11y
Draft

kvnloo wants to merge 3 commits into
CopilotKit:mainfrom
kvnloo:fix/carousel-keyboard-a11y

Conversation

@kvnloo

@kvnloo kvnloo commented Oct 3, 2026 •

Copy link
Copy Markdown

Follow-up to #441.

Credit to guidovizoso for the original bundled carousel diagnosis. I rechecked the relevant paths on current main before changing anything; three narrow problems were still present:

  • the Embla reInit listener was registered but never removed;
  • capture-phase Left/Right handling also intercepted editable descendants, and vertical carousels still used horizontal keys;
  • the home “Explore agents” carousel exposed role="region" / aria-roledescription="carousel" without an accessible name.

Change

  • pair both reInit / select subscriptions with cleanup;
  • centralize keyboard ownership so horizontal uses Left/Right, vertical uses Up/Down, and inputs/textareas/selects/contenteditable keep native arrows;
  • name the home carousel from its visible “Explore agents” heading.

Regression

Added a focused Bun/Happy DOM keyboard matrix for horizontal, vertical, and editable-target behavior.

Evidence boundary

This is source + deterministic test coverage. I have not claimed physical screen-reader/browser acceptance in this environment; that remains the final accessibility check before considering the slice complete.

AI assistance: an AI assistant rechecked current source against #441, prepared the narrow patch/test, and kept the original reporter’s provenance explicit.

Credit / provenance

@charan-rathore charan-rathore left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The three scoped fixes check out at 7a85d73: the capture handler uses the orientation-aware keyboard helper, editable targets keep their arrow keys, and cleanup removes both reInit and select using the registered callback. The home carousel's aria-labelledby points to its visible heading.

One new tooling issue remains: bunx biome check app/tests/carousel-keyboard.test.ts fails formatting on the long assertions. Please format that new test. The separate import/export-order finding in carousel.tsx also occurs on the original base file, so I am not attributing it to this change.

The committed tests exercise the helper, but not the actual capture handler or effect cleanup. Please consider adding component tests that render a vertical carousel and assert ArrowDown scrolls, then unmount and assert both event registrations are released with their original callbacks. I ran those as temporary review probes: the original carousel failed both, and this head passed. A labelled-region probe also passed.

Validation: helper matrix 3 passed; component probes 3 passed; home fallback-routing tests 2 passed; app/server/worker typechecks passed. These were isolated Bun 1.3.14 checks with a mocked Embla API, not a full database suite or browser/screen-reader audit.

For issue provenance, #441 was closed as filed in error. This review independently checks the three bugs scoped in this PR; it does not treat all six original issue items as reproduced or resolved.

This branch has not been deployed

No deployments
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.

2 participants