fix(a11y): notifications not working on click events

[wisniewski94]

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.

[nolimits4web]

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]

@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.