Accessibility fix

[SenorBlub]

This pull request improves the accessibility and keyboard navigation of the DesignPatternCarousel component. The main changes focus on enabling users to navigate the carousel using keyboard arrow keys and updating the carousel's configuration for better usability.

Accessibility and Keyboard Navigation Improvements:

• Added a handleKeyDown function and a wrapper div with role="region" and aria-label to allow users to navigate the carousel using left/right arrow keys, enhancing accessibility for keyboard users.
• Integrated the Swiper Keyboard module and updated Swiper configuration to enable keyboard navigation and disable looping for more predictable behavior. [1] [2]

Usability and Code Cleanup:

• Removed the unnecessary tabIndex={0} from the Link element inside each carousel slide, relying on improved keyboard navigation at the carousel level.
• Adjusted Swiper settings: reduced animation speed, disabled autoplay and free mode, and ensured navigation controls are present for better user control.
• Minor formatting fix for the default export statement.

[Copilot]

Pull request overview

This pull request enhances accessibility and keyboard navigation for the DesignPatternCarousel component by integrating Swiper's Keyboard module and adding ARIA attributes. However, the implementation contains some redundancies and accessibility issues that should be addressed.

Key Changes:

• Added Swiper's Keyboard module and custom keyboard event handler for arrow key navigation
• Wrapped carousel in a semantic <div> with role="region" and aria-label for screen reader support
• Updated Swiper configuration: disabled looping, removed autoplay, reduced animation speed from 3000ms to 500ms
• Removed tabIndex={0} from Link elements inside carousel slides

Comments suppressed due to low confidence (1)

src/components/design-pattern-carousel/index.tsx:3

• Unused import Autoplay.

import { A11y, Autoplay, Navigation, Keyboard } from "swiper/modules";

[theartcher]

Thank you for your PR. The carousel has stopped autoplaying and looping, which is a requirement for this component to be able to do. Your keyboard navigation changes do work really well, and I'd love to have it integrated. Perhaps you can find a way to pause it when focussed and allow for keyboard navigation, then have it loop and autoplay when not focussed or hovered on.