Toast > Remove actions from toast content
| Problem | Solution |
|---|---|
| Toast is placed near the bottom of the DOM, making it difficult to move focus there fast enough to access the controls before timeout. This violates WCAG Success Criterion 2.2.1 Timing Adjustable. | Don't include actions (link, button) within the toast message (section with role="status"). |
| Toast can have critical actions in it. For example, "Undo". I think this would be a failure of WCAG SC 2.2.1 Timing Adjustable, since a user couldn't adjust timing to access critical functionality. The toast doesn't (and shouldn't) receive focus, so again, anything interactive within the toast isn't easily accessed. It's also problematic because status content is announced as a single string and the link/action will have no semantic meaning. | Don't include actions (link, button) within the toast message (section with role="status"). Any critical action/function should be available on the page with no time limitations. |
| Close button is before the toast content in the DOM, so it get's announced first. | Keep the close button outside of the role="status" and place at the end. See this example where the close button is placed outside of the role="status". This allows sighted mouse users to still dismiss the toast before the timeout, but the button doesn't need to be announced by a screen reader. |
Edited by Jeremy Elder