[BUG]: No keyboard navigation support to CircularGallery

[Sarthak-Bhagat2006]

Current Behaviour

The CircularGallery component currently supports navigation using mouse drag, touch gestures, and mouse wheel scrolling. However, users who rely on keyboard navigation cannot interact with the gallery because it is not focusable and does not respond to keyboard input.

Expected Behaviour

The CircularGallery component should support keyboard navigation by:

• Allowing the gallery container to receive keyboard focus.
• Supporting ArrowLeft and ArrowRight keys for navigation.
• Providing appropriate accessibility attributes for assistive technologies.

Proposed Solution

• Add keyboard event handling for ArrowLeft and ArrowRight.
• Make the gallery focusable using tabIndex={0}.
• Add accessibility attributes such as:
  • role="region"
  • aria-label=" Circular image gallery. Use Left and Right Arrow keys to navigate."
• Remove event listeners during component cleanup.

Accessibility Benefits

This enhancement improves accessibility for:

• Keyboard-only users
• Users with motor impairments
• Users using assistive technologies
• Developers looking for accessible UI components

The change follows accessibility best practices and improves the overall usability of the CircularGallery component.

Reproduction Link

No response

Steps to reproduce

1. Open the CircularGallery component demo.
2. Try navigating the gallery using only the keyboard.
3. Press the Tab key to focus interactive elements on the page.
4. Attempt to focus and interact with the CircularGallery.
5. Press the ArrowLeft and ArrowRight keys.

Actual Result

• The CircularGallery cannot be navigated using the keyboard.
• Arrow key presses have no effect.
• Keyboard-only users cannot interact with the gallery.

Expected Result

• The CircularGallery should be focusable via the Tab key.
• Pressing ArrowLeft should navigate to the previous item.
• Pressing ArrowRight should navigate to the next item.
• Users should be able to navigate the gallery without requiring a mouse or touch input.

Validations

• I have checked other issues to see if my issue was already reported or addressed