feat: add a countdown on sl-alert

[RoCat]

The goal is to add an optional visual effect to be able to know remaining time on toasts.

For my personal case its used on a 10s toast before a whole app refresh (after asynchronous backend stuff).
10s seemed too long to wait without a load bar.

I just added that bar using the same color than the top border as a "bottom border" of the toast.

related thread: #1618 (comment)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	May 13, 2024 9:27am

[claviska]

Thanks for the PR! Some feedback:

The timer resets on mouseover, which is desired, but it feels a bit janky. We should probably just pause the timer on mouseover and unpause it on mouseout to make it more smooth.

CleanShot.2024-02-29.at.11.36.46.mp4

We probably want to ensure the same border radius is being used (e.g. bottom left corner in this screenshot).

I also want to get @lindsaym-fa's opinion on the design, direction (should it go RTL or LTR; should it be configurable; etc.), and any accessibility concerns she may have with such a feature.

[lindsaym-fa]

Cool! That's a clean effect. I'll second @claviska's recommendations and add:

• Allowing the direction to be configurable would be a solid improvement. RTL is a great default, but LTR might be a better temporal representation in other contexts/languages.
• As-is, the countdown is only perceivable by sight. If we wanted to make this available to assistive tech, we might be able to leverage role="timer" along with a visually hidden text representation of the duration.

[RoCat]

The timer reset seemed awkward to me too, but i didn't wanted to change other things than just the countdown.
Do you want me to change the behavior in any case or just in case the countdown is enabled ?

For other points i'll change that no problem.

[RoCat]

I just amended my commit with changes.

• added LtR and RtL options to change the direction
• added role="timer" counter to be able to use assistive tech
• change time behavior to not reset but pause on mouse enter and resume on mouse leave
• added some documentation

I made my best about the border radius, but cannot be exactly the same as the top border but it seems reasonably similar to me now.
Let me know if you need more changes in the way I implemented this.

[RoCat]

Any feedback ? ^^

[lindsaym-fa]

Thanks, @RoCat! I'm liking the new pause behavior and the border radius adjustment. A few things to consider:

• 🐛 When I mouse over then out of any alert without the duration property, the alert closes.
• I imagine we want LtR and RtL to be lowercase (ltr and rtl) to match the case of other SL properties.
• With countdown="LtR", the countdown starts depleted and fills with the variant color, whereas with countdown="RtL", the countdown starts filled and depletes as time runs down. I would think we'd want the countdown to start filled and deplete as time runs down in both cases, just in different directions. What are your thoughts?

Normally, I'd also suggest using sl-visually-hidden for alert__timer instead of a div with display: none; since display: none; effectively hides content from assistive tech. However, doing so leads to some unexpected/undesired screen reader behavior, at least in VoiceOver. There are some other potential accessibility adjustments that may need to be made in order to fix that up, which we can dig into separate from this PR.

[RoCat]

commit amended with:

• fixed: mouse out will no more hide the alert if duration is infinity
• changed: RtL and LtR set to lower case
• changed: ltr animation now starts filled and deplete from left to right

Got a lot of work so I couldn't have made these changes earlier. Let me know if I missed something!