Gabriel Weinberg Carla Duarte (Deactivated) Adam Butterworth (Deactivated)

https://openedx.atlassian.net/browse/PAR-170 https://openedx.atlassian.net/browse/PAR-289

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7583%3A878

https://paragon-edx.netlify.app/components/toast

withAction
Toast has an optional button to be used for optional actions related to the actions that triggered the Toast. For example, if Toast is triggered after the learner shifts their due dates, you could offer them an optional link to view the new dates

False, True

Background: Gray 700

Font: Small Paragraph

Icon Button(Dark Palette)

Icon: Close

Optional Button, Secondary, Small, Dark

Corner radius: Radius 1 (4px)

Z Index: Top-most layer

Positioning: Bottom, Left

Auto-dismiss

Toast automatically dismisses after 5 seconds by default.

Disable timer:

• On hover of the Toast container

• On hover or focus of dismiss icon or optional button

Re-enable timer:

• On mouse leave of the Toast container

• On blur of dismiss icon or option button

Auto-dismiss timer: 5 - 15 second range

Animation when Toast is triggered

Fade-in duration: 500ms
Animation-timing-functions: ease-out
Keyframes:

• from bottom -20px

• to bottom 0px

Animation when Toast is dismissed or auto-dismissed

Fade-out duration: 200ms
Animation-timing-functions: ease-out
Keyframes:

• from bottom 0px

• to bottom 0px

Focus Management Expectations


The X should be a <button >with aria-label=”Close”.

It’s best if the whole message container appear near the top of the DOM though it may physically be anywhere on screen.

For urgent or modal messages, focus should be set on the container and then return to the previous origin when dismissed.

Persistence

Important messages may auto-dismiss after 5s if they can be located again. If they can’t be located again, they should persist until dismisses.

The persistence timer should stop if, on focus of any element in the snackbar, or on hover over the snackbar. The snackbar should not auto-dismiss while the user is attending to it.


Animation Behaviors

Subtle (<2s) transition animations on open or close are OK.

Semantics

A snackbar with no controls other than the close button should have role=”note”, role=”status”, or role=”alert” depending on the message urgency (are you intending to interrupt the user? Then it’s an alert.)

A snackbar with controls other than the close button should have role=”dialog” or role=”alertdialog” depending on the message urgency.