search

Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

Safari Voiceover reading alt text of hidden slide when using pagination. #1152

Open jds-tag opened 1 year ago

jds-tag commented 1 year ago

Checks

Version

v4.1.3

Description

This might be a follow up to https://github.com/Splidejs/splide/issues/305 but I'm not sure. When we're using voiceover in Safari and we navigate using pagination, the previous slide/hidden slide alt text is still read out. This only appears to be an issue in Safari – Chrome and Firefox do not have this issue.

Attaching a video showing the issue.

https://user-images.githubusercontent.com/53844134/231469472-aa9209b8-0ce2-4c49-9bb6-106f8629f9d2.mp4

Note that when I try to use the pagination:updated event to blur the active slide or image with JavaScript it does not prevent the issue.

Reproduction Link

No response

Steps to Reproduce

  1. Create a slider with pagination.
  2. Make sure the slide contains an image with alt text.
  3. In Safari, enable voiceover.
  4. Tab to pagination
  5. Use the arrow key to move to the next page
  6. The previous/hidden slide image alt text is read out by Safari Voiceover before getting to the current slide image/alt text.

Expected Behaviour

The current slide image alt text is read out. This is what happens in Chrome/Firefox.