button to announce remaining time on test

[Alex-Jordan]

See revised description two posts below.

First, this adds a button under the Gateway Test countdown clock that says "Announce time remaining". If that button is pushed, a visually hidden div is updated with the current amount of remaining time. This div is an aria-live region, and a screen reader user will hear the time.

The button itself should not be visually hidden. So there is a bit of an oddity here for sighted users who see this button and might think it does nothing. Are there any suggestions for improving that?

Now we have a button for a user to ask "How much time do I have left?" This means that the timer itself can be safely hidden to screen readers. So it is.

As usual, I haven't had success actually trying a screen reader to hear that this works. Related, I am not 100% sure that the time amount is formatted in a helpful way (e.g. "5 minutes", not "300 seconds"). But I am guessing that formatTime handles that well.

[Alex-Jordan]

Claude suggests that clicking the button could trigger the toast that we already have. I'm gong to try that and update here if it seems good.

[Alex-Jordan]

First, this adds a button under the Gateway Test countdown clock that says "Announce time remaining". If that button is pushed, there is a toast with the current amount of remaining time. This is an aria live region, and a screen reader user will hear the report.

Now we have a button for a user to ask "How much time do I have left?" This means that the timer itself can be safely hidden from screen readers. So it is.

This also potentially resolves an issue with the toasts that already exist (at 90 seconds, 45 seconds, and 0 seconds) where some screen readers were not announcing them. The issue might have been that the toast was inserted into the DOM fully constructed. Instead, inserting it empty, then updating it with content is the reliable way to get all (working) screen readers to read the update.

As usual, I haven't had success actually trying a screen reader to directly hear that this works.

[Alex-Jordan]

And this makes one small styling improvement about rounded corners on the alert toasts that already existed.