Timeout dialog doesn't read out heading in VoiceOver

[edwardhorsford]

I'm doing some quick ad-hoc testing of the timeout dialog in Voiceover on Safari on Mac and iOS.

In both, when the dialog is shown, the paragraph gets read out, but not the heading. My expectation is that the heading should get read out too - at least on first load.

Possibly relevant, I note the paragraph gets aria-live="assertive" but the h1 does not.

[shabana-ali]

Hi @edwardhorsford

I just did a quick test with VoiceOver and Safari (Version 17.5). On load it read out "You’re about to be signed out". Is that what is not being announced for you?

Screen.Recording.2024-07-08.at.17.29.23.mov

Apologies - not had chance to test with iOS.

My understanding for the aria-live="assertive" on the paragraph is to announce the count down when it changes (at 20 second increments).

[edwardhorsford]

@shabana-ali For voiceover on Mac and iOS I have not heard it read out the h1.

[edwardhorsford]

@shabana-ali Here's a recording of VoiceOver on iOS. The mac was similar.

RPReplay_Final1720522598.mov

[edwardhorsford]

I've tried various combinations of aria-live="polite" and aria-live="assertive" on the heading, and it never gets read out on iOS if the second paragraph has any form of aria-live. I might suspect this could be a bug with VoiceOver on iOS and multiple aria-live regions.

[edwardhorsford]

Thread here on issues with multiple live regions, including this line:

BTW I have also experienced the VO issue where live regions upstage each other completely.

I think this isn't a major bug though - as the paragraph in isolation already gives a clear message about what is going on.

A possible solution would be to make the heading hidden from screen readers, and include the existing heading in the audible message the first time it gets rendered.

[ashfaqhussain357]

Hi @edwardhorsford, is this still an issue? The last time we spoke you mentioned you were going to test this with a combination screen readers.

[edwardhorsford]

Hi @ashfaqhussain357 yes I think so. It's not a huge issue as a meaningful message is still read out, but the first heading gets missed.

I suspect the solution is to refactor how these messages work. From my research, I think there should only be a single live region that gets updated. So I feel like a refactor could have a single live area that initially gets the heading and paragraph inserted in to it, then later just the paragraph.

[oscarduignan]

I don't know if anything has changed recently (and it has been a while between, so apologies it's taken so long to get to working on this fix) but we were just testing this out and we can't recreate the bug at the moment, video attached

We will still go ahead with our planned fix though, where we will initially create the audible message without aria-live="assertive" and only add aria-live="assertive" when it's updated

At the end of the video you'll see I try tabbing and it doesn't let me tab to the sign out link, I thought this might be a bug, but in further testing I remembered that safari changes how tabbing works by default, so I think that's it. Where I have recently changed my computer, and haven't yet unticked the setting to not mess with how tabbing works 👍 just disclaiming it for anyone watching the recording who, like me, had forgotten about this because they don't often use safari

CleanShot.2025-01-23.at.15.23.17.mp4

[oscarduignan]

We tried leaving out the aria-live="assertive" on first render, but testing that, it seems like then it doesn't announce the updates. I don't have a very deep understanding of aria-live, so maybe it's correct that it needs to be present on the element when the element is added to the page for future changes to be announced, or maybe there's something else going on. Two recordings, first without devtools open, second with devtools open showing how the message is updated

CleanShot.2025-01-23.at.15.40.34.mp4

CleanShot.2025-01-23.at.15.46.21.mp4