Default Toast Duration

[jackbsteinberg]

What should be the default duration to make sure the toast is accessible? Some cursory searching for heuristics suggest 3s + 60ms per character, 3s * $duration_paused, 3.5s, etc.

Is there an established heuristic to follow?

[shwilliam]

I really like the idea of the default duration taking into account text length, and using 3s as a minimum seems reasonable.

Android's native toast implementation allows two fixed durations of 200ms and 350ms.

[jackbsteinberg]

After having spent some time looking into accessibility concerns it seems to me that the current default of 2000ms is too short. Furthermore, having an action-toast disappear while you intend to interact with it is another accessibility failure.

To begin to ameliorate these, by default the toast will pause its timeout upon mouse hover or keyboard focus, until the mouse or focus leaves [PR in the works]. It will also now default to 3000ms instead of 2000ms (#41), but this will still be an area of exploration. Specifically with respect to having the default timeout depend on the number of characters - it seems like a potentially exciting solution, but I want to investigate further and see what that looks like in some demos.

Does anyone know if there is an established pattern for measuring the number of characters in a text node and using that to affect it’s HTML element parent?

[fergald]

I don't know an existing example but please beware that just counting characters is going to have very different results in e.g, German vs Chinese.

[shwilliam]

@fergald raises a good point. Another option would be to count words/symbols rather than characters to somewhat accommodate for this. However, perhaps the differences in "read time" per character/word/symbol between languages justifies the use of fixed duration(s).

[aardrian]

I am wary of leaning on other libraries for guidance on accessibility. SalesForce's Lightning Design System is not accessible, despite its assertions to the contrary (the first clue is that it cites 18 principle design patterns, but only has 5, which it copied from the APG and which under their own review at the APG).

I talk about duration a bit in #29. You don't need to make this up from scratch, you can lean on WCAG Success Criterion 2.2.1 Timing Adjustable, which is Level A (the minimum for supporting users). The Understanding document provides a bunch more context, but I have cherry-picked a couple items:

• Turn off: The user is allowed to turn off the time limit before encountering it; or
• Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or

In other words, authors (or the User Agent) may need to provide a method to adjust (or disable) any time limits.

Beyond that, spend some time reading all the SCs under WCAG 2.2 Enough Time. I think some research is linked in there if you dig. If not, you can ask the individual WCAG teams for their research.

[domenic]

Continuing from #18 (comment), where we're tentatively setting a default duration of Infinity for warning/error toasts.

I think we should also set a default duration of Infinity for toasts with actions.

This won't always be possible for a site to observe; the classic example is the "Undo send" feature of web mail clients, which work by holding your email for a limited period of time before actually sending it out into the ether. In such cases the feature is, by necessity, not available for an infinite duration. But I still think it's a good idea to make them explicitly override the default behavior when they need to implement such exceptional experiences.