splide__sr ellipses is read by screenreader

[j10sanders]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.0.2

Description

The splide__sr ellipses is read by screenreaders, which is confusing since it should be hidden.

finalSplide.mov

Reproduction Link

https://splidejs.com/

Steps to Reproduce

1. On homepage https://splidejs.com/ navigate forward on "Multiple Slides"
2. With voiceover, navigate through the elements with CONTROL + OPTION + RIGHT-ARROW
3. Run into hidden ellipses that is read aloud as a text element

Expected Behaviour

Voiceover should skip

[NaotoshiFujita]

Hm, what character should I use?

[j10sanders]

Hi @NaotoshiFujita - Is there no way to have voiceover skip it entirely? Would there be a downside to putting aria-hidden="true" on the span?

[NaotoshiFujita]

It should not be hidden from screen readers to make the live region work.
https://splidejs.com/guides/accessibility/#live-region

If you disable the live option, the issue will go away.

Currently, I have no idea to solve the issue. The character should be recognized by screen readers but not announced. Major screen readers don't read "…", but voice over does 🤮
Maybe I should quit supporting the live region on mac os.

[j10sanders]

The live option is a great feature of this library: since I'd like to keep the functionality of announcing new slides, I don't want to disable it. Thanks for your work @NaotoshiFujita - this is the only issue I've had with the library. I'll see if I can find another solution to this problem.

By the way, the ellipses is also read by VoiceOver, along with the other new text, when you navigate with arrows.

[j10sanders]

I tried changing it to an empty string, but that doesn't seem to keep live-region working. Something like '' doesn't get read, live-region still works, but VoiceOver stops on the element and announces "Text field".

One option would be to put something less arbitrary for VoiceOver, such as end of carousel. What do you think @NaotoshiFujita ?

[NaotoshiFujita]

Right, an empty string (and \n, \t, etc...) does not trigger live region.

One option would be to put something less arbitrary for VoiceOver, such as end of carousel

Yes, that is one of solutions. But... I'd like to avoid inserting such a string if possible.

Well, can you try this branch when you have time, Jonathan?

npm i Splidejs/splide#live

[j10sanders]

Sure! I'm using react-splide but I can try this out soon.

[j10sanders]

splide3x.mov

I really like your idea here, and it works for when you navigate through the new items, but unfortunately "ellipses" is read 2 or 3 times when I click the forward arrow.

[NaotoshiFujita]

Mmm, your VoiceOver acts differently with mine 😮
I don't understand why it's reading ellipsis 3 times, since only 1 "ellipsis" exists in a carousel. I wonder where other 2 come from...

What if you disable live option and click the next arrow in your demo? VoiceOver speaks nothing?

[j10sanders]

right, then VoiceOver doesn't announce the new content.

[NaotoshiFujita]

I made another approach on the same branch(v4.0.4).

npm i Splidejs/splide#live

My VoiceOver seems working well for now. Can you please check it?

[j10sanders]

It works! Thanks so much. 🥳

Looking forward to the update in react-splide

[NaotoshiFujita]

Done! ✨

[j10sanders]

Thanks again