[Remove Vuetify from Studio] Snackbar

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: High

Summary

While tracked in Studio repository as part of KDS migration, this issue includes work in all Kolibri, Studio, and KDS.

In KDS, we have a private UiSnackbar component that we use for Kolibri's CoreSnackbar and GlobalSnackbar. In Studio, we have another GlobalSnackbar, but built around Vuetify's VSnackbar that we need to migrate away from.

The goal of this issue is to unify all our snackbar logic in KDS KSnackbar component + useKSnackbar composable and then use them in both Kolibri and Studio instead of the aforementioned components.

KDS

• Copy UiSnackbar and rename it to KSnackbar (it's important to preserve the original UiSnackbar to prevent from breaking change in Kolibri)
• Remove unused Keen logic and naming (ui-) from KSnackbar, if any
• Add features to support everything that both Kolibri's CoreSnackbar + GlobalSnackbar and Studio's GlobalSnackbar support
• Make KSnackbar to utilize useKLiveRegion so that in Kolibri, we can cleanup usages like

<div aria-live="polite">
  <GlobalSnackbar />
</div>

(improves a11y by resolving some parts of learningequality/kolibri#12326)

• Ensure a11y features (e.g. focus / blur in Kolibri) to not get lost
• Also move Kolibri's useSnackbar to KDS as useKSnackbar. If Studio has any additional features related to showing/hiding snackbar and its format, add them too.
• Add unit tests for useKSnackbar and core logic of KSnackbar. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).
• Add visual tests for KSnackbar
• Add documentation pages for KSnackbar and useKSnackbar

Studio

• Replace GlobalSnackbar and vuex/snackbar by KDS KSnackbar and useKSnackbar
• Ensure no regressions in user experience

Kolibri

• Replace CoreSnackbar + GlobalSnackbar and useSnackbar by KDS KSnackbar and useKSnackbar
• Cleanup unnecessary live regions related to global snackbars
• Ensure no regressions in user experience

Guidance

Some useful context from @AlexVelezLl for focus / blur (implemented in Kolibri):

I tried to implement the "return focus" action as focusing the last active element before the snackbar was shown just as we do in other places, but this didn't work well with snackbars because these snackbars many times are shown when the operation is complete, but if this operation comes from a modal (kmodal or side panel modal), then the focus is lost, because the last focused element is already unmounted when the snackbar is closed. That's why I treated it as an "onBlur" handler that was called either after the user press the tab key, or when the snackbar disappeared because of the timeout.

User experience should be preserved, but the implementation can be likely simplified during this refactor, as per Alex's:

I had to do it with directives just to avoid updating many parts of the UISnackbar that I suspected was going to be migrated at some point. But in theory I think this could be achieved using regular Vue props/event handlers.

[MisRob]

Reserved for @GarvitSinghal47

[GarvitSinghal47]

@MisRob You can go ahead and assign this one to me 📦

[MisRob]

Good news, thanks a lot @GarvitSinghal47. We'll be in touch.

[MisRob]

@GarvitSinghal47 I only put 'help wanted' here so I can track it a bit better - the assignment still applies! Thank you.

[learning-equality-bot]

Automatically unassigning @GarvitSinghal47 due to no comments here, or updates on the associated pull request for 1 month. @GarvitSinghal47, if you're still interested in this issue or already have work in progress, please message us here, and we'll assign you again. Thank you!