feat: Add KSnackbar component and useKSnackbar composable by Prashant-thakur77 · Pull Request #1205 · learningequality/kolibri-design-system

Prashant-thakur77 · 2026-02-14T18:18:19Z

Description

This PR implements the core KSnackbar component and the useKSnackbar composable. This is Part 1 of the migration strategy, focusing on logic, accessibility, and unit testing. (Visual tests and documentation will follow in a subsequent PR).
I have followed the design descriptions given in https://design-system.learningequality.org/snackbars/

Key Features

KSnackbar Component (lib/KSnackbar/KSnackbar.vue):

Accessibility: Implements role="alert", dynamic aria-live ('polite'/'assertive'), and focus trapping when the backdrop is active.
Responsiveness: Uses useKResponsiveWindow to handle mobile vs desktop positioning.
Interactions: Supports action buttons, auto-hide timers, and manual dismissal.

Composable (lib/composables/useKSnackbar/index.js):

Implements a singleton state pattern for global snackbar management.
Includes forceReuse logic for instant content updates.

Added comprehensive Unit Tests using @testing-library/vue.

Before/after screenshots

This is the testing that i have done in Playground.
Screencast From 2026-02-14 23-41-29.webm

Changelog

Description: Add KSnackbar component and useKSnackbar composable for globally-managed notifications with action buttons, auto-hide, backdrop mode, and full keyboard accessibility
Products impact: new API
Addresses: [Remove Vuetify from Studio] Snackbar studio#5445
Components: KSnackbar, useKSnackbar
Breaking: no
Impacts a11y: yes
Guidance: Import and use KSnackbar with the useKSnackbar composable to display global notifications. Place a single KSnackbar component at the root level of your app and bind it to snackbarState from useKSnackbar. Call createSnackbar() from anywhere to display notifications. The component uses useKLiveRegion for screen reader announcements, supports keyboard navigation, and includes focus management with backdrop mode.

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical and brittle code paths are covered by unit tests
The change is described in the changelog section above

Reviewer guidance

Is the code clean and well-commented?
Are there tests for this change?
Are all UI components LTR and RTL compliant (if applicable)?
Add other things to check for here

Comments

learning-equality-bot · 2026-02-14T18:18:53Z

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

You ran pre-commit locally
All issue requirements are satisfied
The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

MisRob · 2026-02-23T10:53:49Z

lib/composables/useKSnackbar/__tests__/index.spec.js

Nice, thanks

MisRob · 2026-02-23T10:58:53Z

lib/composables/useKSnackbar/index.js

+  queue.value = [];
+}
+
+function initVuexBridge(store) {


What was the reason for this logic?

Asking because I wouldn't expect Vuex-compatibility to be needed ~ the idea is to migrate both Studio and Kolibri to KSnackbar + useKSnackbar where useKSnacbkar is the place which will keep the state rather than relying on Vuex. During migration, we'll cleanup all obsolete Vuex code from Kolibri and Studio.

Here's an example of a composable acting as global store

https://github.com/learningequality/kolibri/blob/develop/packages/kolibri/composables/useSnackbar.js#L4-L12

You may need to tweak to fit all features of this KDS implementation, but the main idea is same.

MisRob · 2026-02-23T11:09:47Z

lib/KSnackbar/KSnackbar.vue

+        ref="snackbarElement"
+        class="k-snackbar"
+        :class="$computedClass(focusStyles)"
+        role="alert"


Can you please remove alert role and aria-live from everywhere here and instead use https://design-system.learningequality.org/usekliveregion?

You can see 'The Value Add' section of #668 to understand its benefit over having multiple live regions on a page.

To explain, this role would create a live region too

Alerts are assertive live regions. Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

MisRob · 2026-02-23T11:14:36Z

lib/KSnackbar/KSnackbar.vue

+      },
+    },
+
+    computed: {


Since most of the logic already is placed in setup, it may make more sense to also move computed + methods there.

And generally we're trying to move towards Composition API setup in all new features, even though I admit we're not always diligent in that regard, myself included :)

MisRob · 2026-02-23T11:18:23Z

Hi @Prashant-thakur77, wonderful work as always & I enjoyed watching the recording. I left a few higher-level notes. We'll proceed as discussed here ~ let me know any time you're ready. Thanks a lot.

Prashant-thakur77 · 2026-02-23T11:20:17Z

@MisRob Sure, currently working on it and will also work on your review.;)

- Move snackbars.vue to design guidelines only (like buttons.vue) - Create new ksnackbar.vue for component-specific documentation - Remove KSnackbar example and useKSnackbar logic from snackbars.vue - Add complete props, events, and usage examples to ksnackbar.vue - Update related section to link to both KSnackbar component and useKSnackbar composable

- Add KSnackbar to Code library components section - Add useKSnackbar to Composables section - Both sections use autoSort, so entries will be alphabetically sorted

Prashant-thakur77 · 2026-03-03T07:38:47Z

@AlexVelezLl @MisRob I have created the visual tests and documentation and pushed it,the talk on slack related to specifications i have currently used the one given by kds (and took care for the colors --used the one mentioned in kds color section). I have also tried implementing the ksnackbar in studio and it is working as expected.I think the review can be started after the specifications are confirmed.do tell if any other changes are needed to be addressed.

Prashant-thakur77 had a problem deploying to percy_tests February 14, 2026 18:18 — with GitHub Actions Failure

Prashant-thakur77 had a problem deploying to percy_tests February 14, 2026 18:28 — with GitHub Actions Failure

MisRob mentioned this pull request Feb 16, 2026

[Remove Vuetify from Studio] Snackbar learningequality/studio#5445

Open

14 tasks

MisRob reviewed Feb 23, 2026

View reviewed changes

lib/composables/useKSnackbar/__tests__/index.spec.js

Copy link

Member

MisRob Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks

Prashant-thakur77 reacted with heart emoji

MisRob reviewed Feb 23, 2026

View reviewed changes

rtibbles assigned AlexVelezLl Feb 24, 2026

Prashant-thakur77 added 19 commits March 1, 2026 22:40

added the ksnackbar and useksnackbar composable

4f9c0b0

added test playground

b374676

updated ksnackbar

82b1560

updated the styling

460a3fe

Refined

cd2f057

Refined

381e5ed

Refined

274f093

Updated the ksnacbar to handle kolibri and studio

05e9333

CReayed proper folders for the ksnacbar and its composable

552d05a

made test file for useksnakbar

c4f759d

Made ksnackbar test file

2ea52b2

Reverted playgorund

3e93dc5

ran lint

3109f95

Made visual tests and documentation

cbc52d9

Adding documentation

33903cf

Add KSnackbar and useKSnackbar to documentation navigation

df7f91d

- Add KSnackbar to Code library components section - Add useKSnackbar to Composables section - Both sections use autoSort, so entries will be alphabetically sorted

Complete KSnackbar implementation

9b15d34

Added z index for the ksnabar docs page

f97eb7a

Prashant-thakur77 added 5 commits March 2, 2026 11:24

AddeFInalizing the examples

8e8dd97

UPdated

1c567e5

UPdated

74382fa

Visual tests

94b0a82

Finalixing the tests

5e4d4db

Prashant-thakur77 force-pushed the ksnackbar branch from eb4588a to 5e4d4db Compare March 2, 2026 09:51

Prashant-thakur77 requested a deployment to percy_tests March 2, 2026 09:51 — with GitHub Actions Waiting

fixing lint

57048cf

Prashant-thakur77 requested a deployment to percy_tests March 2, 2026 10:10 — with GitHub Actions Waiting

Prashant-thakur77 added 7 commits March 2, 2026 17:06

Alinment

0266702

Updating the ksnabar

06575be

Added the onblur and autofocus functionality

6ac45ce

updated to match the existing chnages

2858d16

Corrected index

2b73e85

made the tes prop required

1941da2

made the isopen prop required

4590818

Prashant-thakur77 requested a deployment to percy_tests March 3, 2026 07:29 — with GitHub Actions Waiting

done

029cdfa

Prashant-thakur77 requested a deployment to percy_tests March 8, 2026 06:24 — with GitHub Actions Waiting

Removed click event

0cb1724

Prashant-thakur77 requested a deployment to percy_tests March 8, 2026 12:14 — with GitHub Actions Waiting

Prashant-thakur77 added 2 commits March 8, 2026 18:07

removed click event test

977babe

lintign

077b123

Prashant-thakur77 requested a deployment to percy_tests March 8, 2026 12:49 — with GitHub Actions Waiting

Conversation

Prashant-thakur77 commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key Features

Before/after screenshots

Changelog

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

Reviewer guidance

Comments

Uh oh!

learning-equality-bot bot commented Feb 14, 2026

Uh oh!

MisRob Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Prashant-thakur77 Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Prashant-thakur77 Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Prashant-thakur77 Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

MisRob commented Feb 23, 2026

Uh oh!

Prashant-thakur77 commented Feb 23, 2026

Uh oh!

Prashant-thakur77 commented Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Prashant-thakur77 commented Feb 14, 2026 •

edited

Loading

MisRob Feb 23, 2026 •

edited

Loading

MisRob Feb 23, 2026 •

edited

Loading