Skip to content

fix(a11y): notifications not working on click events #8017

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

wisniewski94
Copy link

@wisniewski94 wisniewski94 commented Jun 4, 2025

Closes #8016

This change enhances screen reader support for touch devices. Currently, notifications work only on desktop by firing a notification for space or enter keystrokes. This should change the behavior to notify on the event rather than a specific input type.

@wisniewski94 wisniewski94 changed the title fix: notifications not working on click events fix(a11y): notifications not working on click events Jun 4, 2025
@nolimits4web
Copy link
Owner

Hi. This PR breaks previous behavior, and notifications are not sent anymore (if nav buttons are not BUTTON element) when nav button is focused and Enter/Space pressed. Now it only works on mouse clicks.

Plus why do we need the notification on mouse clicks at all? Because as i guess user already sees what he clicks on with a mouse, which maybe not the case with the keyboard navigation

@wisniewski94
Copy link
Author

wisniewski94 commented Jun 9, 2025

@nolimits4web thanks for the feedback!

Plus why do we need the notification on mouse clicks at all? Because as i guess user already sees what he clicks on with a mouse, which maybe not the case with the keyboard navigation

That's not the case with mobile screen readers that still use taps instead of keystrokes. On the other hand, sight-impaired users may still use a mouse and a screen reader. All screen readers support mouse use (announcements are made on hover). This is because most websites are keyboard inaccessible.

This PR breaks previous behavior, and notifications are not sent anymore (if nav buttons are not BUTTON element) when nav button is focused and Enter/Space pressed. Now it only works on mouse clicks.

This is a bit off - I believe it should work on all nav changes. Does it mean these events are fired in very specific cases?

on('navigationNext', () => {
    if (!swiper.params.a11y.enabled) return;
    const params = swiper.params.a11y;
    if (swiper.isEnd) {
      notify(params.lastSlideMessage);
    } else {
      notify(params.nextSlideMessage);
    }
  });
  on('navigationPrev', () => {
    if (!swiper.params.a11y.enabled) return;
    const params = swiper.params.a11y;
    if (swiper.isBeginning) {
      notify(params.firstSlideMessage);
    } else {
      notify(params.prevSlideMessage);
    }
  });

The last time I checked, it worked fine, but maybe I was rushing it too much. I will double-check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Notifications (aria-live) are not announced on click or tap
2 participants