search

hmrc / hmrc-frontend

Apache License 2.0
9 stars 19 forks source link

Timeout dialog doesn't read out heading in VoiceOver #387

Open edwardhorsford opened 4 months ago

edwardhorsford commented 4 months ago

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. Screenshot 2024-07-08 at 15 59 37

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

shabana-ali commented 4 months ago

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?

https://github.com/hmrc/hmrc-frontend/assets/59563139/58c48fd3-a5e5-47e0-a262-14365bbdf1ad

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 commented 4 months ago

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

edwardhorsford commented 4 months ago

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

https://github.com/hmrc/hmrc-frontend/assets/2204224/02380eda-669b-4cd5-ba60-8b4527499d15

edwardhorsford commented 4 months ago

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 commented 4 months ago

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 commented 2 months ago

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 commented 2 months ago

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.