♿Add alert role to toast for screen reader support

[jackbsteinberg]

Adds the alert role to toasts so screen readers assertively announce the content when the toast is displayed.
Resolves #24805

[amp-owners-bot]

Hey @newmuis, these files were changed:

• extensions/amp-story/1.0/toast.js

[jackbsteinberg]

I've got a few questions I want to answer before I'd be satisfied calling this ready to merge.

First, how should I test this? I ran the test-amp-story test suite and nothing seemed to break but I'm not sure if there's an accessibility testing pipeline I should be looking at.

Second, I chose status because it announces the content to screen readers politely (i.e. waits for whatever content is currently being read to finish before announcing its content), since I assume the toasts are low priority for the user to get to in this context. If that's not the case let me know and I should change the role to alert.

Context: Toast roles, status role, alert role

[lgtm-com]

This pull request introduces 1 alert when merging 94c6694 into 8370cee - view on LGTM.com

new alerts:

• 1 for Superfluous trailing arguments

[amp-owners-bot]

Hey @newmuis, these files were changed:

• extensions/amp-story/1.0/toast.js

[newmuis]

I am by no means an expert, but I think we might want to consider alert here? It's quite possible that there's a lot of content in the bookend (the optional last screen of the story used for sharing and related articles), so if all you want is the link, it might be inconvenient to wait for that all to be read out.

The code change LGTM, just wondering about the role itself.

[jackbsteinberg]

I am by no means an expert, but I think we might want to consider alert here? It's quite possible that there's a lot of content in the bookend (the optional last screen of the story used for sharing and related articles), so if all you want is the link, it might be inconvenient to wait for that all to be read out.

The code change LGTM, just wondering about the role itself.

The guidelines for this pretty much allow you to choose which makes more sense in the context. If the toast content is the content we want to call attention to immediately, then alert likely makes more sense.

[amp-owners-bot]

Hey @newmuis, these files were changed:

• extensions/amp-story/1.0/toast.js

[jackbsteinberg]

Update: I tried this with a the macOS VoiceOver screen reader and it seems to be working well