Skip to content

Next/Prev buttons not working when navigation via keyboard #7423

@kdgraham3

Description

@kdgraham3

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-navigation-forked-yw4g5x?file=%2Findex.html

Bug description

Next/Prev navigation buttons (.swiper-button-prev and swiper-button-next) don't work when keyboard is used to navigate. This is needed to navigate the swiper carousel for Accessibility - currently keyboard/assistive tech users can't access the carousel.

To replicate, go to the Reproduction link (this is direct fork of navigation demo, no adjustments), use keyboard "tab" key to focus swiper arrow, once in focus press keyboard "Enter/Return" key.

Affected code is shown here:
Screenshot 2024-03-27 at 1 21 14 pm

Small tweak to code fixes the issue...
Screenshot 2024-03-27 at 1 10 13 pm

Expected Behavior

Pressing Enter key when next/prev arrows are in focus should trigger the carousel to slide.

Actual Behavior

Pressing Enter key when next/prev arrows are in focus does nothing.

Swiper version

11.0.7

Platform/Target and Browser Versions

MacOS Chrome 122.0.6261.139

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR

Metadata

Metadata

Assignees

No one assigned

    Labels

    t0gglesLinked to the t0ggles task

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions