mi6
Auto-dismiss toast manual dismiss behaviour
Summary
Auto-dismissing toasts use a countdown timer before they dismiss. The countdown time is presented as a determinate loading indicator. Screen readers announce the loading indicator as 'loading' which is unnecessary for auto-dismiss toasts.
Additionally, if a mouse user wants to get rid of the toast before the countdown, there is no way to manually dismiss it, and interacting with the toast resets the countdown timer. This leads to a frustrating experience.
💬 Description
Auto-dismiss toasts should display their countdown timer, but when a user hovers over the toast, the timer should be reset, and the loading indicator should be replaced with an dismiss icon button, similar to the default toast. This allow a user to manually clear the toast without waiting for the countdown timer.
If the user then moves their mouse away from the toast and it is therefore no longer hovered, then the loading indicator should return with the countdown timer reset.
When using a SR, when an auto-dismiss toast is displayed, then its contents should be announced as a live region. However, the loading indicator announcement of 'loading' should be suppressed.
For example, an auto-dismissing toast that reads 'Copied to clipboard' should be announced only as 'Copied to clipboard', and not as 'Copied to clipboard, loading'.
💰 Use value
Improves usability for mouse users, and reduces verbosity for SR users.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that a user is navigating using a SR and an auto-dismiss toast is triggered When the toast is displayed Then the SR should announce its contents, but should not announce the loading indicator accessible label of 'loading'.
Given that an auto-dismiss toast is visible and its countdown is active, When a user hovers over the toast with a mouse then the dismiss countdown should be reset, and the loading indicator should be replaced by a dismiss icon button.
Given that an auto-dismiss toast is being hovered over and the dismiss button is displayed When clicking the dismiss button Then the toast should be dismissed.
Given that an auto-dismiss toast is being hovered over and the dismiss button is displayed When the mouse leaves the toast area Then the dismiss button should be replaced by the countdown loading indicator And the countdown timer should be reset and start again.
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Tell us anything else useful to help us understand your suggestion.
This was raised again when doing a screen reader review of our components. At the least, the live region aspect of this ticket should be carried out in V2 - and i believe we're not compliant to WCAG AA without implementing all the changes.
