Skip to content

[BUG] Keyboard navigation accessibility #29

@SenorBlub

Description

@SenorBlub

When navigating the homepage using keyboard-only (Tab), the user becomes trapped inside the carousel component. After tabbing into the carousel, focus cycles through the items but never escapes to the rest of the page.

Steps to reproduce:

  1. Go to https://www.designpatternpedia.nl/
  2. Press Tab repeatedly until focus enters the carousel
  3. Continue pressing Tab

Observed behavior:

  1. Keyboard focus becomes locked inside the carousel
  2. It is not possible to tab out
  3. Arrow navigation also doesn’t work because the scrollbar blocks arrow-based movement

Expected behavior:
One of the following should happen:

Option A: After the last interactive element inside the carousel, focus should move to the next element on the page (normal tab flow),
or

Option B: Carousel should support navigation via arrow keys without requiring mouse or scroll input (ARIA-compliant behavior)

Impact:
This creates an accessibility barrier for keyboard users and violates WCAG 2.1 Success Criterion 2.1.2 (No Keyboard Trap).
Users relying on keyboard-only navigation cannot access the rest of the page once entering the carousel.

Additional context:
Screenshot for reference:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions