Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
5 of 6 tasks
kdgraham3 opened this issue Mar 27, 2024 · 4 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests
Closed
5 of 6 tasks

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

kdgraham3 opened this issue Mar 27, 2024 · 4 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests
Labels
t0ggles Linked to the t0ggles task

Comments

@kdgraham3
Copy link

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
@nolimits4web
Copy link
Owner

t0ggles-create swiper

Copy link

t0ggles bot commented Mar 27, 2024

Task nolimits4web/SWIPER-82 was created

t0ggles task SWIPER-82

@t0ggles t0ggles bot added the t0ggles Linked to the t0ggles task label Mar 27, 2024
Copy link

t0ggles bot commented Mar 28, 2024

Task nolimits4web/SWIPER-82 status changed to Done

@olsp
Copy link

olsp commented Mar 30, 2024

Kind of related to this issue: I'm wondering why the div-element is used (as "recommended" in the docs) for the navigation buttons instead of the button-element? Wouldn't it be semantically correct to use the button-element? It may be beneficial for accessibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment