Skip to content

feat(CircularGallery): add keyboard navigation support#982

Open
Sarthak-Bhagat2006 wants to merge 1 commit into
DavidHDev:mainfrom
Sarthak-Bhagat2006:feat/CircularGallary-keyboard-navigation
Open

feat(CircularGallery): add keyboard navigation support#982
Sarthak-Bhagat2006 wants to merge 1 commit into
DavidHDev:mainfrom
Sarthak-Bhagat2006:feat/CircularGallary-keyboard-navigation

Conversation

@Sarthak-Bhagat2006

Copy link
Copy Markdown

Fixes #981. The CircularGallery component could only be navigated using mouse drag, touch gestures, and mouse wheel scrolling. Keyboard-only users could not interact with the gallery because it was not focusable and did not respond to keyboard input.

This adds keyboard navigation support and accessibility semantics:

  • Added ArrowLeft and ArrowRight keyboard navigation.
  • Added tabIndex={0} so the gallery can receive keyboard focus.
  • Added role="region" and a descriptive aria-label for assistive technologies.
  • Added keyboard event listener cleanup on component unmount.

Mouse, touch, drag, and wheel behaviour are unchanged.

Updated across all 4 variants (JS/TS × CSS/Tailwind), per the contributing guidelines.

How it was tested

Ran the demo locally and verified in a real browser:

Check Result
Gallery receives focus via Tab
ArrowLeft navigates to previous item
ArrowRight navigates to next item
Mouse drag interaction still works
Mouse wheel interaction still works
Touch interaction still works
Keyboard event listeners are cleaned up on unmount

Accessibility

  • Keyboard-only users can now navigate the gallery.
  • The component is focusable through normal tab navigation.
  • Screen readers announce the gallery region using the provided aria-label.

@Sarthak-Bhagat2006 Sarthak-Bhagat2006 force-pushed the feat/CircularGallary-keyboard-navigation branch from 6b77d09 to ff91d0d Compare June 11, 2026 14:07
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.

[BUG]: No keyboard navigation support to CircularGallery

1 participant