AlpineJS blocks VoiceOver status udpate #4477
Replies: 1 comment
-
|
it's an odd behaviour. For me, it doesn't work even without Alpine when using an Re Alpine, on load it does a document.querySelectorAll looking for For your use case, it shouldn't do anything but I think it's the only thing that could interfere with your code. |
Beta Was this translation helpful? Give feedback.
-
I’m having the weirdest issue combining AlpineJS, VoiceOver, and
role="status"in an<h2>element. VoiceOver enunciates any change in an element withrole="status". It works perfectly in VanillaJS. But as soon as I include AlpineJS (even without converting any other portion of code to AlpineJS), it no longer works.Video
I made a video to best demonstrate this bug.
alpinejs-voiceover-bug-1280.mp4
Video transcription
Me: Hi ! So I’ve got this bug with VoiceOver and AlpineJS. I've got a checkbox here. And the expected behavior is that when I check this, it's gonna read the hidden text that’s inside the
<h2>element right there. And this text is going to be updated whenever I’ve got some change on the checkbox itself. This is just regular JavaScript. This is to show you the expected behavior in JavaScript. Let’s see what VoiceOver is doing right now.VoiceOver: “Gratuit uniquement”, unchecked, checkbox. “40 évènements trouvés.”
VoiceOver: “Gratuit uniquement”, checked, checkbox. “20 évènements trouvés.”
Me: So VoiceOver is correctly able to enunciate the content of this
<h2>element thanks to therole="status"that's inside. Now I'm just going to simply include the AlpineJS script inside my content. And that's all I'm doing. I'm still working with vanilla JavaScript right here. I'm just waiting for everything to be refreshed. Normally that's ok. And now I'm going to do the same test again.VoiceOver: “Gratuit uniquement”, checked, checkbox.
VoiceOver: “Gratuit uniquement”, unchecked, checkbox.
Me: So now VoiceOver only reads the default content that was on the page when it first loaded. It's no longer able to udpate with this content right there. That's just with embedding the AlpineJS script. Not doing anything further. The weirdest thing is that when I change this
h2element to apelement like so.VoiceOver: “Gratuit uniquement”, unchecked, checkbox. “40 évènements trouvés.”
VoiceOver: “Gratuit uniquement”, checked, checkbox. “20 évènements trouvés.”
Me: Everything works again. So I really don't understand what's going on. Thank you for listening and thanks for your help.
How to reproduce this bug
Steps to reproduce:
Expected result:
VoiceOver should announce the text updated in JavaScript (either “20 évènements trouvés” if the checkbox is checked or “40 évènements trouvés” otherwise).
Actual result:
VoiceOver announces “évènements trouvés”. This is the default content in the
role="status"element.How to fix
Removing AlpineJS from the CodePen linked above fixes the issue. In CodePen, open the HTML settings modal (the gear icon of the HTML tab). Remove the
<script src="//unpkg.com/alpinejs" defer></script>in the “Stuff for<head>” field.Another potential fix is to replace the
<h2 class="heading sr-only">by a<p class="heading sr-only">(or even a<div class="heading sr-only">).Explanation
I would love to get an explanation on this and to understand what AlpineJS does on load that breaks this basic browser behavior. And ideally a fix that doesn't require the change of semantic.
Beta Was this translation helpful? Give feedback.
All reactions