From 892fda1f3bf78491ead35a4804e3580ba98edeb6 Mon Sep 17 00:00:00 2001
From: Monier Ayman <monierayman2007@gmail.com>
Date: Thu, 17 Sep 2026 20:40:26 +0300
Subject: [PATCH 1/6] Migrate Studio snackbar to KDS

---
 .../components/ClipboardChip.vue              | 13 +++-
 .../sidePanels/ReviewSubmissionSidePanel.vue  | 26 +++++--
 .../pages/Channels/ChannelActionsDropdown.vue | 54 +++++++++++--
 .../pages/Channels/ChannelItem.vue            | 19 ++++-
 .../pages/Channels/ChannelTable.vue           | 17 +++-
 .../__tests__/channelActionsDropdown.spec.js  | 14 +++-
 .../pages/Users/EmailUsersDialog.vue          | 19 ++++-
 .../pages/Users/UserActionsDropdown.vue       | 41 ++++++++--
 .../pages/Users/UserDetails.vue               | 16 +++-
 .../pages/Users/UserStorage.vue               | 13 +++-
 .../administration/pages/Users/UserTable.vue  | 27 +++++--
 .../Users/__tests__/emailUsersDialog.spec.js  | 21 ++---
 .../Clipboard/ContentNodeOptions.vue          | 22 ++++--
 .../components/Clipboard/index.vue            | 30 +++++--
 .../components/ContentNodeEditListItem.vue    | 18 ++++-
 .../components/ContentNodeOptions.vue         | 34 ++++++--
 .../QuickEditModal/EditAudienceModal.vue      | 15 +++-
 .../QuickEditModal/EditBooleanMapModal.vue    | 13 +++-
 .../QuickEditModal/EditCompletionModal.vue    | 15 +++-
 .../QuickEditModal/EditLanguageModal.vue      | 18 +++--
 .../QuickEditModal/EditSourceModal.vue        | 15 +++-
 .../EditTitleDescriptionModal.vue             | 15 +++-
 .../__tests__/EditAudienceModal.spec.js       | 12 ++-
 .../__tests__/EditBooleanMapModal.spec.js     | 12 ++-
 .../__tests__/EditLanguageModal.spec.js       | 15 +++-
 .../__tests__/EditSourceModal.spec.js         | 20 ++---
 .../EditTitleDescriptionModal.spec.js         | 11 ++-
 .../RelatedResourcesTab.vue                   | 20 ++++-
 .../channelEdit/components/ResourcePanel.vue  | 10 ++-
 .../channelEdit/components/move/MoveModal.vue | 15 +++-
 .../sidePanels/PublishSidePanel.vue           | 10 ++-
 .../index.vue                                 | 27 ++++---
 .../channelEdit/pages/AddNextStepsPage.vue    | 13 +++-
 .../pages/AddPreviousStepsPage.vue            | 13 +++-
 .../pages/StagingTreePage/index.spec.js       | 10 ++-
 .../pages/StagingTreePage/index.vue           | 22 +++++-
 .../channelEdit/views/CurrentTopicView.vue    | 33 +++++---
 .../ImportFromChannels/SavedSearchesModal.vue | 13 +++-
 .../SearchOrBrowseWindow.vue                  | 50 ++++++++----
 .../ImportFromChannels/SearchResultsList.vue  | 13 +++-
 .../__tests__/SearchOrBrowseWindow.spec.js    | 14 +++-
 .../views/TreeView/TreeViewBase.vue           | 13 +++-
 .../views/files/FileUploadItem.vue            | 11 ++-
 .../views/progress/ProgressModal.vue          | 13 +++-
 .../channelEdit/views/trash/TrashModal.vue    | 12 ++-
 .../views/trash/__tests__/trashModal.spec.js  | 13 +++-
 .../channelList/views/Channel/CatalogList.vue | 17 +++-
 .../views/Channel/ChannelInvitation.vue       | 15 +++-
 .../channelList/views/Channel/ChannelItem.vue | 20 ++++-
 .../channelList/views/Channel/ChannelStar.vue | 16 +++-
 .../__tests__/DeleteChannelModal.spec.js      | 16 ++--
 .../Channel/DeleteChannelModal/index.vue      | 13 +++-
 .../RemoveChannelFromListModal.spec.js        | 16 ++--
 .../RemoveChannelFromListModal/index.vue      | 13 +++-
 .../__tests__/StudioMyChannels.spec.js        | 10 ++-
 .../__tests__/StudioStarredChannels.spec.js   | 10 ++-
 .../__tests__/StudioViewOnlyChannels.spec.js  | 10 ++-
 .../channelList/views/ChannelListIndex.vue    | 11 ++-
 .../views/ChannelSet/ChannelSetModal.vue      | 12 ++-
 .../ChannelSet/StudioCollectionsTable.vue     | 18 ++++-
 .../__tests__/StudioCollectionsTable.spec.js  |  4 +-
 .../__tests__/channelSetModal.spec.js         |  4 -
 .../pages/Account/ChangePasswordForm.vue      | 20 ++++-
 .../settings/pages/Account/FullNameForm.vue   | 19 ++++-
 .../frontend/settings/pages/Account/index.vue | 12 ++-
 .../settings/pages/Storage/RequestForm.vue    | 18 ++++-
 .../settings/pages/__tests__/account.spec.js  | 15 +++-
 .../contentcuration/frontend/shared/app.js    |  2 -
 .../composables/__mocks__/useSnackbar.js      | 26 -------
 .../shared/composables/useSnackbar.js         | 30 -------
 .../frontend/shared/composables/useToken.js   | 24 +++++-
 .../frontend/shared/views/CopyToken.vue       | 20 ++++-
 .../frontend/shared/views/GlobalSnackbar.vue  | 78 +++++++------------
 .../useCommunityLibraryUpdates.spec.js        |  2 -
 .../composables/useCommunityLibraryUpdates.js | 10 ++-
 .../shared/views/NotificationsModal/index.vue | 10 ++-
 .../__tests__/studioCopyToken.spec.js         | 13 +++-
 .../shared/views/channel/ChannelModal.vue     | 12 ++-
 .../shared/views/channel/ChannelSharing.vue   | 12 ++-
 .../views/channel/ChannelSharingTable.vue     | 36 +++++++--
 .../__tests__/channelSharingTable.spec.js     | 14 +++-
 .../views/errors/TechnicalTextBlock.vue       | 18 ++++-
 .../frontend/shared/vuex/baseStore.js         |  2 -
 .../frontend/shared/vuex/snackbar/index.js    | 70 -----------------
 84 files changed, 1109 insertions(+), 429 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/composables/__mocks__/useSnackbar.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/composables/useSnackbar.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/vuex/snackbar/index.js

diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
index 3268f55f25..0455683633 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -26,8 +26,14 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   export default {
     name: 'ClipboardChip',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: String,
@@ -47,7 +53,12 @@
       copyToClipboard() {
         if (this.clipboardAvailable) {
           navigator.clipboard.writeText(this.value).then(() => {
-            this.$store.dispatch('showSnackbarSimple', this.successMessage);
+            this.createSnackbar({
+              text: this.successMessage,
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
index 08fd08a06b..f869ba4ac4 100644
--- a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
@@ -241,6 +241,7 @@
 
   import { computed, ref, watch, getCurrentInstance } from 'vue';
   import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   import camelCase from 'lodash/camelCase';
 
@@ -271,6 +272,7 @@
       CommunityLibraryStatusChip,
     },
     setup(props, { emit }) {
+      const { createSnackbar } = useKSnackbar();
       const isModalVisible = ref(true);
       const tokensTheme = themeTokens();
       const paletteTheme = themePalette();
@@ -471,10 +473,6 @@
         }
       });
 
-      function showSnackbar(params) {
-        return store.dispatch('showSnackbar', params);
-      }
-
       function updateStatusInStore(newStatus) {
         return store.commit('channel/UPDATE_CHANNEL', {
           id: props.channel.id,
@@ -507,20 +505,30 @@
                 ? 'Submission approved'
                 : 'Submission flagged for review';
 
-            showSnackbar({ text: snackbarText });
+            createSnackbar({
+              text: snackbarText,
+              duration: 6000,
+              announce: true,
+            });
             updateStatusInStore(statusChoice.value);
             emit('change');
             emit('close');
           } catch (error) {
-            showSnackbar({ text: 'Changing channel status failed' });
+            createSnackbar({
+              text: 'Changing channel status failed',
+              duration: 6000,
+              announce: true,
+            });
           } finally {
             currentlySubmitting.value = false;
           }
         }, submitDelayMs);
 
-        showSnackbar({
+        createSnackbar({
           text: 'Channel status is changing',
           duration: null,
+          autoDismiss: false,
+          announce: true,
           actionText: 'Cancel',
           actionCallback: () => {
             clearTimeout(timer);
@@ -531,8 +539,10 @@
             // on the component, and show the side panel in the same state if the user cancels
             isModalVisible.value = true;
             currentlySubmitting.value = false;
-            showSnackbar({
+            createSnackbar({
               text: 'Action cancelled',
+              duration: 6000,
+              announce: true,
             });
           },
         });
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
index 296c6025cd..ee38d81dfb 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -96,6 +96,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { RouteNames } from '../../constants';
   import { channelExportMixin } from 'shared/views/channel/mixins';
   import { CommunityLibraryStatus } from 'shared/constants';
@@ -107,6 +108,10 @@
       StudioBanner,
     },
     mixins: [channelExportMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
@@ -200,12 +205,22 @@
         this.activeDialog = null;
       },
       async downloadPDF() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
+        this.createSnackbar({
+          text: 'Generating PDF...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
         return this.generateChannelsPDF(channelList);
       },
       async downloadCSV() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating CSV...');
+        this.createSnackbar({
+          text: 'Generating CSV...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
         return this.generateChannelsCSV(channelList);
       },
@@ -214,7 +229,12 @@
           id: this.channelId,
           deleted: false,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel restored');
+          this.createSnackbar({
+            text: 'Channel restored',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       softDeleteHandler() {
@@ -222,13 +242,23 @@
           id: this.channelId,
           deleted: true,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel deleted');
+          this.createSnackbar({
+            text: 'Channel deleted',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       deleteHandler() {
         this.$emit('deleted');
         return this.deleteChannel(this.channelId).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently');
+          this.createSnackbar({
+            text: 'Channel deleted permanently',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       makePublicHandler() {
@@ -236,7 +266,12 @@
           id: this.channelId,
           isPublic: true,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel changed to public');
+          this.createSnackbar({
+            text: 'Channel changed to public',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       makePrivateHandler() {
@@ -244,7 +279,12 @@
           id: this.channelId,
           isPublic: false,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Channel changed to private');
+          this.createSnackbar({
+            text: 'Channel changed to private',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
index 37b46cd1bc..5a3034424d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
@@ -219,6 +219,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import ClipboardChip from '../../components/ClipboardChip';
   import CommunityLibraryStatusButton from '../../components/CommunityLibraryStatusButton.vue';
   import { RouteNames } from '../../constants';
@@ -229,6 +230,10 @@
 
   export default {
     name: 'ChannelItem',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ChannelActionsDropdown,
       ClipboardChip,
@@ -296,7 +301,12 @@
           id: this.channelId,
           demo_server_url: this.channel.demo_server_url,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Demo URL saved');
+          this.createSnackbar({
+            text: 'Demo URL saved',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       saveSourceUrl() {
@@ -304,7 +314,12 @@
           id: this.channelId,
           source_url: this.channel.source_url,
         }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', 'Source URL saved');
+          this.createSnackbar({
+            text: 'Source URL saved',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onCommunityLibraryButtonClick() {
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index 2dfdec7fae..460b6276be 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -141,6 +141,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { getCurrentInstance, onMounted, ref, computed, watch } from 'vue';
   import transform from 'lodash/transform';
   import { ChannelTypeFilter, RouteNames, rowsPerPageItems } from '../../constants';
@@ -184,6 +185,7 @@
     },
     mixins: [channelExportMixin, routerMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { proxy } = getCurrentInstance();
       const store = proxy.$store;
 
@@ -332,6 +334,7 @@
       });
 
       return {
+        createSnackbar,
         channelTypeFilter,
         channelTypeOptions,
         channelStatusFilter,
@@ -421,12 +424,22 @@
     methods: {
       ...mapActions('channelAdmin', ['getAdminChannelListDetails']),
       async downloadPDF() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
+        this.createSnackbar({
+          text: 'Generating PDF...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails(this.selected);
         return this.generateChannelsPDF(channelList);
       },
       async downloadCSV() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating CSV...');
+        this.createSnackbar({
+          text: 'Generating CSV...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const channelList = await this.getAdminChannelListDetails(this.selected);
         return this.generateChannelsCSV(channelList);
       },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
index f4bf9e91e0..dbea3c0750 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
@@ -5,6 +5,15 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import ChannelActionsDropdown from '../ChannelActionsDropdown';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -35,7 +44,6 @@ const mockActions = {
   updateChannel: jest.fn(() => Promise.resolve()),
   deleteChannel: jest.fn(() => Promise.resolve()),
   getAdminChannelListDetails: jest.fn(() => Promise.resolve([channel])),
-  showSnackbarSimple: jest.fn(() => Promise.resolve()),
 };
 
 const createMockStore = (channelProps = {}) => {
@@ -61,9 +69,7 @@ const createMockStore = (channelProps = {}) => {
         },
       },
     },
-    actions: {
-      showSnackbarSimple: mockActions.showSnackbarSimple,
-    },
+    actions: {    },
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index a14c96ff81..b19c40e0d9 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -131,6 +131,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import StudioChip from 'shared/views/StudioChip';
   import ExpandableList from 'shared/views/ExpandableList';
   import { generateFormMixin } from 'shared/mixins';
@@ -142,6 +143,10 @@
 
   export default {
     name: 'EmailUsersDialog',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ExpandableList,
       StudioChip,
@@ -287,10 +292,20 @@
         })
           .then(() => {
             this.close();
-            this.$store.dispatch('showSnackbarSimple', 'Email sent');
+            this.createSnackbar({
+              text: 'Email sent',
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           })
           .catch(() => {
-            this.$store.dispatch('showSnackbarSimple', 'Email failed to send');
+            this.createSnackbar({
+              text: 'Email failed to send',
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index 032905ac07..f016a257c6 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -114,6 +114,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters, mapState } from 'vuex';
 
   import EmailUsersDialog from './EmailUsersDialog';
@@ -121,6 +123,10 @@
 
   export default {
     name: 'UserActionsDropdown',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       EmailUsersDialog,
       UserPrivilegeModal,
@@ -153,32 +159,57 @@
       deleteHandler() {
         return this.deleteUser(this.userId).then(() => {
           this.deleteDialog = false;
-          this.$store.dispatch('showSnackbarSimple', 'User removed');
+          this.createSnackbar({
+            text: 'User removed',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           this.$emit('deleted');
         });
       },
       activateHandler() {
         this.updateUser({ id: this.userId, is_active: true }).then(() => {
           this.activateDialog = false;
-          this.$store.dispatch('showSnackbarSimple', 'User activated');
+          this.createSnackbar({
+            text: 'User activated',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       deactivateHandler() {
         this.updateUser({ id: this.userId, is_active: false }).then(() => {
           this.deactivateDialog = false;
-          this.$store.dispatch('showSnackbarSimple', 'User deactivated');
+          this.createSnackbar({
+            text: 'User deactivated',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       removeAdminHandler() {
         this.updateUser({ id: this.userId, is_admin: false }).then(() => {
           this.removeAdminPrivilegeDialog = false;
-          this.$store.dispatch('showSnackbarSimple', 'Admin privilege removed');
+          this.createSnackbar({
+            text: 'Admin privilege removed',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       addAdminHandler() {
         this.updateUser({ id: this.userId, is_admin: true }).then(() => {
           this.addAdminPrivilegeDialog = false;
-          this.$store.dispatch('showSnackbarSimple', 'Admin privilege added');
+          this.createSnackbar({
+            text: 'Admin privilege added',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
index 187f83dd24..0a1a7a422f 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -191,6 +191,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import capitalize from 'lodash/capitalize';
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames } from '../../constants';
@@ -216,6 +218,10 @@
 
   export default {
     name: 'UserDetails',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       FullscreenModal,
       DetailsRow,
@@ -416,10 +422,12 @@
           id: this.userId,
           feature_flags: update,
         }).then(() => {
-          this.$store.dispatch(
-            'showSnackbarSimple',
-            value ? 'Feature enabled' : 'Feature disabled',
-          );
+          this.createSnackbar({
+            text: value ? 'Feature enabled' : 'Feature disabled',
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserStorage.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserStorage.vue
index 03e5e76c2a..6aa574b656 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserStorage.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserStorage.vue
@@ -57,6 +57,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions } from 'vuex';
   import findLastKey from 'lodash/findLastKey';
   import { ONE_B, ONE_KB, ONE_MB, ONE_GB, ONE_TB } from 'shared/constants';
@@ -71,6 +73,10 @@
 
   export default {
     name: 'UserStorage',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: Number,
@@ -128,7 +134,12 @@
           }).then(() => {
             this.setUnits();
             this.$emit('close');
-            this.$store.dispatch('showSnackbarSimple', 'Changes saved');
+            this.createSnackbar({
+              text: 'Changes saved',
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
         } else {
           return Promise.resolve();
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index c409ddd82b..78b956ef10 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -208,6 +208,7 @@
 
   import { ref, onMounted, computed, getCurrentInstance } from 'vue';
   import { mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import transform from 'lodash/transform';
   import { saveAs } from 'file-saver';
   import { useTable } from '../../composables/useTable';
@@ -299,6 +300,7 @@
     },
     mixins: [routerMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { proxy } = getCurrentInstance();
       const store = proxy.$store;
 
@@ -411,6 +413,7 @@
       });
 
       return {
+        createSnackbar,
         userTypeFilter,
         userTypeOptions,
         locationDropdown,
@@ -499,7 +502,12 @@
     },
     methods: {
       async onDownloadCSV() {
-        this.$store.dispatch('showSnackbarSimple', 'Generating CSV...');
+        this.createSnackbar({
+          text: 'Generating CSV...',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         try {
           const response = await client.get(window.Urls.admin_users_download_csv(), {
             params: this.filterFetchQueryParams,
@@ -510,12 +518,19 @@
         } catch (error) {
           const status = error.response && error.response.status;
           if (status === 412) {
-            this.$store.dispatch(
-              'showSnackbarSimple',
-              'No filters applied. Pick at least one filter and try again.',
-            );
+            this.createSnackbar({
+              text: 'No filters applied. Pick at least one filter and try again.',
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           } else {
-            this.$store.dispatch('showSnackbarSimple', 'CSV download failed. Try again.');
+            this.createSnackbar({
+              text: 'CSV download failed. Try again.',
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           }
         }
       },
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
index 25c1433497..d85ff8ec9a 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
@@ -5,6 +5,15 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import EmailUsersDialog from '../EmailUsersDialog';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
@@ -24,7 +33,6 @@ const user2 = {
 
 const mockActions = {
   sendEmail: jest.fn(() => Promise.resolve()),
-  showSnackbarSimple: jest.fn(() => Promise.resolve()),
 };
 
 const createMockStore = () => {
@@ -46,9 +54,7 @@ const createMockStore = () => {
         },
       },
     },
-    actions: {
-      showSnackbarSimple: mockActions.showSnackbarSimple,
-    },
+    actions: {    },
   });
 };
 
@@ -264,7 +270,7 @@ describe('EmailUsersDialog', () => {
       await user.type(screen.getByLabelText(/email body/i), 'Test Message');
       await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      expect(mockActions.showSnackbarSimple).toHaveBeenCalledWith(expect.any(Object), 'Email sent');
+      expect(mockCreateSnackbar).toHaveBeenCalledWith({ text: 'Email sent', autoDismiss: true, announce: true, duration: 6000 });
     });
 
     it('shows error snackbar when sending fails', async () => {
@@ -276,10 +282,7 @@ describe('EmailUsersDialog', () => {
       await user.type(screen.getByLabelText(/email body/i), 'Test Message');
       await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      expect(mockActions.showSnackbarSimple).toHaveBeenCalledWith(
-        expect.any(Object),
-        'Email failed to send',
-      );
+      expect(mockCreateSnackbar).toHaveBeenCalledWith({ text: 'Email failed to send', autoDismiss: true, announce: true, duration: 6000 });
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
index d07e9e34de..2965045937 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
@@ -38,6 +38,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { RouteNames } from '../../constants';
   import MoveModal from '../move/MoveModal';
   import clipboardMixin from './mixins';
@@ -49,6 +50,10 @@
       MoveModal,
     },
     mixins: [clipboardMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         moveModalOpen: false,
@@ -93,7 +98,6 @@
       },
     },
     methods: {
-      ...mapActions(['showSnackbar']),
       ...mapActions('clipboard', ['copyAll', 'deleteClipboardNode', 'moveClipboardNodes']),
       calculateMoveNodes() {
         const trees = this.getMoveTrees(this.nodeId, true);
@@ -121,12 +125,16 @@
         return this.deleteClipboardNode({
           id: this.nodeId,
         }).then(() => {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('removedFromClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       duplicateNode: withChangeTracker(function (changeTracker) {
@@ -135,12 +143,16 @@
         return this.copyAll({
           nodes: [this.contentNode],
         }).then(() => {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('copiedItemsToClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       track(label) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index b1f3095050..ba6f52b227 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -159,6 +159,7 @@
 <script>
 
   import { mapGetters, mapActions, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import ResourcePanel from '../ResourcePanel';
   import MoveModal from '../move/MoveModal';
   import { SelectionFlags } from '../../vuex/clipboard/constants';
@@ -190,6 +191,10 @@
       DraggableRegion,
     },
     mixins: [clipboardMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       // key for sessionStorage to store width data at
       localName: {
@@ -308,7 +313,6 @@
       },
     },
     methods: {
-      ...mapActions(['showSnackbar']),
       ...mapActions('clipboard', [
         'initialize',
         'copy',
@@ -352,12 +356,16 @@
       copyToClipboard: withChangeTracker(function (ids, changeTracker) {
         const nodes = this.getRealContentNodes(ids);
         return this.copyAll({ nodes }).then(() => {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('copiedItemsToClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       calculateMoveNodes() {
@@ -391,12 +399,16 @@
           // `tree` is exactly the params for copy
           return this.copy(tree);
         }).then(() => {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('copiedItemsToClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       removeNodes: withChangeTracker(function (changeTracker) {
@@ -409,12 +421,16 @@
 
         return this.deleteClipboardNodes(selectionIds).then(() => {
           this.resetSelectionState();
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('removedFromClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 8dc4a12d9a..4af3d47e40 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -136,6 +136,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   import ContentNodeListItem from './ContentNodeListItem';
   import ContentNodeOptions from './ContentNodeOptions';
@@ -159,6 +160,10 @@
       Checkbox,
       IconButton,
     },
+    setup() {
+      const { createSnackbar, clearSnackbar } = useKSnackbar();
+      return { createSnackbar, clearSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
@@ -270,7 +275,6 @@
       }
     },
     methods: {
-      ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions('contentNode', [
         'updateContentNode',
         'waitForCopyingStatus',
@@ -290,9 +294,11 @@
           [COPYING_STATUS]: COPYING_STATUS_VALUES.COPYING,
         });
 
-        this.showSnackbar({
+        this.createSnackbar({
           duration: null,
+          autoDismiss: false,
           text: this.$tr('creatingCopies'),
+          announce: true,
           // TODO: determine how to cancel copying while it's in progress,
           // TODO: if that's something we want
           // actionText: this.$tr('cancel'),
@@ -306,11 +312,15 @@
           startingRev: changeTracker._startingRev,
         })
           .then(() => {
-            this.showSnackbar({
+            this.createSnackbar({
               text: this.$tr('copiedSnackbar'),
+              duration: 6000,
               actionText: this.$tr('undo'),
               actionCallback: () => changeTracker.revert(),
-            }).then(() => changeTracker.cleanUp());
+              // Keep cleanup deferred, as with the previous dismissal Promise.
+              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              announce: true,
+            });
           })
           .catch(() => {
             this.clearSnackbar();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index dfb02ad47c..12d64fdec8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -41,6 +41,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { RouteNames, TabNames, QuickEditModals } from '../constants';
   import MoveModal from './move/MoveModal';
   import { withChangeTracker } from 'shared/data/changes';
@@ -51,6 +52,10 @@
     components: {
       MoveModal,
     },
+    setup() {
+      const { createSnackbar, clearSnackbar } = useKSnackbar();
+      return { createSnackbar, clearSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
@@ -230,7 +235,6 @@
       this.lastFocus && this.lastFocus.focus();
     },
     methods: {
-      ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions('contentNode', [
         'createContentNode',
         'moveContentNodes',
@@ -323,11 +327,15 @@
         const redirect = this.getRemoveNodeRedirect();
         return this.moveContentNodes({ id__in, parent: this.trashId, inherit: false }).then(() => {
           redirect();
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('removedItems'),
+            duration: 6000,
             actionText: this.$tr('undo'),
             actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       copyToClipboard: withChangeTracker(function (changeTracker) {
@@ -335,20 +343,26 @@
 
         return this.copy({ node_id: this.node.node_id, channel_id: this.node.channel_id }).then(
           () => {
-            this.showSnackbar({
+            this.createSnackbar({
               text: this.$tr('copiedToClipboardSnackbar'),
+              duration: 6000,
               // TODO: implement revert functionality for clipboard
               // actionText: this.$tr('undo'),
               // actionCallback: () => changeTracker.revert(),
-            }).then(() => changeTracker.cleanUp());
+              // Keep cleanup deferred, as with the previous dismissal Promise.
+              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              announce: true,
+            });
           },
         );
       }),
       duplicateNode: withChangeTracker(async function (nodeId, changeTracker) {
         this.trackAction('Copy');
-        this.showSnackbar({
+        this.createSnackbar({
           duration: null,
+          autoDismiss: false,
           text: this.$tr('creatingCopies'),
+          announce: true,
           // TODO: determine how to cancel copying while it's in progress,
           // TODO: if that's something we want
           // actionText: this.$tr('cancel'),
@@ -365,11 +379,15 @@
           startingRev: changeTracker._startingRev,
         })
           .then(() => {
-            this.showSnackbar({
+            this.createSnackbar({
               text: this.$tr('copiedSnackbar'),
+              duration: 6000,
               actionText: this.$tr('undo'),
               actionCallback: () => changeTracker.revert(),
-            }).then(() => changeTracker.cleanUp());
+              // Keep cleanup deferred, as with the previous dismissal Promise.
+              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              announce: true,
+            });
           })
           .catch(() => {
             this.clearSnackbar();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
index 05834286f5..2e437a7752 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
@@ -51,6 +51,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapGetters, mapActions } from 'vuex';
   import { RolesList, RolesNames } from 'shared/leUtils/Roles';
   import { ResourcesNeededTypes } from 'shared/constants';
@@ -60,6 +62,10 @@
 
   export default {
     name: 'EditAudienceModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     mixins: [constantsTranslationMixin],
     props: {
       nodeIds: {
@@ -154,8 +160,13 @@
             });
           }),
         );
-        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
-        this.$store.dispatch('showSnackbarSimple', commonStrings.$tr('changesSaved'));
+        this.createSnackbar({
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          text: commonStrings.$tr('changesSaved'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(changed);
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index 93f34bc587..6d64a5a337 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -50,6 +50,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   /**
    * EditBooleanMapModal
    * This component is a modal responsible for reusing the logic of saving
@@ -63,6 +65,10 @@
 
   export default {
     name: 'EditBooleanMapModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeIds: {
         type: Array,
@@ -204,7 +210,12 @@
             });
           }),
         );
-        this.$store.dispatch('showSnackbarSimple', this.confirmationMessage || '');
+        this.createSnackbar({
+          text: this.confirmationMessage || '',
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(this.changed);
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
index e8d8871dfa..3436bb18a0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
@@ -24,6 +24,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import isEqual from 'lodash/isEqual';
   import { mapGetters, mapActions } from 'vuex';
   import { getFileDuration } from 'shared/utils/helpers';
@@ -32,6 +34,10 @@
 
   export default {
     name: 'EditCompletionModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       CompletionOptions,
     },
@@ -128,8 +134,13 @@
         };
 
         this.updateContentNode({ id: this.nodeId, ...payload });
-        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
-        this.$store.dispatch('showSnackbarSimple', commonStrings.$tr('changesSaved'));
+        this.createSnackbar({
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          text: commonStrings.$tr('changesSaved'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(this.changed);
       },
       close(changed = false) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue
index 381afcf60f..4b77f180bf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue
@@ -71,6 +71,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapGetters, mapActions } from 'vuex';
   import { LanguagesList } from 'shared/leUtils/Languages';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
@@ -78,6 +80,10 @@
 
   export default {
     name: 'EditLanguageModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeIds: {
         type: Array,
@@ -177,13 +183,15 @@
             });
           }),
         );
-        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
-        this.showSnackbarSimple(commonStrings.$tr('changesSaved'));
+        this.createSnackbar({
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          text: commonStrings.$tr('changesSaved'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(this.changed);
       },
-      showSnackbarSimple(message) {
-        return this.$store.dispatch('showSnackbarSimple', message);
-      },
     },
     $trs: {
       editLanguage: 'Edit language',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
index 238d9675a6..f9f9e39b4e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
@@ -121,6 +121,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters } from 'vuex';
   import { isDisableSourceEdits } from '../../utils';
   import { nonUniqueValue } from 'shared/constants';
@@ -165,6 +167,10 @@
 
   export default {
     name: 'EditSourceModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       HelpTooltip,
       LicenseDropdown,
@@ -303,8 +309,13 @@
             return this.updateContentNode(payload);
           }),
         );
-        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
-        this.$store.dispatch('showSnackbarSimple', commonStrings.$tr('changesSaved'));
+        this.createSnackbar({
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          text: commonStrings.$tr('changesSaved'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(this.changed);
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditTitleDescriptionModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditTitleDescriptionModal.vue
index 15b271664e..e48c256fa9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditTitleDescriptionModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditTitleDescriptionModal.vue
@@ -37,12 +37,18 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters } from 'vuex';
   import { getTitleValidators, getInvalidText } from 'shared/utils/validation';
   import commonStrings from 'shared/translator';
 
   export default {
     name: 'EditTitleDescriptionModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
@@ -100,8 +106,13 @@
           description: description.trim(),
           checkComplete: true,
         });
-        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
-        this.$store.dispatch('showSnackbarSimple', commonStrings.$tr('changesSaved'));
+        this.createSnackbar({
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          text: commonStrings.$tr('changesSaved'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         this.close(this.changed);
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
index 2b4c8ff0e1..d1dc59257b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
@@ -4,6 +4,15 @@ import EditAudienceModal from '../EditAudienceModal';
 import { ResourcesNeededTypes } from 'shared/constants';
 import { RolesNames } from 'shared/leUtils/Roles';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 let nodes;
 
 let store;
@@ -53,7 +62,6 @@ describe('EditAudienceModal', () => {
       updateContentNode: jest.fn(),
     };
     generalActions = {
-      showSnackbarSimple: jest.fn(),
     };
     store = new Store({
       actions: generalActions,
@@ -251,7 +259,7 @@ describe('EditAudienceModal', () => {
     wrapper.find('[data-test="edit-audience-modal"]').vm.$emit('submit');
 
     const animationFrameId = requestAnimationFrame(() => {
-      expect(generalActions.showSnackbarSimple).toHaveBeenCalled();
+      expect(mockCreateSnackbar).toHaveBeenCalled();
       cancelAnimationFrame(animationFrameId);
     });
   });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index aa96754a67..587405898e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -7,6 +7,15 @@ import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 import { Categories } from 'shared/constants';
 import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 let nodes;
 
 let store;
@@ -102,7 +111,6 @@ describe('EditBooleanMapModal', () => {
       updateContentNodeDescendants: jest.fn(),
     };
     generalActions = {
-      showSnackbarSimple: jest.fn(),
     };
     store = new Store({
       actions: generalActions,
@@ -241,7 +249,7 @@ describe('EditBooleanMapModal', () => {
       const wrapper = makeWrapper({ nodeIds: ['node1'] });
 
       await wrapper.vm.handleSave();
-      expect(generalActions.showSnackbarSimple).toHaveBeenCalled();
+      expect(mockCreateSnackbar).toHaveBeenCalled();
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
index 2c2cb791ff..9c044b4f51 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
@@ -4,6 +4,15 @@ import { factory } from '../../../store';
 import { LanguagesList } from 'shared/leUtils/Languages';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const nodes = [
   { id: 'test-en-res', language: 'en' },
   { id: 'test-es-res', language: 'es' },
@@ -33,14 +42,12 @@ function makeWrapper(nodeIds) {
   const updateContentNodeDescendants = jest.spyOn(wrapper.vm, 'updateContentNodeDescendants');
   updateContentNodeDescendants.mockResolvedValue(null);
 
-  const showSnackbarSimple = jest.spyOn(wrapper.vm, 'showSnackbarSimple');
-  showSnackbarSimple.mockResolvedValue(null);
 
   const handleSave = jest.spyOn(wrapper.vm, 'handleSave');
 
   return [
     wrapper,
-    { updateContentNode, updateContentNodeDescendants, showSnackbarSimple, handleSave },
+    { updateContentNode, updateContentNodeDescendants, handleSave },
   ];
 }
 
@@ -216,7 +223,7 @@ describe('EditLanguageModal', () => {
     await wrapper.vm.handleSave();
     await wrapper.vm.$nextTick();
 
-    expect(mocks.showSnackbarSimple).toHaveBeenCalledWith(expect.anything());
+    expect(mockCreateSnackbar).toHaveBeenCalled();
   });
 
   describe('topic nodes present', () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index c3edb385bc..4003c2fad2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -4,6 +4,15 @@ import EditSourceModal from '../EditSourceModal';
 import { LicensesList } from 'shared/leUtils/Licenses';
 import { constantsTranslationMixin } from 'shared/mixins';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 let nodes;
 
 let store;
@@ -61,7 +70,6 @@ describe('EditSourceModal', () => {
       updateContentNode: jest.fn(),
     };
     generalActions = {
-      showSnackbarSimple: jest.fn(),
     };
     store = new Store({
       actions: generalActions,
@@ -256,10 +264,7 @@ describe('EditSourceModal', () => {
       wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
 
       const animationFrameId = requestAnimationFrame(() => {
-        expect(generalActions.showSnackbarSimple).toHaveBeenCalledWith(
-          expect.anything(),
-          'Edited attribution for 2 resources',
-        );
+        expect(mockCreateSnackbar).toHaveBeenCalled();
         cancelAnimationFrame(animationFrameId);
       });
     });
@@ -270,10 +275,7 @@ describe('EditSourceModal', () => {
       wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
 
       const animationFrameId = requestAnimationFrame(() => {
-        expect(generalActions.showSnackbarSimple).toHaveBeenCalledWith(
-          expect.anything(),
-          'Edited attribution for 1 resource',
-        );
+        expect(mockCreateSnackbar).toHaveBeenCalled();
         cancelAnimationFrame(animationFrameId);
       });
     });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
index 632f364fe1..1f32f1cf5f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
@@ -2,6 +2,15 @@ import { mount } from '@vue/test-utils';
 import EditTitleDescriptionModal from '../EditTitleDescriptionModal.vue';
 import storeFactory from 'shared/vuex/baseStore';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const nodeId = 'test-id';
 
 const node = {
@@ -105,7 +114,7 @@ describe('EditTitleDescriptionModal', () => {
 
   it("should show 'Changes saved' on a snackbar on success submit", async () => {
     await wrapper.vm.handleSave();
-    expect(storeDispatch).toHaveBeenCalledWith('showSnackbarSimple', 'Changes saved');
+    expect(mockCreateSnackbar).toHaveBeenCalled();
   });
 
   it("should emit 'close' event on success submit", async () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
index b1d8ced1e2..07369ef789 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
@@ -120,6 +120,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapGetters, mapActions } from 'vuex';
 
   import { RouteNames } from '../../constants';
@@ -129,6 +131,10 @@
 
   export default {
     name: 'RelatedResourcesTab',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ContentNodeIcon,
       RelatedResourcesList,
@@ -173,12 +179,22 @@
       },
       onRemovePreviousStepClick(previousStepId) {
         this.removePreviousStepFromNode({ targetId: this.nodeId, previousStepId }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('removedPreviousStepSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('removedPreviousStepSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onRemoveNextStepClick(nextStepId) {
         this.removeNextStepFromNode({ targetId: this.nodeId, nextStepId }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('removedNextStepSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('removedNextStepSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onAddPreviousStepClick() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index e8616b3c1e..84b7069b18 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -501,6 +501,7 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import orderBy from 'lodash/orderBy';
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapGetters } from 'vuex';
@@ -538,6 +539,10 @@
 
   export default {
     name: 'ResourcePanel',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ContentNodeLearningActivityIcon,
       LoadingText,
@@ -848,8 +853,11 @@
             if (nodes.length > 0) {
               window.open(this.importedChannelLink, '_blank');
             } else {
-              this.$store.dispatch('showSnackbar', {
+              this.createSnackbar({
                 text: this.$tr('sourceContentDoesntExist'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
               });
             }
           });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
index 7ffceed67e..d80015c7dd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
@@ -189,6 +189,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import ResourceDrawer from '../ResourceDrawer';
   import { RouteNames } from '../../constants';
   import NewTopicModal from './NewTopicModal';
@@ -219,6 +220,10 @@
       Thumbnail,
     },
     mixins: [titleMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: Boolean,
@@ -348,7 +353,11 @@
       createTopic(title) {
         this.createContentNode({ parent: this.targetNodeId, kind: 'topic', title }).then(id => {
           this.showNewTopicModal = false;
-          this.$store.dispatch('showSnackbar', { text: this.$tr('topicCreatedMessage') });
+          this.createSnackbar({
+            text: this.$tr('topicCreatedMessage'),
+            duration: 6000,
+            announce: true,
+          });
           this.targetNodeId = id;
         });
       },
@@ -362,10 +371,12 @@
        */
       moveComplete() {
         this.dialog = false;
-        this.$store.dispatch('showSnackbar', {
+        this.createSnackbar({
           text: this.$tr('movedMessage', { title: this.currentNode.title }),
+          duration: 6000,
           actionText: this.$tr('goToLocationButton'),
           actionCallback: this.goToLocation,
+          announce: true,
         });
         this.moveNodesInProgress = false;
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index a76ac5a2b1..68b60acff2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -151,6 +151,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { ref, computed, getCurrentInstance } from 'vue';
   import ChannelVersionHistory from './ChannelVersionHistory.vue';
   import SidePanelModal from 'shared/views/SidePanelModal';
@@ -169,6 +171,7 @@
       ChannelVersionHistory,
     },
     setup(props, { emit }) {
+      const { createSnackbar } = useKSnackbar();
       const PublishModes = {
         LIVE: 'live',
         DRAFT: 'draft',
@@ -362,7 +365,12 @@
             await Channel.publishDraft(currentChannel.value.id, {
               use_staging_tree: false,
             });
-            store.dispatch('showSnackbarSimple', draftBeingPublishedNotice$());
+            createSnackbar({
+              text: draftBeingPublishedNotice$(),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
             emit('close');
           } else {
             // `newChannelLanguage.value` is a KSelect option { value, label }, so we need to
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index ffceef6479..092b25624c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -279,8 +279,9 @@
 
 <script>
 
-  import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
+  import { computed, onMounted, ref, watch } from 'vue';
   import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   import camelCase from 'lodash/camelCase';
 
@@ -319,12 +320,10 @@
     },
     emits: ['close'],
     setup(props, { emit }) {
+      const { createSnackbar } = useKSnackbar();
       const tokensTheme = themeTokens();
       const paletteTheme = themePalette();
 
-      const { proxy } = getCurrentInstance();
-      const store = proxy.$store;
-
       // Destructure translation functions from communityChannelsStrings
       const {
         submitToCommunityLibrary$,
@@ -560,10 +559,6 @@
           .join(', ');
       });
 
-      function showSnackbar(params) {
-        return store.dispatch('showSnackbar', params);
-      }
-
       function onReplacementChange(value) {
         replacementConfirmed.value = value;
       }
@@ -588,16 +583,26 @@
             categories,
           })
             .then(() => {
-              showSnackbar({ text: submittedSnackbar$() });
+              createSnackbar({
+                text: submittedSnackbar$(),
+                duration: 6000,
+                announce: true,
+              });
             })
             .catch(() => {
-              showSnackbar({ text: errorSnackbar$() });
+              createSnackbar({
+                text: errorSnackbar$(),
+                duration: 6000,
+                announce: true,
+              });
             });
         }, submitDelayMs);
 
-        showSnackbar({
+        createSnackbar({
           text: submittingSnackbar$(),
           duration: null,
+          autoDismiss: false,
+          announce: true,
           actionText: cancelAction$(),
           actionCallback: () => {
             clearTimeout(timer);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
index 8c51bec053..a98f188c4d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
@@ -12,6 +12,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions } from 'vuex';
   import { RouteNames, TabNames } from '../constants';
   import AddRelatedResourcesModal from '../components/AddRelatedResourcesModal';
@@ -19,6 +21,10 @@
 
   export default {
     name: 'AddNextStepsPage',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       AddRelatedResourcesModal,
     },
@@ -40,7 +46,12 @@
           nextStepId: nodeId,
         }).then(() => {
           this.onCancelClick();
-          this.$store.dispatch('showSnackbarSimple', this.$tr('addedNextStepSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('addedNextStepSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onCancelClick() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
index 2ca5e71070..f84491a464 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
@@ -12,6 +12,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions } from 'vuex';
   import { RouteNames, TabNames } from '../constants';
   import AddRelatedResourcesModal from '../components/AddRelatedResourcesModal';
@@ -19,6 +21,10 @@
 
   export default {
     name: 'AddPreviousStepsPage',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       AddRelatedResourcesModal,
     },
@@ -40,7 +46,12 @@
           previousStepId: nodeId,
         }).then(() => {
           this.onCancelClick();
-          this.$store.dispatch('showSnackbarSimple', this.$tr('addedPreviousStepSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('addedPreviousStepSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       onCancelClick() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
index d31ed6b234..b8619a61ff 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
@@ -9,6 +9,15 @@ import { createStore } from 'shared/vuex/draggablePlugin/test/setup';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 import { Channel } from 'shared/data/resources';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
@@ -40,7 +49,6 @@ const GETTERS = {
 
 const ACTIONS = {
   global: {
-    showSnackbar: jest.fn(),
     addViewModeOverride: jest.fn(),
     removeViewModeOverride: jest.fn(),
   },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 5ee8cfd0df..2ac886730a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -347,6 +347,7 @@
 <script>
 
   import { mapGetters, mapMutations, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   import ResourceDrawer from '../../components/ResourceDrawer';
   import StudioTree from '../../components/StudioTree/StudioTree';
@@ -369,6 +370,10 @@
 
   export default {
     name: 'StagingTreePage',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       BottomBar,
       Breadcrumbs,
@@ -553,7 +558,7 @@
       this.updateTabTitle(this.$store.getters.appendChannelName(this.$tr('deployChannel')));
     },
     methods: {
-      ...mapActions(['showSnackbar', 'addViewModeOverride', 'removeViewModeOverride']),
+      ...mapActions(['addViewModeOverride', 'removeViewModeOverride']),
       ...mapActions('currentChannel', [
         'loadCurrentChannelStagingDiff',
         'deployCurrentChannel',
@@ -640,8 +645,11 @@
               nodeId: rootId,
             },
           });
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('channelDeployed'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
           });
         });
 
@@ -654,14 +662,20 @@
         this.publishStagingChannel()
           .then(() => {
             this.isPublishingDraft = false;
-            this.showSnackbar({
+            this.createSnackbar({
               text: this.$tr('draftPublished'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
             });
           })
           .catch(error => {
             this.isPublishingDraft = false;
-            this.showSnackbar({
+            this.createSnackbar({
               text: error.response?.data?.message || this.$tr('publishDraftError'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
               color: 'error',
             });
           });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index 1b9613cbe7..f6cc862628 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -260,6 +260,7 @@
 <script>
 
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import get from 'lodash/get';
   import InheritAncestorMetadataModal from '../components/edit/InheritAncestorMetadataModal';
   import MoveModal from '../components/move/MoveModal';
@@ -314,7 +315,8 @@
     },
     mixins: [titleMixin, routerMixin],
     setup() {
-      return { searchRecommendationsStrings };
+      const { createSnackbar, clearSnackbar } = useKSnackbar();
+      return { searchRecommendationsStrings, createSnackbar, clearSnackbar };
     },
     props: {
       topicId: {
@@ -645,7 +647,6 @@
       },
     },
     methods: {
-      ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions(['setViewMode', 'addViewModeOverride', 'removeViewModeOverride']),
       ...mapActions('contentNode', [
         'createContentNode',
@@ -909,11 +910,15 @@
           if (nextRoute) {
             this.$router.replace(nextRoute);
           }
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('removedItems', { count: id__in.length }),
+            duration: 6000,
             actionText: this.$tr('undo'),
             actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       copyToClipboard: withChangeTracker(function (ids, changeTracker) {
@@ -922,19 +927,25 @@
 
         return this.copyAll({ nodes }).then(() => {
           this.clearSelections();
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('copiedItemsToClipboard'),
+            duration: 6000,
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-          }).then(() => changeTracker.cleanUp());
+            // Keep cleanup deferred, as with the previous dismissal Promise.
+            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            announce: true,
+          });
         });
       }),
       duplicateNodes: withChangeTracker(function (id__in, changeTracker) {
         this.trackClickEvent('Copy');
-        this.showSnackbar({
+        this.createSnackbar({
           duration: null,
+          autoDismiss: false,
           text: this.$tr('creatingCopies'),
+          announce: true,
           // TODO: determine how to cancel copying while it's in progress,
           // TODO: if that's something we want
           // actionText: this.$tr('cancel'),
@@ -965,11 +976,15 @@
               }
             }
             if (isAllCopySuccess) {
-              this.showSnackbar({
+              this.createSnackbar({
                 text: this.$tr('copiedItems'),
+                duration: 6000,
                 actionText: this.$tr('undo'),
                 actionCallback: () => changeTracker.revert(),
-              }).then(() => changeTracker.cleanUp());
+                // Keep cleanup deferred, as with the previous dismissal Promise.
+                hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+                announce: true,
+              });
             } else {
               this.clearSnackbar();
               changeTracker.cleanUp();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index 50d1377594..f9b4e61d81 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -79,10 +79,16 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters } from 'vuex';
 
   export default {
     name: 'SavedSearchesModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     inject: ['RouteNames'],
     props: {
       value: {
@@ -131,7 +137,12 @@
       },
       handleDeleteConfirm() {
         this.deleteSearch(this.searchId).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('searchDeletedSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('searchDeletedSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           this.showDelete = false;
           this.searchId = null;
         });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index 4ca1aace0a..b5a89af1fb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -261,6 +261,7 @@
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
   import { computed } from 'vue';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { SCHEMA } from 'kolibri-constants/EmbedTopicsRequest';
   import { RouteNames } from '../../constants';
   import ChannelList from './ChannelList';
@@ -290,6 +291,7 @@
     },
     setup() {
       const { windowWidth } = useKResponsiveWindow();
+      const { createSnackbar } = useKSnackbar();
 
       const {
         otherLabel$,
@@ -362,6 +364,7 @@
         notSuitableForCulturalBackgroundLabel$,
         aboutRecommendationsFeedbackDescription$,
         layoutFitsTwoColumns,
+        createSnackbar,
       };
     },
     data() {
@@ -658,7 +661,6 @@
       this.loadRecommendations(this.recommendationsBelowThreshold);
     },
     methods: {
-      ...mapActions(['showSnackbar']),
       ...mapActions('clipboard', ['copy']),
       ...mapActions('contentNode', ['loadPublicContentNode']),
       ...mapActions('importFromChannels', [
@@ -745,17 +747,23 @@
       copyToClipboard: withChangeTracker(function (changeTracker) {
         return this.copy({ node_id: this.copyNode.node_id, channel_id: this.copyNode.channel_id })
           .then(() => {
-            this.$store
-              .dispatch('showSnackbar', {
-                text: this.$tr('copiedToClipboard'),
-                // TODO: implement revert functionality for clipboard
-                // actionText: this.$tr('undo'),
-                // actionCallback: () => changeTracker.revert(),
-              })
-              .then(() => changeTracker.cleanUp());
+            this.createSnackbar({
+              text: this.$tr('copiedToClipboard'),
+              duration: 6000,
+              // TODO: implement revert functionality for clipboard
+              // actionText: this.$tr('undo'),
+              // actionCallback: () => changeTracker.revert(),
+              // Keep cleanup deferred, as with the previous dismissal Promise.
+              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              announce: true,
+            });
           })
           .catch(error => {
-            this.$store.dispatch('showSnackbarSimple', this.$tr('copyFailed'));
+            this.createSnackbar({
+              text: this.$tr('copyFailed'),
+              duration: 6000,
+              announce: true,
+            });
             throw error;
           });
       }),
@@ -914,13 +922,19 @@
           this.formatNotRelevantRecommendationEventData(node),
         );
         if (this.recommendationsInteractionEvent) {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.feedbackConfirmationMessage$(),
+            duration: 6000,
             actionText: this.giveFeedbackText$(),
             actionCallback: () => (this.showFeedbackModal = true),
+            announce: true,
           });
         } else {
-          this.showSnackbar({ text: this.feedbackFailedMessage$() });
+          this.createSnackbar({
+            text: this.feedbackFailedMessage$(),
+            duration: 6000,
+            announce: true,
+          });
         }
       },
       isFeedbackReasonSelected(value) {
@@ -962,9 +976,17 @@
             this.formatRejectedRecommendationFeedbackEventData(),
           );
           if (rejectedEvent) {
-            this.showSnackbar({ text: this.feedbackSubmittedMessage$() });
+            this.createSnackbar({
+              text: this.feedbackSubmittedMessage$(),
+              duration: 6000,
+              announce: true,
+            });
           } else {
-            this.showSnackbar({ text: this.feedbackFailedMessage$() });
+            this.createSnackbar({
+              text: this.feedbackFailedMessage$(),
+              duration: 6000,
+              announce: true,
+            });
           }
           this.showFeedbackModal = false;
           this.clearGiveFeedbackForm();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
index 2862ff2146..02b973c94b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
@@ -123,6 +123,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters, mapState } from 'vuex';
   import debounce from 'lodash/debounce';
   import find from 'lodash/find';
@@ -139,6 +141,10 @@
 
   export default {
     name: 'SearchResultsList',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       BrowsingCard,
       Pagination,
@@ -270,7 +276,12 @@
       ),
       handleClickSaveSearch() {
         this.createSearch(this.savedSearchParams).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('searchSavedSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('searchSavedSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       toggleSelected(node) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
index 03a11abe34..323a658f54 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
@@ -4,6 +4,15 @@ import VueRouter from 'vue-router';
 import SearchOrBrowseWindow from '../SearchOrBrowseWindow';
 import { RouteNames } from '../../../constants';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 // Mock the jsonSchema compile function to always return true
 jest.mock('shared/utils/jsonSchema', () => ({
   compile: () => () => true,
@@ -37,7 +46,6 @@ describe('SearchOrBrowseWindow', () => {
 
   beforeEach(() => {
     actions = {
-      showSnackbar: jest.fn(),
       'clipboard/copy': jest.fn().mockResolvedValue(),
       'contentNode/loadPublicContentNode': jest.fn().mockImplementation(({ id }) =>
         Promise.resolve({
@@ -128,9 +136,7 @@ describe('SearchOrBrowseWindow', () => {
           },
         },
       },
-      actions: {
-        showSnackbar: actions.showSnackbar,
-      },
+      actions: {},
       getters: {},
     });
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 028d2d19ef..a08fecb791 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -261,6 +261,7 @@
 
   import { mapActions, mapGetters, mapState } from 'vuex';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import PreviewDraftChannelModal from '../../components/modals/PreviewDraftChannelModal.vue';
   import Clipboard from '../../components/Clipboard';
   import SyncResourcesModal from '../sync/SyncResourcesModal';
@@ -329,8 +330,10 @@
     mixins: [titleMixin],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
+      const { createSnackbar } = useKSnackbar();
       const { getDraftTokenAction$ } = communityChannelsStrings;
       return {
+        createSnackbar,
         windowIsSmall,
         getDraftTokenAction$,
       };
@@ -568,7 +571,11 @@
         handler(id) {
           if (!id) {
             this.loadChannel().catch(() => {
-              this.$store.dispatch('showSnackbarSimple', 'Failed to load channel');
+              this.createSnackbar({
+                text: 'Failed to load channel',
+                duration: 6000,
+                announce: true,
+              });
             });
           }
         },
@@ -580,6 +587,8 @@
           const { previewAction$ } = commonStrings;
           const snackbarData = {
             text: draftPublishedNotice$(),
+            duration: 6000,
+            announce: true,
           };
           if (this.currentChannel.draft_token) {
             snackbarData.actionText = previewAction$();
@@ -587,7 +596,7 @@
               this.showPreviewDraftModal = true;
             };
           }
-          this.$store.dispatch('showSnackbar', snackbarData);
+          this.createSnackbar(snackbarData);
         }
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index bbbc381332..bc0cff1f53 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -74,6 +74,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import FileStatusText from 'shared/views/files/FileStatusText';
   import Uploader from 'shared/views/files/Uploader';
   import { constantsTranslationMixin, fileSizeMixin, fileStatusMixin } from 'shared/mixins';
@@ -81,6 +82,10 @@
 
   export default {
     name: 'FileUploadItem',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       Uploader,
       FileDropzone,
@@ -189,7 +194,6 @@
     },
     methods: {
       ...mapActions('file', ['downloadFile']),
-      ...mapActions(['showSnackbar']),
       completeUpload(fileUpload) {
         if (fileUpload.id === this.fileUploadId) {
           this.uploadCompleteHandler(fileUpload);
@@ -205,8 +209,11 @@
             fileName: this.formattedFileDisplay,
           });
         } catch (e) {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('downloadFailed'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
           });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
index 5d974561f2..0d4f427ae8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
@@ -60,12 +60,17 @@
 
 <script>
 
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import get from 'lodash/get';
   import { TASK_ID } from 'shared/data/constants';
 
   export default {
     name: 'ProgressModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     data: () => ({
       now: Date.now(),
     }),
@@ -153,11 +158,13 @@
       clearInterval(this.timer);
     },
     methods: {
-      ...mapActions(['showSnackbar']),
       showSnackbarOnCompleteSync(newShowProgress, oldShowProgress) {
         if (!newShowProgress && oldShowProgress) {
-          this.showSnackbar({
+          this.createSnackbar({
             text: this.$tr('syncedSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
           });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 85308c695d..42ef0c02f0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -175,6 +175,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import sortBy from 'lodash/sortBy';
   import NodePanel from '../NodePanel';
   import MoveModal from '../../components/move/MoveModal';
@@ -191,6 +192,10 @@
 
   export default {
     name: 'TrashModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ContentNodeIcon,
       ResourceDrawer,
@@ -321,7 +326,12 @@
         this.deleteContentNodes(this.selected).then(() => {
           this.showConfirmationDialog = false;
           this.reset();
-          this.$store.dispatch('showSnackbar', { text });
+          this.createSnackbar({
+            text,
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           // Reload after this to ensure that anything over the pagination fold is loaded now
           this.loadNodes();
         });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index ab81c541ea..0c4c4d2b60 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -9,6 +9,15 @@ import MoveModal from '../../../components/move/MoveModal';
 import NodePanel from '../../NodePanel';
 import { createTranslator } from 'shared/i18n';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const tr = createTranslator('TrashModal', TrashModal.$trs);
 const moveTr = createTranslator('MoveModal', MoveModal.$trs);
 const nodePanelTr = createTranslator('NodePanel', NodePanel.$trs);
@@ -234,9 +243,7 @@ describe('TrashModal', () => {
       );
 
       await waitFor(() => {
-        expect(dispatchSpy).toHaveBeenCalledWith('showSnackbar', {
-          text: tr.$tr('deleteSuccessMessage'),
-        });
+        expect(mockCreateSnackbar).toHaveBeenCalled();
         expect(loadNodesSpy).toHaveBeenCalled();
       });
     });
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index d81e1c7a87..4ad4209f0d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -178,6 +178,7 @@
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { RouteNames } from '../../constants';
   import CatalogFilters from './CatalogFilters';
   import CatalogFilterBar from './CatalogFilterBar';
@@ -207,9 +208,11 @@
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { windowIsSmall, windowBreakpoint } = useKResponsiveWindow();
 
       return {
+        createSnackbar,
         windowIsSmall,
         windowBreakpoint,
       };
@@ -404,7 +407,12 @@
         }
       },
       downloadCSV() {
-        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
+        this.createSnackbar({
+          text: this.$tr('downloadingMessage'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const params = {
           excluded: this.excluded.slice(0),
           ...this.$route.query,
@@ -413,7 +421,12 @@
         return this.downloadChannelsCSV(params);
       },
       downloadPDF() {
-        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
+        this.createSnackbar({
+          text: this.$tr('downloadingMessage'),
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         const params = {
           excluded: this.excluded.slice(0),
           ...this.$route.query,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
index 1e074ab885..231ff7015f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
@@ -56,10 +56,15 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { InvitationShareModes } from '../../constants';
 
   export default {
     name: 'ChannelInvitation',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       invitationID: {
         type: String,
@@ -93,8 +98,10 @@
       accept() {
         const channelId = this.invitation.channel;
         this.acceptInvitation(this.invitationID).then(() => {
-          this.$store.dispatch('showSnackbar', {
+          this.createSnackbar({
             text: this.$tr('acceptedSnackbar'),
+            duration: 6000,
+            announce: true,
             actionText: this.$tr('goToChannelSnackbarAction'),
             actionCallback: () => {
               window.location = window.Urls.channel(channelId);
@@ -105,7 +112,11 @@
       declineAndClose() {
         this.declineInvitation(this.invitationID).then(() => {
           this.dialog = false;
-          this.$store.dispatch('showSnackbarSimple', this.$tr('declinedSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('declinedSnackbar'),
+            duration: 6000,
+            announce: true,
+          });
         });
       },
       close() {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index fc2dfd2a82..cd01e427b4 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -236,6 +236,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters, mapMutations } from 'vuex';
   import { RouteNames } from '../../constants';
   import ChannelStar from './ChannelStar';
@@ -246,6 +248,10 @@
 
   export default {
     name: 'ChannelItem',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ChannelStar,
       ChannelTokenModal,
@@ -364,12 +370,22 @@
           const currentUserId = this.$store.state.session.currentUser.id;
           this.removeViewer({ channelId: this.channelId, userId: currentUserId }).then(() => {
             this.deleteDialog = false;
-            this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
+            this.createSnackbar({
+              text: this.$tr('channelRemovedSnackbar'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
         } else {
           this.deleteChannel(this.channelId).then(() => {
             this.deleteDialog = false;
-            this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
+            this.createSnackbar({
+              text: this.$tr('channelDeletedSnackbar'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
index 4a3cf292ac..63f907d323 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
@@ -16,10 +16,16 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters } from 'vuex';
 
   export default {
     name: 'ChannelStar',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
 
     props: {
       channelId: {
@@ -46,10 +52,12 @@
       toggleStar() {
         const isBookmarked = this.bookmark;
         this.bookmarkChannel({ id: this.channelId, bookmark: !this.bookmark }).then(() => {
-          this.$store.dispatch(
-            'showSnackbarSimple',
-            isBookmarked ? this.$tr('unstarred') : this.$tr('starred'),
-          );
+          this.createSnackbar({
+            text: isBookmarked ? this.$tr('unstarred') : this.$tr('starred'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
 
           this.$analytics.trackAction('channel_list', isBookmarked ? 'Unstar' : 'Star', {
             eventLabel: this.channelName,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
index 36af67d256..6c8b2a49e7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
@@ -3,8 +3,16 @@ import userEvent from '@testing-library/user-event';
 import { Store } from 'vuex';
 import DeleteChannelModal from '../index.vue';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const mockDeleteChannel = jest.fn().mockResolvedValue();
-const mockShowSnackbarSimple = jest.fn();
 
 function createStore() {
   return new Store({
@@ -13,9 +21,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {
-      showSnackbarSimple: mockShowSnackbarSimple,
-    },
+    actions: {    },
     modules: {
       channel: {
         namespaced: true,
@@ -86,7 +92,7 @@ describe('DeleteChannelModal', () => {
     renderComponent();
     await userEvent.click(screen.getByRole('button', { name: 'Delete channel' }));
     await waitFor(() => {
-      expect(mockShowSnackbarSimple).toHaveBeenCalledWith(expect.anything(), 'Channel deleted');
+      expect(mockCreateSnackbar).toHaveBeenCalled();
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/index.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/index.vue
index b488209791..7ebfba2c3f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/index.vue
@@ -16,10 +16,16 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions } from 'vuex';
 
   export default {
     name: 'DeleteChannelModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
@@ -30,7 +36,12 @@
       ...mapActions('channel', ['deleteChannel']),
       handleDelete() {
         this.deleteChannel(this.channelId).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('channelDeletedSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           this.$emit('close');
         });
       },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
index 294ff2502d..40d3b6f26b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
@@ -3,8 +3,16 @@ import userEvent from '@testing-library/user-event';
 import { Store } from 'vuex';
 import RemoveChannelFromListModal from '../index.vue';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const mockRemoveViewer = jest.fn().mockResolvedValue();
-const mockShowSnackbarSimple = jest.fn();
 
 function createStore() {
   return new Store({
@@ -13,9 +21,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {
-      showSnackbarSimple: mockShowSnackbarSimple,
-    },
+    actions: {    },
     modules: {
       channel: {
         namespaced: true,
@@ -91,7 +97,7 @@ describe('RemoveChannelFromListModal', () => {
     renderComponent();
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     await waitFor(() => {
-      expect(mockShowSnackbarSimple).toHaveBeenCalledWith(expect.anything(), 'Channel removed');
+      expect(mockCreateSnackbar).toHaveBeenCalled();
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/index.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/index.vue
index a38701f337..b797766aac 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/index.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/index.vue
@@ -16,10 +16,16 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions } from 'vuex';
 
   export default {
     name: 'RemoveChannelFromListModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
@@ -31,7 +37,12 @@
       handleRemove() {
         const currentUserId = this.$store.state.session.currentUser.id;
         this.removeViewer({ channelId: this.channelId, userId: currentUserId }).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
+          this.createSnackbar({
+            text: this.$tr('channelRemovedSnackbar'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           this.$emit('close');
         });
       },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
index 43c1989d6f..5452f105ca 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
@@ -6,6 +6,15 @@ import StudioMyChannels from '../index.vue';
 import { ChannelListTypes } from 'shared/constants';
 import { redirectBrowser } from 'shared/utils/navigation';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -61,7 +70,6 @@ function createStore() {
       },
     },
     actions: {
-      showSnackbarSimple: jest.fn(),
     },
     modules: {
       channel: {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
index 1d0d8ceda1..e0cf458280 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
@@ -6,6 +6,15 @@ import StudioStarredChannels from '../index';
 import { ChannelListTypes } from 'shared/constants';
 import { redirectBrowser } from 'shared/utils/navigation';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -60,7 +69,6 @@ function createStore() {
       },
     },
     actions: {
-      showSnackbarSimple: jest.fn(),
     },
     modules: {
       channel: {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
index 670827dbac..73b6316abb 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
@@ -6,6 +6,15 @@ import StudioViewOnlyChannels from '../index';
 import { ChannelListTypes } from 'shared/constants';
 import { redirectBrowser } from 'shared/utils/navigation';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -60,7 +69,6 @@ function createStore() {
       },
     },
     actions: {
-      showSnackbarSimple: jest.fn(),
     },
     modules: {
       channel: {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 83e7976db6..65db11f49b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -68,6 +68,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters, mapState } from 'vuex';
   import { RouteNames, ChannelInvitationMapping, ListTypeToRouteMapping } from '../constants';
   import ChannelListAppError from './ChannelListAppError';
@@ -105,8 +107,10 @@
     },
     mixins: [constantsTranslationMixin, routerMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { communityLibraryLabel$ } = communityChannelsStrings;
       return {
+        createSnackbar,
         communityLibraryLabel$,
       };
     },
@@ -230,7 +234,12 @@
     },
     mounted() {
       if (localStorage.snackbar) {
-        this.$store.dispatch('showSnackbarSimple', localStorage.snackbar);
+        this.createSnackbar({
+          text: localStorage.snackbar,
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
         delete localStorage.snackbar;
       }
     },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 750600ad82..058661caae 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -191,6 +191,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { set } from 'vue';
   import { mapGetters, mapActions } from 'vuex';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
@@ -224,8 +226,9 @@
     },
     mixins: [formMixin, constantsTranslationMixin, routerMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { show } = useKShow();
-      return { show };
+      return { show, createSnackbar };
     },
     props: {
       channelSetId: {
@@ -273,7 +276,12 @@
             channels.length > this.channels.length
               ? this.$tr('channelAdded')
               : this.$tr('channelRemoved');
-          this.$store.dispatch('showSnackbarSimple', snackbar);
+          this.createSnackbar({
+            text: snackbar,
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
           this.setChannelSet({ channels });
         },
       },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index fc9767b2e8..59e6be8f9d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -164,6 +164,8 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   import { mapActions, mapGetters } from 'vuex';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -177,11 +179,13 @@
       StudioCopyToken,
     },
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { show } = useKShow();
       const { windowIsSmall, windowBreakpoint } = useKResponsiveWindow();
       const { copyTokenToClipboard } = useToken();
 
       return {
+        createSnackbar,
         show,
         windowIsSmall,
         windowBreakpoint,
@@ -328,12 +332,22 @@
               this.loadChannelSetList();
               this.deleteDialog = false;
               this.collectionToDelete = null;
-              this.$store.dispatch('showSnackbarSimple', this.$tr('collectionDeleted'));
+              this.createSnackbar({
+                text: this.$tr('collectionDeleted'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
             })
             .catch(() => {
               this.deleteDialog = false;
               this.collectionToDelete = null;
-              this.$store.dispatch('showSnackbarSimple', this.$tr('deleteError'));
+              this.createSnackbar({
+                text: this.$tr('deleteError'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
             });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index d17629b2d6..61af7cc689 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -43,9 +43,7 @@ const createMockStore = () => {
         actions: mockActions,
       },
     },
-    actions: {
-      showSnackbarSimple: jest.fn(),
-    },
+    actions: {},
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
index 0de0f2c51d..3474cd031d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
@@ -59,7 +59,6 @@ const mockActions = {
   deleteChannelSet: jest.fn(() => Promise.resolve()),
   addChannels: jest.fn(() => Promise.resolve()),
   removeChannels: jest.fn(() => Promise.resolve()),
-  showSnackbarSimple: jest.fn(() => Promise.resolve()),
 };
 
 const makeStore = ({
@@ -130,9 +129,6 @@ const makeStore = ({
         },
       },
     },
-    actions: {
-      showSnackbarSimple: mockActions.showSnackbarSimple,
-    },
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
index 10269c1f79..39259c0f33 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
@@ -34,6 +34,7 @@
 <script>
 
   import { mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { generateFormMixin } from 'shared/mixins';
 
   const formMixin = generateFormMixin({
@@ -54,6 +55,10 @@
 
   export default {
     name: 'ChangePasswordForm',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     mixins: [formMixin],
     props: {
       value: {
@@ -80,7 +85,6 @@
       },
     },
     methods: {
-      ...mapActions(['showSnackbar']),
       ...mapActions('settings', ['updateUserPassword']),
 
       // This is called from formMixin
@@ -89,10 +93,20 @@
         return this.updateUserPassword(this.password)
           .then(() => {
             this.dialog = false;
-            this.showSnackbar({ text: this.$tr('paswordChangeSuccess') });
+            this.createSnackbar({
+              text: this.$tr('paswordChangeSuccess'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           })
           .catch(() => {
-            this.showSnackbar({ text: this.$tr('passwordChangeFailed') });
+            this.createSnackbar({
+              text: this.$tr('passwordChangeFailed'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
index 2760277d1a..e3d5fba3dd 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
@@ -32,6 +32,7 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { generateFormMixin } from 'shared/mixins';
 
   const formMixin = generateFormMixin({
@@ -45,6 +46,10 @@
 
   export default {
     name: 'FullNameForm',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     mixins: [formMixin],
     props: {
       value: {
@@ -83,10 +88,20 @@
         this.saveFullName(formData)
           .then(() => {
             this.dialog = false;
-            this.$store.dispatch('showSnackbar', { text: this.$tr('changesSavedMessage') });
+            this.createSnackbar({
+              text: this.$tr('changesSavedMessage'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           })
           .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('failedToSaveMessage') });
+            this.createSnackbar({
+              text: this.$tr('failedToSaveMessage'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
index 6f3be20ffa..0488131a8a 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
@@ -155,6 +155,7 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import StudioCopyToken from '../../../shared/views/StudioCopyToken';
   import FullNameForm from './FullNameForm';
   import ChangePasswordForm from './ChangePasswordForm';
@@ -162,6 +163,10 @@
 
   export default {
     name: 'Account',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       ChangePasswordForm,
       FullNameForm,
@@ -201,7 +206,12 @@
             this.showExportDataNotice = true;
           })
           .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('exportFailed') });
+            this.createSnackbar({
+              text: this.$tr('exportFailed'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
       channelLink(id) {
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
index 9d8cca72c7..036f6ea767 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
@@ -264,6 +264,7 @@
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapState } from 'vuex';
   import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { generateFormMixin, constantsTranslationMixin } from 'shared/mixins';
   import { LicensesList } from 'shared/leUtils/Licenses';
   import CountryField from 'shared/views/form/CountryField';
@@ -325,8 +326,9 @@
     },
     mixins: [constantsTranslationMixin, formMixin],
     setup() {
+      const { createSnackbar } = useKSnackbar();
       const { sendPoliteMessage } = useKLiveRegion();
-      return { sendPoliteMessage };
+      return { createSnackbar, sendPoliteMessage };
     },
     computed: {
       ...mapState('settings', ['channels']),
@@ -426,12 +428,22 @@
         // Send request
         this.requestStorage(formData)
           .then(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('requestSent') });
+            this.createSnackbar({
+              text: this.$tr('requestSent'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
             this.reset();
             this.$emit('submitted');
           })
           .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('requestFailed') });
+            this.createSnackbar({
+              text: this.$tr('requestFailed'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
     },
diff --git a/contentcuration/contentcuration/frontend/settings/pages/__tests__/account.spec.js b/contentcuration/contentcuration/frontend/settings/pages/__tests__/account.spec.js
index a6ab62b3f0..4bdbe57b4a 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/__tests__/account.spec.js
+++ b/contentcuration/contentcuration/frontend/settings/pages/__tests__/account.spec.js
@@ -1,6 +1,14 @@
 import { mount } from '@vue/test-utils';
 import Account from '../Account/index';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
 function makeWrapper(currentUser = {}) {
   return mount(Account, {
     computed: {
@@ -110,9 +118,12 @@ describe('account tab', () => {
       expect(notice.exists()).toBe(false);
     });
 
-    it(`should call 'showSnackbar' with a correct message`, () => {
-      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('showSnackbar', {
+    it(`should call 'createSnackbar' with a correct message`, () => {
+      expect(mockCreateSnackbar).toHaveBeenCalledWith({
         text: 'Unable to export data. Please try again.',
+        autoDismiss: true,
+        announce: true,
+        duration: 6000,
       });
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index eefc9d12b0..0ab5bba15a 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -69,7 +69,6 @@ import Vuetify, {
   VSlideXReverseTransition,
   VSlideXTransition,
   VSlideYTransition,
-  VSnackbar,
   VSpacer,
   VSpeedDial,
   VSubheader,
@@ -215,7 +214,6 @@ Vue.use(Vuetify, {
     VSlideXReverseTransition,
     VSlideXTransition,
     VSlideYTransition,
-    VSnackbar,
     VSpacer,
     VSpeedDial,
     VSubheader,
diff --git a/contentcuration/contentcuration/frontend/shared/composables/__mocks__/useSnackbar.js b/contentcuration/contentcuration/frontend/shared/composables/__mocks__/useSnackbar.js
deleted file mode 100644
index e57b7d41a3..0000000000
--- a/contentcuration/contentcuration/frontend/shared/composables/__mocks__/useSnackbar.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { computed } from 'vue';
-
-const MOCK_DEFAULTS = {
-  snackbarIsVisible: false,
-  snackbarOptions: {},
-  createSnackbar: jest.fn(),
-  clearSnackbar: jest.fn(),
-};
-
-export function useSnackbarMock(overrides = {}) {
-  const mocks = {
-    ...MOCK_DEFAULTS,
-    ...overrides,
-  };
-  const computedMocks = {};
-  for (const key in mocks) {
-    if (typeof mocks[key] !== 'function') {
-      computedMocks[key] = computed(() => mocks[key]);
-    } else {
-      computedMocks[key] = mocks[key];
-    }
-  }
-  return computedMocks;
-}
-
-export default jest.fn(() => useSnackbarMock());
diff --git a/contentcuration/contentcuration/frontend/shared/composables/useSnackbar.js b/contentcuration/contentcuration/frontend/shared/composables/useSnackbar.js
deleted file mode 100644
index 21d29a6179..0000000000
--- a/contentcuration/contentcuration/frontend/shared/composables/useSnackbar.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { computed } from 'vue';
-import useStore from 'shared/composables/useStore';
-
-// Composable wrapping snackbar Vuex store actions and getters
-export default function useSnackbar() {
-  const store = useStore();
-  const snackbarIsVisible = computed(() => store.getters.snackbarIsVisible);
-  const snackbarOptions = computed(() => store.getters.snackbarOptions);
-
-  const createSnackbar = (options = {}) => {
-    let snackbarOptions;
-    if (typeof options === 'string') {
-      snackbarOptions = { text: options, autoDismiss: true };
-    } else {
-      snackbarOptions = options;
-    }
-    return store.dispatch('showSnackbar', snackbarOptions);
-  };
-
-  const clearSnackbar = () => {
-    return store.dispatch('clearSnackbar');
-  };
-
-  return {
-    snackbarIsVisible,
-    snackbarOptions,
-    createSnackbar,
-    clearSnackbar,
-  };
-}
diff --git a/contentcuration/contentcuration/frontend/shared/composables/useToken.js b/contentcuration/contentcuration/frontend/shared/composables/useToken.js
index c17412472f..20d6264590 100644
--- a/contentcuration/contentcuration/frontend/shared/composables/useToken.js
+++ b/contentcuration/contentcuration/frontend/shared/composables/useToken.js
@@ -1,10 +1,12 @@
 import { getCurrentInstance } from 'vue';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
 /**
  * Composable for handling channel token
  * @returns {Object} - Object containing hyphenateToken and copyTokenToClipboard functions
  */
 export default function useToken() {
+  const { createSnackbar } = useKSnackbar();
   const clipboardAvailable = Boolean(navigator.clipboard);
   const instance = getCurrentInstance();
 
@@ -37,7 +39,12 @@ export default function useToken() {
   ) {
     if (!clipboardAvailable) {
       if (errorMessage) {
-        store.dispatch('showSnackbar', { text: errorMessage });
+        createSnackbar({
+          text: errorMessage,
+          autoDismiss: true,
+          announce: true,
+          duration: 6000,
+        });
       }
       if (onError) {
         onError();
@@ -45,7 +52,6 @@ export default function useToken() {
       return Promise.reject(new Error('Clipboard API not available'));
     }
 
-    const store = instance.proxy.$store;
     const analytics = instance.proxy.$analytics;
 
     let tokenToCopy = token;
@@ -58,7 +64,12 @@ export default function useToken() {
       .then(() => {
         analytics.trackEvent('copy_token');
         if (successMessage) {
-          store.dispatch('showSnackbar', { text: successMessage });
+          createSnackbar({
+            text: successMessage,
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         }
         if (onSuccess) {
           onSuccess();
@@ -66,7 +77,12 @@ export default function useToken() {
       })
       .catch(error => {
         if (errorMessage) {
-          store.dispatch('showSnackbar', { text: errorMessage });
+          createSnackbar({
+            text: errorMessage,
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         }
         if (onError) {
           onError(error);
diff --git a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
index cd1cb5f92f..0eb1ca53cb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
@@ -22,8 +22,14 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   export default {
     name: 'CopyToken',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       token: {
         type: String,
@@ -58,12 +64,22 @@
             .writeText(this.displayToken)
             .then(() => {
               const text = this.successText || this.$tr('copiedTokenId');
-              this.$store.dispatch('showSnackbar', { text });
+              this.createSnackbar({
+                text,
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
               this.$analytics.trackEvent('copy_token');
               this.$emit('copied');
             })
             .catch(() => {
-              this.$store.dispatch('showSnackbar', { text: this.$tr('copyFailed') });
+              this.createSnackbar({
+                text: this.$tr('copyFailed'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
             });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
index 8ca20f568b..be1801b1ce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
@@ -1,67 +1,43 @@
 <template>
 
-  <VSnackbar
-    v-if="snackbarIsVisible"
-    :key="key"
-    :timeout="snackbarOptions.duration"
-    left
-    multi-line
-    :value="snackbarIsVisible"
-    @input="visibilityToggled"
-  >
-    {{ snackbarOptions.text }}
-    <VBtn
-      v-if="snackbarOptions.actionText"
-      flat
-      text
-      @click="hideCallback"
-    >
-      {{ snackbarOptions.actionText }}
-    </VBtn>
-  </VSnackbar>
+  <KSnackbar
+    :isOpen="snackbarIsVisible"
+    :text="snackbarOptions.text"
+    :actionText="snackbarOptions.actionText"
+    :duration="snackbarOptions.duration"
+    :autoDismiss="snackbarOptions.autoDismiss"
+    :bottomOffset="snackbarOptions.bottomOffset"
+    :backdrop="snackbarOptions.backdrop"
+    :autofocus="snackbarOptions.autofocus"
+    :announce="snackbarOptions.announce"
+    :assertive="snackbarOptions.assertive"
+    @close="clearSnackbar"
+    @actionClick="snackbarOptions.actionCallback && snackbarOptions.actionCallback($event)"
+    @blur="snackbarOptions.onBlur && snackbarOptions.onBlur($event)"
+  />
 
 </template>
 
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import KSnackbar from 'kolibri-design-system/lib/KSnackbar/KSnackbar.vue';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   export default {
     name: 'GlobalSnackbar',
-    computed: {
-      ...mapGetters(['snackbarIsVisible', 'snackbarOptions']),
-      key() {
-        const options = Object.assign({}, this.snackbarOptions);
-        // The forceReuse option is used to force the reuse of the snackbar
-        // This is helpful when we want to just update the text but not re-run the transition
-        // This is used in the disconnected snackbar
-        if (options.forceReuse) {
-          options.text = '';
-          return JSON.stringify(options);
-        }
-        return JSON.stringify(options) + new Date();
-      },
+    components: {
+      KSnackbar,
     },
-    methods: {
-      hideCallback() {
-        if (this.snackbarOptions.actionCallback) {
-          this.snackbarOptions.actionCallback();
-        }
-        this.$store.dispatch('clearSnackbar');
-      },
-      visibilityToggled(visible) {
-        if (!visible) {
-          if (this.snackbarOptions.hideCallback) {
-            this.snackbarOptions.hideCallback();
-          }
-          this.$store.dispatch('clearSnackbar');
-        }
-      },
+    setup() {
+      const { snackbarIsVisible, snackbarOptions, clearSnackbar } = useKSnackbar();
+
+      return {
+        snackbarIsVisible,
+        snackbarOptions,
+        clearSnackbar,
+      };
     },
   };
 
 </script>
-
-
-<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/__tests__/useCommunityLibraryUpdates.spec.js b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/__tests__/useCommunityLibraryUpdates.spec.js
index 237c81207f..02caf4b841 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/__tests__/useCommunityLibraryUpdates.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/__tests__/useCommunityLibraryUpdates.spec.js
@@ -4,8 +4,6 @@ import { CommunityLibraryStatus, NotificationType } from 'shared/constants';
 
 import { CommunityLibrarySubmission } from 'shared/data/resources';
 
-jest.mock('shared/composables/useSnackbar');
-
 jest.mock('shared/data/resources', () => ({
   CommunityLibrarySubmission: {
     fetchCollection: jest.fn(),
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
index 432e429638..c085332e6b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
@@ -4,7 +4,7 @@ import { useFetch } from 'shared/composables/useFetch';
 import { CommunityLibrarySubmission } from 'shared/data/resources';
 import { CommunityLibraryStatus, NotificationType } from 'shared/constants';
 import { commonStrings } from 'shared/strings/commonStrings';
-import useSnackbar from 'shared/composables/useSnackbar';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
 const MAX_RESULTS_PER_PAGE = 10;
 
@@ -55,7 +55,7 @@ const statusToNotificationType = {
 export default function useCommunityLibraryUpdates({ queryParams } = {}) {
   const moreObject = ref(null);
   const isLoadingMore = ref(false);
-  const { createSnackbar } = useSnackbar();
+  const { createSnackbar } = useKSnackbar();
   /**
    * Community Library Submissions are objects that may represent two types of updates:
    * 1. Creation of a new submission (status: PENDING or SUPERSEDED)
@@ -175,7 +175,11 @@ export default function useCommunityLibraryUpdates({ queryParams } = {}) {
     } catch (error) {
       const returnedResults = wasLoadingMore ? submissionsUpdates.value : [];
       isLoadingMore.value = false;
-      createSnackbar(commonStrings.genericErrorMessage$());
+      createSnackbar({
+        text: commonStrings.genericErrorMessage$(),
+        autoDismiss: true,
+        announce: true,
+      });
       // Do not manage any error state in the useFetch composable, just return the current results
       return returnedResults;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
index 442a806055..ef30f5c854 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
@@ -90,7 +90,7 @@
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import { Modals } from 'shared/constants';
   import useStore from 'shared/composables/useStore';
-  import useSnackbar from 'shared/composables/useSnackbar';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   const NotificationsTab = {
     UNREAD: 0,
@@ -102,7 +102,7 @@
   const router = useRouter();
   const route = useRoute();
   const store = useStore();
-  const { createSnackbar } = useSnackbar();
+  const { createSnackbar } = useKSnackbar();
 
   const previousQuery = ref(null);
   const isSaving = ref(false);
@@ -175,7 +175,11 @@
         await store.dispatch('markNotificationsRead', timestamp.toISOString());
       }
     } catch (error) {
-      createSnackbar(commonStrings.genericErrorMessage$());
+      createSnackbar({
+        text: commonStrings.genericErrorMessage$(),
+        autoDismiss: true,
+        announce: true,
+      });
     } finally {
       isSaving.value = false;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
index 5999031f12..0411dda20a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
@@ -2,6 +2,15 @@ import { render, fireEvent, screen } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import StudioCopyToken from '../index.vue';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 function makeWrapper(props = {}) {
   const mockStore = {
     dispatch: jest.fn(),
@@ -71,7 +80,7 @@ describe('StudioCopyToken', () => {
     const { mockStore } = makeWrapper();
     const button = screen.getByRole('button');
     await fireEvent.click(button);
-    expect(mockStore.dispatch).toHaveBeenCalledWith('showSnackbar', { text: 'copiedTokenId' });
+    expect(mockCreateSnackbar).toHaveBeenCalled();
   });
 
   it('dispatches snackbar on failed copy', async () => {
@@ -82,7 +91,7 @@ describe('StudioCopyToken', () => {
     const { mockStore } = makeWrapper();
     const button = screen.getByRole('button');
     await fireEvent.click(button);
-    expect(mockStore.dispatch).toHaveBeenCalledWith('showSnackbar', { text: 'copyFailed' });
+    expect(mockCreateSnackbar).toHaveBeenCalled();
   });
 
   it('renders the copy button', () => {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 2a451c6d61..96f04d71c1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -144,6 +144,7 @@
 <script>
 
   import { set } from 'vue';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
   import ChannelThumbnail from './ChannelThumbnail';
   import ChannelSharing from './ChannelSharing';
@@ -158,6 +159,10 @@
 
   export default {
     name: 'ChannelModal',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       LanguageDropdown,
       ContentDefaults,
@@ -344,7 +349,12 @@
 
               window.location.replace(window.Urls.channel(newChannelId));
             } else {
-              this.$store.dispatch('showSnackbarSimple', this.$tr('changesSaved'));
+              this.createSnackbar({
+                text: this.$tr('changesSaved'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
               this.header = this.channel.name;
             }
             this.isDisable = false;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
index f08183ddfa..dc83b5f5a1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
@@ -82,6 +82,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import ChannelSharingTable from './ChannelSharingTable';
   import LoadingText from 'shared/views/LoadingText';
   import { SharingPermissions } from 'shared/constants';
@@ -89,6 +90,10 @@
 
   export default {
     name: 'ChannelSharing',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     components: {
       DropdownWrapper,
       LoadingText,
@@ -156,7 +161,12 @@
             });
 
             this.sharing = false;
-            this.$store.dispatch('showSnackbar', { text: this.$tr('invitationSentMessage') });
+            this.createSnackbar({
+              text: this.$tr('invitationSentMessage'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
             this.email = '';
             this.$refs.form.resetValidation();
           } catch (e) {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
index c3cbd26ecd..4f20b576d7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
@@ -97,10 +97,15 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import { SharingPermissions } from 'shared/constants';
 
   export default {
     name: 'ChannelSharingTable',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
@@ -220,23 +225,41 @@
           channelId: this.channelId,
         })
           .then(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('invitationSentMessage') });
+            this.createSnackbar({
+              text: this.$tr('invitationSentMessage'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           })
           .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('invitationFailedError') });
+            this.createSnackbar({
+              text: this.$tr('invitationFailedError'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
+            });
           });
       },
       handleDelete(invitationId) {
         this.deleteInvitation(invitationId).then(() => {
           this.showDeleteInvitation = false;
-          this.$store.dispatch('showSnackbar', { text: this.$tr('invitationDeletedMessage') });
+          this.createSnackbar({
+            text: this.$tr('invitationDeletedMessage'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
+          });
         });
       },
       grantEditAccess(userId) {
         this.showMakeEditor = false;
         this.makeEditor({ userId, channelId: this.channelId }).then(() => {
-          this.$store.dispatch('showSnackbar', {
+          this.createSnackbar({
             text: this.$tr('editPermissionsGrantedMessage'),
+            autoDismiss: true,
+            announce: true,
+            duration: 6000,
           });
         });
       },
@@ -254,8 +277,11 @@
             });
           })
           .then(() => {
-            this.$store.dispatch('showSnackbar', {
+            this.createSnackbar({
               text: this.$tr('userRemovedMessage'),
+              autoDismiss: true,
+              announce: true,
+              duration: 6000,
             });
           });
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
index e12f95fd87..7f1c5ed3e6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
@@ -6,6 +6,15 @@ import VueRouter from 'vue-router';
 import ChannelSharingTable from '../ChannelSharingTable';
 import { SharingPermissions } from 'shared/constants';
 
+const mockCreateSnackbar = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
+  __esModule: true,
+  default: () => ({
+    createSnackbar: mockCreateSnackbar,
+  }),
+}));
+
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -37,7 +46,6 @@ const mockActions = {
   deleteInvitation: jest.fn(() => Promise.resolve()),
   makeEditor: jest.fn(() => Promise.resolve()),
   removeViewer: jest.fn(() => Promise.resolve()),
-  showSnackbar: jest.fn(() => Promise.resolve()),
 };
 
 const createMockStore = (users = [currentUser, otherUser], invitations = [pendingInvitation]) => {
@@ -62,9 +70,7 @@ const createMockStore = (users = [currentUser, otherUser], invitations = [pendin
         },
       },
     },
-    actions: {
-      showSnackbar: mockActions.showSnackbar,
-    },
+    actions: {    },
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
index bd25252e3c..6492d37042 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
@@ -39,8 +39,14 @@
 
 <script>
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+
   export default {
     name: 'TechnicalTextBlock',
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       text: {
         type: String,
@@ -77,12 +83,20 @@
           navigator.clipboard
             .writeText(this.formattedText)
             .then(() => {
-              this.$store.dispatch('showSnackbar', {
+              this.createSnackbar({
                 text: this.$tr('copiedToClipboardConfirmation'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
               });
             })
             .catch(() => {
-              this.$store.dispatch('showSnackbar', { text: this.$tr('copiedToClipboardFailure') });
+              this.createSnackbar({
+                text: this.$tr('copiedToClipboardFailure'),
+                autoDismiss: true,
+                announce: true,
+                duration: 6000,
+              });
             });
         }
       },
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/baseStore.js b/contentcuration/contentcuration/frontend/shared/vuex/baseStore.js
index a12991c35c..02a5fabd42 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/baseStore.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/baseStore.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
 import session from './session';
 import ConnectionPlugin from './connectionPlugin';
-import snackbar from './snackbar';
 import errors from './errors';
 import contextMenu from './contextMenu';
 import channel from './channel';
@@ -49,7 +48,6 @@ export default function storeFactory({
   modules = {
     session,
     errors,
-    snackbar,
     contextMenu,
     channel,
     file,
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/snackbar/index.js b/contentcuration/contentcuration/frontend/shared/vuex/snackbar/index.js
deleted file mode 100644
index 4fc09401a8..0000000000
--- a/contentcuration/contentcuration/frontend/shared/vuex/snackbar/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-export default {
-  state: {
-    isVisible: false,
-    options: {
-      text: '',
-      // duration in ms, null indicates it should not automatically dismiss
-      duration: 6000,
-      actionText: '',
-      actionCallback: null,
-      hideCallback: null,
-    },
-  },
-  getters: {
-    snackbarIsVisible(state) {
-      return state.isVisible;
-    },
-    snackbarOptions(state) {
-      return state.options;
-    },
-  },
-  actions: {
-    showSnackbar({ commit, state }, { text, duration, actionText, actionCallback }) {
-      if (state.options.hideCallback) {
-        state.options.hideCallback();
-      }
-      return new Promise(hideCallback => {
-        commit('CORE_CREATE_SNACKBAR', {
-          text,
-          duration,
-          actionText,
-          actionCallback,
-          hideCallback,
-        });
-      });
-    },
-    showSnackbarSimple({ commit, state }, text) {
-      if (state.options.hideCallback) {
-        state.options.hideCallback();
-      }
-      return new Promise(hideCallback => {
-        commit('CORE_CREATE_SNACKBAR', { text, hideCallback });
-      });
-    },
-    clearSnackbar({ commit, state }) {
-      if (state.options.hideCallback) {
-        state.options.hideCallback();
-      }
-      commit('CORE_CLEAR_SNACKBAR');
-    },
-  },
-  mutations: {
-    CORE_CREATE_SNACKBAR(state, snackbarOptions = {}) {
-      // reset
-      state.isVisible = false;
-      state.options = {};
-      // set new options
-      state.isVisible = true;
-      // options include text, duration, actionText, actionCallback,
-      // hideCallback, bottomPosition
-      state.options = snackbarOptions;
-    },
-    CORE_CLEAR_SNACKBAR(state) {
-      state.isVisible = false;
-      state.options = {};
-    },
-    CORE_SET_SNACKBAR_TEXT(state, text) {
-      state.options.text = text;
-    },
-  },
-};

From bd3eb029ff53ece1fe30a065b56d4395966a60b5 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 12:18:50 +0000
Subject: [PATCH 2/6] [pre-commit.ci lite] apply automatic fixes

---
 .../pages/Channels/ChannelItem.vue              |  8 ++++----
 .../__tests__/channelActionsDropdown.spec.js    |  3 +--
 .../pages/Users/EmailUsersDialog.vue            |  8 ++++----
 .../pages/Users/UserActionsDropdown.vue         |  8 ++++----
 .../administration/pages/Users/UserDetails.vue  |  8 ++++----
 .../Users/__tests__/emailUsersDialog.spec.js    | 17 +++++++++++++----
 .../QuickEditModal/EditAudienceModal.vue        |  2 +-
 .../QuickEditModal/EditCompletionModal.vue      |  6 +++---
 .../QuickEditModal/EditSourceModal.vue          |  8 ++++----
 .../__tests__/EditAudienceModal.spec.js         |  4 +---
 .../__tests__/EditBooleanMapModal.spec.js       |  4 +---
 .../__tests__/EditLanguageModal.spec.js         |  7 +------
 .../__tests__/EditSourceModal.spec.js           |  4 +---
 .../__tests__/EditTitleDescriptionModal.spec.js |  1 -
 .../RelatedResourcesTab/RelatedResourcesTab.vue |  8 ++++----
 .../channelEdit/components/ResourcePanel.vue    |  8 ++++----
 .../channelEdit/pages/AddNextStepsPage.vue      |  8 ++++----
 .../channelEdit/pages/AddPreviousStepsPage.vue  |  8 ++++----
 .../pages/StagingTreePage/index.spec.js         |  1 -
 .../channelEdit/pages/StagingTreePage/index.vue |  8 ++++----
 .../ImportFromChannels/SearchResultsList.vue    |  8 ++++----
 .../__tests__/SearchOrBrowseWindow.spec.js      |  1 -
 .../channelEdit/views/files/FileUploadItem.vue  |  8 ++++----
 .../channelEdit/views/trash/TrashModal.vue      |  8 ++++----
 .../views/trash/__tests__/trashModal.spec.js    |  1 -
 .../channelList/views/Channel/ChannelItem.vue   |  8 ++++----
 .../__tests__/DeleteChannelModal.spec.js        |  3 +--
 .../RemoveChannelFromListModal.spec.js          |  3 +--
 .../__tests__/StudioMyChannels.spec.js          |  4 +---
 .../__tests__/StudioStarredChannels.spec.js     |  4 +---
 .../__tests__/StudioViewOnlyChannels.spec.js    |  4 +---
 .../pages/Account/ChangePasswordForm.vue        |  2 +-
 .../settings/pages/Account/FullNameForm.vue     |  2 +-
 .../frontend/settings/pages/Account/index.vue   |  8 ++++----
 .../composables/useCommunityLibraryUpdates.js   |  2 +-
 .../shared/views/NotificationsModal/index.vue   |  2 +-
 .../__tests__/studioCopyToken.spec.js           |  1 -
 .../shared/views/channel/ChannelModal.vue       |  8 ++++----
 .../shared/views/channel/ChannelSharing.vue     |  8 ++++----
 .../__tests__/channelSharingTable.spec.js       |  3 +--
 40 files changed, 100 insertions(+), 117 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
index 5a3034424d..425f3a6e9c 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
@@ -230,10 +230,6 @@
 
   export default {
     name: 'ChannelItem',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ChannelActionsDropdown,
       ClipboardChip,
@@ -241,6 +237,10 @@
       CommunityLibraryStatusButton,
     },
     mixins: [fileSizeMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: Array,
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
index dbea3c0750..329bfde410 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
@@ -13,7 +13,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -69,7 +68,7 @@ const createMockStore = (channelProps = {}) => {
         },
       },
     },
-    actions: {    },
+    actions: {},
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index b19c40e0d9..42281d0a3b 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -143,15 +143,15 @@
 
   export default {
     name: 'EmailUsersDialog',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ExpandableList,
       StudioChip,
     },
     mixins: [formMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       value: {
         type: Boolean,
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index f016a257c6..c9a693cf1d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -123,14 +123,14 @@
 
   export default {
     name: 'UserActionsDropdown',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       EmailUsersDialog,
       UserPrivilegeModal,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       userId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
index 0a1a7a422f..8685c9be0c 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -218,10 +218,6 @@
 
   export default {
     name: 'UserDetails',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       FullscreenModal,
       DetailsRow,
@@ -239,6 +235,10 @@
       },
     },
     mixins: [fileSizeMixin, routerMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       userId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
index d85ff8ec9a..4f3590b3b1 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
@@ -13,7 +13,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
@@ -54,7 +53,7 @@ const createMockStore = () => {
         },
       },
     },
-    actions: {    },
+    actions: {},
   });
 };
 
@@ -270,7 +269,12 @@ describe('EmailUsersDialog', () => {
       await user.type(screen.getByLabelText(/email body/i), 'Test Message');
       await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      expect(mockCreateSnackbar).toHaveBeenCalledWith({ text: 'Email sent', autoDismiss: true, announce: true, duration: 6000 });
+      expect(mockCreateSnackbar).toHaveBeenCalledWith({
+        text: 'Email sent',
+        autoDismiss: true,
+        announce: true,
+        duration: 6000,
+      });
     });
 
     it('shows error snackbar when sending fails', async () => {
@@ -282,7 +286,12 @@ describe('EmailUsersDialog', () => {
       await user.type(screen.getByLabelText(/email body/i), 'Test Message');
       await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      expect(mockCreateSnackbar).toHaveBeenCalledWith({ text: 'Email failed to send', autoDismiss: true, announce: true, duration: 6000 });
+      expect(mockCreateSnackbar).toHaveBeenCalledWith({
+        text: 'Email failed to send',
+        autoDismiss: true,
+        announce: true,
+        duration: 6000,
+      });
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
index 2e437a7752..f7f6a80540 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue
@@ -62,11 +62,11 @@
 
   export default {
     name: 'EditAudienceModal',
+    mixins: [constantsTranslationMixin],
     setup() {
       const { createSnackbar } = useKSnackbar();
       return { createSnackbar };
     },
-    mixins: [constantsTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
index 3436bb18a0..1bd92de529 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCompletionModal.vue
@@ -34,13 +34,13 @@
 
   export default {
     name: 'EditCompletionModal',
+    components: {
+      CompletionOptions,
+    },
     setup() {
       const { createSnackbar } = useKSnackbar();
       return { createSnackbar };
     },
-    components: {
-      CompletionOptions,
-    },
     props: {
       nodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
index f9f9e39b4e..fdbe7a8f68 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
@@ -167,14 +167,14 @@
 
   export default {
     name: 'EditSourceModal',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       HelpTooltip,
       LicenseDropdown,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeIds: {
         type: Array,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
index d1dc59257b..4a29228514 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js
@@ -12,7 +12,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 let nodes;
 
 let store;
@@ -61,8 +60,7 @@ describe('EditAudienceModal', () => {
     contentNodeActions = {
       updateContentNode: jest.fn(),
     };
-    generalActions = {
-    };
+    generalActions = {};
     store = new Store({
       actions: generalActions,
       modules: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index 587405898e..b0fda9a706 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -15,7 +15,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 let nodes;
 
 let store;
@@ -110,8 +109,7 @@ describe('EditBooleanMapModal', () => {
       updateContentNode: jest.fn(),
       updateContentNodeDescendants: jest.fn(),
     };
-    generalActions = {
-    };
+    generalActions = {};
     store = new Store({
       actions: generalActions,
       modules: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
index 9c044b4f51..7ea66c3623 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js
@@ -12,7 +12,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const nodes = [
   { id: 'test-en-res', language: 'en' },
   { id: 'test-es-res', language: 'es' },
@@ -42,13 +41,9 @@ function makeWrapper(nodeIds) {
   const updateContentNodeDescendants = jest.spyOn(wrapper.vm, 'updateContentNodeDescendants');
   updateContentNodeDescendants.mockResolvedValue(null);
 
-
   const handleSave = jest.spyOn(wrapper.vm, 'handleSave');
 
-  return [
-    wrapper,
-    { updateContentNode, updateContentNodeDescendants, handleSave },
-  ];
+  return [wrapper, { updateContentNode, updateContentNodeDescendants, handleSave }];
 }
 
 async function chooseLanguage(wrapper, language) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index 4003c2fad2..470e14131f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -12,7 +12,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 let nodes;
 
 let store;
@@ -69,8 +68,7 @@ describe('EditSourceModal', () => {
     contentNodeActions = {
       updateContentNode: jest.fn(),
     };
-    generalActions = {
-    };
+    generalActions = {};
     store = new Store({
       actions: generalActions,
       modules: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
index 1f32f1cf5f..9255f1198b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
@@ -10,7 +10,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const nodeId = 'test-id';
 
 const node = {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
index 07369ef789..0cfdb4e9aa 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
@@ -131,14 +131,14 @@
 
   export default {
     name: 'RelatedResourcesTab',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ContentNodeIcon,
       RelatedResourcesList,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 84b7069b18..43559a71ca 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -539,10 +539,6 @@
 
   export default {
     name: 'ResourcePanel',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ContentNodeLearningActivityIcon,
       LoadingText,
@@ -556,6 +552,10 @@
       Tabs,
     },
     mixins: [constantsTranslationMixin, metadataTranslationMixin, fileSizeMixin, titleMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
index a98f188c4d..3384b30c7f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/AddNextStepsPage.vue
@@ -21,14 +21,14 @@
 
   export default {
     name: 'AddNextStepsPage',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       AddRelatedResourcesModal,
     },
     mixins: [routerMixin, titleMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       targetNodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
index f84491a464..703689211d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/AddPreviousStepsPage.vue
@@ -21,14 +21,14 @@
 
   export default {
     name: 'AddPreviousStepsPage',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       AddRelatedResourcesModal,
     },
     mixins: [routerMixin, titleMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       targetNodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
index b8619a61ff..026079363b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.spec.js
@@ -17,7 +17,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 2ac886730a..8c7d0d667c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -370,10 +370,6 @@
 
   export default {
     name: 'StagingTreePage',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       BottomBar,
       Breadcrumbs,
@@ -390,6 +386,10 @@
       OfflineText,
     },
     mixins: [fileSizeMixin, titleMixin, routerMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
index 02b973c94b..d7374e1f4d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
@@ -141,10 +141,6 @@
 
   export default {
     name: 'SearchResultsList',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       BrowsingCard,
       Pagination,
@@ -154,6 +150,10 @@
       LoadingText,
     },
     mixins: [constantsTranslationMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       selected: {
         type: Array,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
index 323a658f54..0198b9f1c7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/__tests__/SearchOrBrowseWindow.spec.js
@@ -12,7 +12,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 // Mock the jsonSchema compile function to always return true
 jest.mock('shared/utils/jsonSchema', () => ({
   compile: () => () => true,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index bc0cff1f53..90f66005c1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -82,16 +82,16 @@
 
   export default {
     name: 'FileUploadItem',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       Uploader,
       FileDropzone,
       FileStatusText,
     },
     mixins: [constantsTranslationMixin, fileSizeMixin, fileStatusMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       file: {
         type: Object,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 42ef0c02f0..71a405bac2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -192,10 +192,6 @@
 
   export default {
     name: 'TrashModal',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ContentNodeIcon,
       ResourceDrawer,
@@ -205,6 +201,10 @@
       MoveModal,
     },
     mixins: [titleMixin, routerMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       nodeId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index 0c4c4d2b60..a82b913f91 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -17,7 +17,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const tr = createTranslator('TrashModal', TrashModal.$trs);
 const moveTr = createTranslator('MoveModal', MoveModal.$trs);
 const nodePanelTr = createTranslator('NodePanel', NodePanel.$trs);
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index cd01e427b4..8478d2b200 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -248,16 +248,16 @@
 
   export default {
     name: 'ChannelItem',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ChannelStar,
       ChannelTokenModal,
       RemoveChannelModal,
       Thumbnail,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
index 6c8b2a49e7..05a8a51f83 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
@@ -11,7 +11,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const mockDeleteChannel = jest.fn().mockResolvedValue();
 
 function createStore() {
@@ -21,7 +20,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {    },
+    actions: {},
     modules: {
       channel: {
         namespaced: true,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
index 40d3b6f26b..c33f3ef2af 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
@@ -11,7 +11,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const mockRemoveViewer = jest.fn().mockResolvedValue();
 
 function createStore() {
@@ -21,7 +20,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {    },
+    actions: {},
     modules: {
       channel: {
         namespaced: true,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
index 5452f105ca..2fb9f5599c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels/__tests__/StudioMyChannels.spec.js
@@ -14,7 +14,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -69,8 +68,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {
-    },
+    actions: {},
     modules: {
       channel: {
         namespaced: true,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
index e0cf458280..bf809f1577 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels/__tests__/StudioStarredChannels.spec.js
@@ -14,7 +14,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -68,8 +67,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {
-    },
+    actions: {},
     modules: {
       channel: {
         namespaced: true,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
index 73b6316abb..dfc29337b5 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels/__tests__/StudioViewOnlyChannels.spec.js
@@ -14,7 +14,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
@@ -68,8 +67,7 @@ function createStore() {
         currentUser: { id: 'user-id' },
       },
     },
-    actions: {
-    },
+    actions: {},
     modules: {
       channel: {
         namespaced: true,
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
index 39259c0f33..2d56f20463 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/ChangePasswordForm.vue
@@ -55,11 +55,11 @@
 
   export default {
     name: 'ChangePasswordForm',
+    mixins: [formMixin],
     setup() {
       const { createSnackbar } = useKSnackbar();
       return { createSnackbar };
     },
-    mixins: [formMixin],
     props: {
       value: {
         type: Boolean,
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
index e3d5fba3dd..c49f7d45a8 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/FullNameForm.vue
@@ -46,11 +46,11 @@
 
   export default {
     name: 'FullNameForm',
+    mixins: [formMixin],
     setup() {
       const { createSnackbar } = useKSnackbar();
       return { createSnackbar };
     },
-    mixins: [formMixin],
     props: {
       value: {
         type: Boolean,
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
index 0488131a8a..05c7dc110e 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
@@ -163,16 +163,16 @@
 
   export default {
     name: 'Account',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       ChangePasswordForm,
       FullNameForm,
       DeleteAccountForm,
       StudioCopyToken,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         showFullNameForm: false,
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
index c085332e6b..a5f4fb37dd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
@@ -1,10 +1,10 @@
 import { ref, computed, unref } from 'vue';
 import pickBy from 'lodash/pickBy';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 import { useFetch } from 'shared/composables/useFetch';
 import { CommunityLibrarySubmission } from 'shared/data/resources';
 import { CommunityLibraryStatus, NotificationType } from 'shared/constants';
 import { commonStrings } from 'shared/strings/commonStrings';
-import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
 const MAX_RESULTS_PER_PAGE = 10;
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
index ef30f5c854..3cf26deccf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
@@ -80,6 +80,7 @@
   import { useRoute, useRouter } from 'vue-router/composables';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
+  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
   import NotificationFilters from './NotificationFilters.vue';
   import NotificationList from './NotificationList.vue';
   import useCommunityLibraryUpdates from './composables/useCommunityLibraryUpdates';
@@ -90,7 +91,6 @@
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import { Modals } from 'shared/constants';
   import useStore from 'shared/composables/useStore';
-  import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 
   const NotificationsTab = {
     UNREAD: 0,
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
index 0411dda20a..6b02aa9904 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
@@ -10,7 +10,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 function makeWrapper(props = {}) {
   const mockStore = {
     dispatch: jest.fn(),
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 96f04d71c1..f80462fab4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -159,10 +159,6 @@
 
   export default {
     name: 'ChannelModal',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       LanguageDropdown,
       ContentDefaults,
@@ -174,6 +170,10 @@
       ToolBar,
     },
     mixins: [routerMixin],
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
index dc83b5f5a1..e5905ec685 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
@@ -90,15 +90,15 @@
 
   export default {
     name: 'ChannelSharing',
-    setup() {
-      const { createSnackbar } = useKSnackbar();
-      return { createSnackbar };
-    },
     components: {
       DropdownWrapper,
       LoadingText,
       ChannelSharingTable,
     },
+    setup() {
+      const { createSnackbar } = useKSnackbar();
+      return { createSnackbar };
+    },
     props: {
       channelId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
index 7f1c5ed3e6..a99135fc85 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelSharingTable.spec.js
@@ -14,7 +14,6 @@ jest.mock('kolibri-design-system/lib/composables/useKSnackbar', () => ({
   }),
 }));
 
-
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -70,7 +69,7 @@ const createMockStore = (users = [currentUser, otherUser], invitations = [pendin
         },
       },
     },
-    actions: {    },
+    actions: {},
   });
 };
 

From 7f8524b9ef098113e3b7d394f6d14f8cf69e27e5 Mon Sep 17 00:00:00 2001
From: Monier Ayman <monierayman2007@gmail.com>
Date: Fri, 2 Oct 2026 13:48:30 +0300
Subject: [PATCH 3/6] Fix snackbar migration review feedback

---
 .../sidePanels/ReviewSubmissionSidePanel.vue  |  1 +
 .../ReviewSubmissionSidePanel.spec.js         | 10 ++-
 .../Clipboard/ContentNodeOptions.vue          |  6 +-
 .../components/Clipboard/index.vue            |  9 +--
 .../components/ContentNodeEditListItem.vue    |  4 +-
 .../components/ContentNodeOptions.vue         | 11 ++--
 .../__tests__/EditSourceModal.spec.js         |  5 +-
 .../EditTitleDescriptionModal.spec.js         |  5 +-
 .../SubmitToCommunityLibrarySidePanel.spec.js |  4 +-
 .../index.vue                                 |  1 +
 .../channelEdit/views/CurrentTopicView.vue    | 11 ++--
 .../ImportFromChannelsModal.vue               |  7 ++-
 .../SearchOrBrowseWindow.vue                  |  3 +-
 .../views/trash/__tests__/trashModal.spec.js  |  8 ++-
 .../__tests__/DeleteChannelModal.spec.js      |  2 +-
 .../RemoveChannelFromListModal.spec.js        |  2 +-
 .../frontend/shared/views/GlobalSnackbar.vue  | 18 +++++-
 .../shared/views/NotificationsModal/index.vue |  1 +
 .../views/__tests__/GlobalSnackbar.spec.js    | 61 +++++++++++++++++++
 19 files changed, 126 insertions(+), 43 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js

diff --git a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
index f869ba4ac4..cc39803552 100644
--- a/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue
@@ -530,6 +530,7 @@
           autoDismiss: false,
           announce: true,
           actionText: 'Cancel',
+          autofocus: true,
           actionCallback: () => {
             clearTimeout(timer);
             // Do not emit close just yet, so that the component isn't unmounted
diff --git a/contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js b/contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js
index 5fd6089622..f03bf33f4a 100644
--- a/contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/components/sidePanels/__tests__/ReviewSubmissionSidePanel.spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 import { factory } from '../../../store';
 import router from '../../../router';
 
@@ -137,6 +138,9 @@ const testData = {
 };
 
 describe('ReviewSubmissionSidePanel', () => {
+  beforeEach(() => {
+    useKSnackbar().clearSnackbar();
+  });
   it('submission data is prefilled', async () => {
     const { channel, submission } = testData.flagged;
     const wrapper = await makeWrapper({ channel, latestSubmission: submission });
@@ -349,7 +353,7 @@ describe('ReviewSubmissionSidePanel', () => {
       const confirmButton = wrapper.findComponent({ ref: 'confirmButtonRef' });
       await confirmButton.trigger('click');
 
-      expect(store.getters['snackbarIsVisible']).toBe(true);
+      expect(useKSnackbar().snackbarIsVisible.value).toBe(true);
       expect(AdminCommunityLibrarySubmission.resolve).not.toHaveBeenCalled();
     });
 
@@ -390,7 +394,7 @@ describe('ReviewSubmissionSidePanel', () => {
           jest.runAllTimers();
           await wrapper.vm.$nextTick();
 
-          expect(store.getters['snackbarOptions'].text).toBe('Submission approved');
+          expect(useKSnackbar().snackbarOptions.value.text).toBe('Submission approved');
           store.replaceState(origStoreState);
         });
 
@@ -481,7 +485,7 @@ describe('ReviewSubmissionSidePanel', () => {
           jest.runAllTimers();
           await wrapper.vm.$nextTick();
 
-          expect(store.getters['snackbarOptions'].text).toBe('Submission flagged for review');
+          expect(useKSnackbar().snackbarOptions.value.text).toBe('Submission flagged for review');
           store.replaceState(origStoreState);
         });
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
index 2965045937..da48401b23 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue
@@ -131,8 +131,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -149,8 +148,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index ba6f52b227..ee8515aefb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -362,8 +362,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -405,8 +404,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -427,8 +425,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 4af3d47e40..30a20dfd57 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -316,9 +316,9 @@
               text: this.$tr('copiedSnackbar'),
               duration: 6000,
               actionText: this.$tr('undo'),
+              autofocus: true,
               actionCallback: () => changeTracker.revert(),
-              // Keep cleanup deferred, as with the previous dismissal Promise.
-              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              hideCallback: () => changeTracker.cleanUp(),
               announce: true,
             });
           })
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index 12d64fdec8..067c5e2663 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -331,9 +331,9 @@
             text: this.$tr('removedItems'),
             duration: 6000,
             actionText: this.$tr('undo'),
+            autofocus: true,
             actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -349,8 +349,7 @@
               // TODO: implement revert functionality for clipboard
               // actionText: this.$tr('undo'),
               // actionCallback: () => changeTracker.revert(),
-              // Keep cleanup deferred, as with the previous dismissal Promise.
-              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              hideCallback: () => changeTracker.cleanUp(),
               announce: true,
             });
           },
@@ -383,9 +382,9 @@
               text: this.$tr('copiedSnackbar'),
               duration: 6000,
               actionText: this.$tr('undo'),
+              autofocus: true,
               actionCallback: () => changeTracker.revert(),
-              // Keep cleanup deferred, as with the previous dismissal Promise.
-              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              hideCallback: () => changeTracker.cleanUp(),
               announce: true,
             });
           })
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index 470e14131f..b9781d0ae0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -55,6 +55,7 @@ const makeWrapper = nodeIds => {
 
 describe('EditSourceModal', () => {
   beforeEach(() => {
+    mockCreateSnackbar.mockClear();
     nodes = {
       node1: {
         id: 'node1',
@@ -262,7 +263,7 @@ describe('EditSourceModal', () => {
       wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
 
       const animationFrameId = requestAnimationFrame(() => {
-        expect(mockCreateSnackbar).toHaveBeenCalled();
+        expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Edited attribution for 2 resources' }));
         cancelAnimationFrame(animationFrameId);
       });
     });
@@ -273,7 +274,7 @@ describe('EditSourceModal', () => {
       wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
 
       const animationFrameId = requestAnimationFrame(() => {
-        expect(mockCreateSnackbar).toHaveBeenCalled();
+        expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Edited attribution for 1 resource' }));
         cancelAnimationFrame(animationFrameId);
       });
     });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
index 9255f1198b..ec26447e99 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditTitleDescriptionModal.spec.js
@@ -24,9 +24,9 @@ describe('EditTitleDescriptionModal', () => {
   let titleInput;
   let descriptionInput;
   let updateContentNode;
-  let storeDispatch;
 
   beforeEach(() => {
+    mockCreateSnackbar.mockClear();
     wrapper = mount(EditTitleDescriptionModal, {
       store: storeFactory({
         modules: {
@@ -45,7 +45,6 @@ describe('EditTitleDescriptionModal', () => {
     });
 
     updateContentNode = jest.spyOn(wrapper.vm, 'updateContentNode').mockImplementation(() => {});
-    storeDispatch = jest.spyOn(wrapper.vm.$store, 'dispatch');
     modal = wrapper.findComponent('[data-test="edit-title-description-modal"]');
     titleInput = wrapper.findComponent('[data-test="title-input"]');
     descriptionInput = wrapper.findComponent('[data-test="description-input"]');
@@ -113,7 +112,7 @@ describe('EditTitleDescriptionModal', () => {
 
   it("should show 'Changes saved' on a snackbar on success submit", async () => {
     await wrapper.vm.handleSave();
-    expect(mockCreateSnackbar).toHaveBeenCalled();
+    expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
   });
 
   it("should emit 'close' event on success submit", async () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
index 502db5a89e..33e6b8daa0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
@@ -1,5 +1,6 @@
 import { computed, ref } from 'vue';
 import { mount } from '@vue/test-utils';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
 import { factory } from '../../../../store';
 
 import SubmitToCommunityLibrarySidePanel from '../';
@@ -115,6 +116,7 @@ const submittedLatestSubmission = { channel_version: 2, status: CommunityLibrary
 
 describe('SubmitToCommunityLibrarySidePanel', () => {
   beforeEach(() => {
+    useKSnackbar().clearSnackbar();
     store.state.currentChannel.currentChannelId = null;
     store.state.channel.channelsMap = {};
   });
@@ -605,7 +607,7 @@ describe('SubmitToCommunityLibrarySidePanel', () => {
       await submitButton.trigger('click');
       await wrapper.vm.$nextTick();
 
-      expect(store.getters['snackbarIsVisible']).toBe(true);
+      expect(useKSnackbar().snackbarIsVisible.value).toBe(true);
       expect(CommunityLibrarySubmission.create).not.toHaveBeenCalled();
       jest.useRealTimers();
     });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index 092b25624c..109c3eea48 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -604,6 +604,7 @@
           autoDismiss: false,
           announce: true,
           actionText: cancelAction$(),
+          autofocus: true,
           actionCallback: () => {
             clearTimeout(timer);
           },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index f6cc862628..f7611a7f68 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -914,9 +914,9 @@
             text: this.$tr('removedItems', { count: id__in.length }),
             duration: 6000,
             actionText: this.$tr('undo'),
+            autofocus: true,
             actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -933,8 +933,7 @@
             // TODO: implement revert functionality for clipboard
             // actionText: this.$tr('undo'),
             // actionCallback: () => changeTracker.revert(),
-            // Keep cleanup deferred, as with the previous dismissal Promise.
-            hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+            hideCallback: () => changeTracker.cleanUp(),
             announce: true,
           });
         });
@@ -980,9 +979,9 @@
                 text: this.$tr('copiedItems'),
                 duration: 6000,
                 actionText: this.$tr('undo'),
+                autofocus: true,
                 actionCallback: () => changeTracker.revert(),
-                // Keep cleanup deferred, as with the previous dismissal Promise.
-                hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+                hideCallback: () => changeTracker.cleanUp(),
                 announce: true,
               });
             } else {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
index 98847971e7..102a2fabb3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
@@ -94,6 +94,7 @@
 
 <script>
 
+  import useKSnackbar from "kolibri-design-system/lib/composables/useKSnackbar";
   import { mapActions, mapMutations, mapState, mapGetters } from 'vuex';
   import sumBy from 'lodash/sumBy';
   import { RouteNames } from '../../constants';
@@ -124,6 +125,10 @@
     name: 'ImportFromChannelsModal',
     components: { FullscreenModal, ResourceDrawer },
     mixins: [routerMixin],
+    setup() {
+      const { clearSnackbar } = useKSnackbar();
+      return { clearSnackbar };
+    },
     data() {
       return {
         previewNode: null,
@@ -186,7 +191,7 @@
       },
     },
     beforeRouteUpdate(to, from, next) {
-      this.$store.dispatch('clearSnackbar');
+      this.clearSnackbar();
       next();
     },
     mounted() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index b5a89af1fb..2c39036c44 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -753,8 +753,7 @@
               // TODO: implement revert functionality for clipboard
               // actionText: this.$tr('undo'),
               // actionCallback: () => changeTracker.revert(),
-              // Keep cleanup deferred, as with the previous dismissal Promise.
-              hideCallback: () => Promise.resolve().then(() => changeTracker.cleanUp()),
+              hideCallback: () => changeTracker.cleanUp(),
               announce: true,
             });
           })
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index a82b913f91..39711670bd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -107,6 +107,7 @@ async function makeWrapper(items = testChildren, { isLoading = false, hasMore =
 describe('TrashModal', () => {
   beforeEach(() => {
     jest.restoreAllMocks();
+    mockCreateSnackbar.mockClear();
   });
 
   describe('on load', () => {
@@ -232,8 +233,7 @@ describe('TrashModal', () => {
     it('successful deletion triggers snackbar and reloads nodes', async () => {
       jest.spyOn(TrashModal.methods, 'deleteContentNodes').mockResolvedValue();
 
-      const { user, loadNodesSpy, store } = await makeWrapper();
-      const dispatchSpy = jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
+      const { user, loadNodesSpy } = await makeWrapper();
 
       await user.click(within(screen.getByTestId('selectall')).getByRole('checkbox'));
       await user.click(screen.getByRole('button', { name: tr.$tr('deleteButton') }));
@@ -242,7 +242,9 @@ describe('TrashModal', () => {
       );
 
       await waitFor(() => {
-        expect(mockCreateSnackbar).toHaveBeenCalled();
+        expect(mockCreateSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({ text: tr.$tr("deleteSuccessMessage") }),
+        );
         expect(loadNodesSpy).toHaveBeenCalled();
       });
     });
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
index 05a8a51f83..12a5894404 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/DeleteChannelModal/__tests__/DeleteChannelModal.spec.js
@@ -91,7 +91,7 @@ describe('DeleteChannelModal', () => {
     renderComponent();
     await userEvent.click(screen.getByRole('button', { name: 'Delete channel' }));
     await waitFor(() => {
-      expect(mockCreateSnackbar).toHaveBeenCalled();
+      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Channel deleted' }));
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
index c33f3ef2af..de3357d736 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/RemoveChannelFromListModal/__tests__/RemoveChannelFromListModal.spec.js
@@ -96,7 +96,7 @@ describe('RemoveChannelFromListModal', () => {
     renderComponent();
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     await waitFor(() => {
-      expect(mockCreateSnackbar).toHaveBeenCalled();
+      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Channel removed' }));
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
index be1801b1ce..82fb3f7607 100644
--- a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
@@ -11,8 +11,8 @@
     :autofocus="snackbarOptions.autofocus"
     :announce="snackbarOptions.announce"
     :assertive="snackbarOptions.assertive"
-    @close="clearSnackbar"
-    @actionClick="snackbarOptions.actionCallback && snackbarOptions.actionCallback($event)"
+    @close="handleClose"
+    @actionClick="handleActionClick"
     @blur="snackbarOptions.onBlur && snackbarOptions.onBlur($event)"
   />
 
@@ -38,6 +38,20 @@
         clearSnackbar,
       };
     },
+    methods: {
+      handleClose() {
+        if (this.snackbarOptions && this.snackbarOptions.hideCallback) {
+          this.snackbarOptions.hideCallback();
+        }
+        this.clearSnackbar();
+      },
+      handleActionClick(event) {
+        if (this.snackbarOptions && this.snackbarOptions.actionCallback) {
+          this.snackbarOptions.actionCallback(event);
+        }
+        this.clearSnackbar();
+      },
+    },
   };
 
 </script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
index 3cf26deccf..6255130311 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/index.vue
@@ -177,6 +177,7 @@
     } catch (error) {
       createSnackbar({
         text: commonStrings.genericErrorMessage$(),
+        duration: 6000,
         autoDismiss: true,
         announce: true,
       });
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
new file mode 100644
index 0000000000..49dc2c683a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
@@ -0,0 +1,61 @@
+
+import { mount } from "@vue/test-utils";
+import GlobalSnackbar from "../GlobalSnackbar.vue";
+import KSnackbar from "kolibri-design-system/lib/KSnackbar/KSnackbar.vue";
+import useKSnackbar from "kolibri-design-system/lib/composables/useKSnackbar";
+
+jest.mock("kolibri-design-system/lib/composables/useKSnackbar");
+
+describe("GlobalSnackbar", () => {
+  let mockClearSnackbar;
+  let mockSnackbarOptions;
+  let mockSnackbarIsVisible;
+
+  beforeEach(() => {
+    mockClearSnackbar = jest.fn();
+    mockSnackbarOptions = {
+      text: "Test Snackbar",
+      actionText: "Action",
+      actionCallback: jest.fn(),
+      hideCallback: jest.fn(),
+    };
+    mockSnackbarIsVisible = true;
+
+    useKSnackbar.mockReturnValue({
+      snackbarIsVisible: mockSnackbarIsVisible,
+      snackbarOptions: mockSnackbarOptions,
+      clearSnackbar: mockClearSnackbar,
+    });
+  });
+
+  function makeWrapper() {
+    return mount(GlobalSnackbar, {});
+  }
+
+  it("renders the snackbar text", () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.text()).toContain("Test Snackbar");
+  });
+
+  it("renders the snackbar action correctly", () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.text()).toContain("Action");
+  });
+
+  it("clicking the action calls the action callback and closes the snackbar", async () => {
+    const wrapper = makeWrapper();
+    wrapper.findComponent(KSnackbar).vm.$emit("actionClick");
+    
+    expect(mockSnackbarOptions.actionCallback).toHaveBeenCalled();
+    expect(mockClearSnackbar).toHaveBeenCalled();
+  });
+
+  it("closing the snackbar calls hideCallback when provided", async () => {
+    const wrapper = makeWrapper();
+    wrapper.findComponent(KSnackbar).vm.$emit("close");
+    
+    expect(mockSnackbarOptions.hideCallback).toHaveBeenCalled();
+    expect(mockClearSnackbar).toHaveBeenCalled();
+  });
+});
+

From f5c91a0242464cf749fccd91268dd9c8e68d2f10 Mon Sep 17 00:00:00 2001
From: Monier Ayman <monierayman2007@gmail.com>
Date: Fri, 2 Oct 2026 18:49:14 +0300
Subject: [PATCH 4/6] Fix snackbar review feedback

---
 .../__tests__/EditSourceModal.spec.js         | 27 ++----
 .../frontend/shared/views/GlobalSnackbar.vue  | 18 +---
 .../composables/useCommunityLibraryUpdates.js |  1 +
 .../__tests__/studioCopyToken.spec.js         |  4 +-
 .../views/__tests__/GlobalSnackbar.spec.js    | 87 +++++++++++--------
 5 files changed, 66 insertions(+), 71 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index b9781d0ae0..86a161ac25 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -258,35 +258,26 @@ describe('EditSourceModal', () => {
       expect(contentNodeActions.updateContentNode).not.toHaveBeenCalled();
     });
 
-    test('should show a snackbar with the correct number of edited nodes on success submit', () => {
+    test('should show a snackbar with the correct number of edited nodes on success submit', async () => {
       const wrapper = makeWrapper(['node1', 'node2']);
-      wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
+      await wrapper.vm.handleSave();
 
-      const animationFrameId = requestAnimationFrame(() => {
-        expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Edited attribution for 2 resources' }));
-        cancelAnimationFrame(animationFrameId);
-      });
+      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
     });
 
-    test('should show a snack bar with the correct number of edited nodes on success submit if some nodes are imported', () => {
+    test('should show a snack bar with the correct number of edited nodes on success submit if some nodes are imported', async () => {
       nodes['node1'].original_source_node_id = 'original_node1';
       const wrapper = makeWrapper(['node1', 'node2']);
-      wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
+      await wrapper.vm.handleSave();
 
-      const animationFrameId = requestAnimationFrame(() => {
-        expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Edited attribution for 1 resource' }));
-        cancelAnimationFrame(animationFrameId);
-      });
+      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
     });
 
-    test('should emit close event on success submit', () => {
+    test('should emit close event on success submit', async () => {
       const wrapper = makeWrapper(['node1', 'node2']);
-      wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
+      await wrapper.vm.handleSave();
 
-      const animationFrameId = requestAnimationFrame(() => {
-        expect(wrapper.emitted('close')).toBeTruthy();
-        cancelAnimationFrame(animationFrameId);
-      });
+      expect(wrapper.emitted('close')).toBeTruthy();
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
index 82fb3f7607..be1801b1ce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue
@@ -11,8 +11,8 @@
     :autofocus="snackbarOptions.autofocus"
     :announce="snackbarOptions.announce"
     :assertive="snackbarOptions.assertive"
-    @close="handleClose"
-    @actionClick="handleActionClick"
+    @close="clearSnackbar"
+    @actionClick="snackbarOptions.actionCallback && snackbarOptions.actionCallback($event)"
     @blur="snackbarOptions.onBlur && snackbarOptions.onBlur($event)"
   />
 
@@ -38,20 +38,6 @@
         clearSnackbar,
       };
     },
-    methods: {
-      handleClose() {
-        if (this.snackbarOptions && this.snackbarOptions.hideCallback) {
-          this.snackbarOptions.hideCallback();
-        }
-        this.clearSnackbar();
-      },
-      handleActionClick(event) {
-        if (this.snackbarOptions && this.snackbarOptions.actionCallback) {
-          this.snackbarOptions.actionCallback(event);
-        }
-        this.clearSnackbar();
-      },
-    },
   };
 
 </script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
index a5f4fb37dd..296f65034a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
+++ b/contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js
@@ -177,6 +177,7 @@ export default function useCommunityLibraryUpdates({ queryParams } = {}) {
       isLoadingMore.value = false;
       createSnackbar({
         text: commonStrings.genericErrorMessage$(),
+        duration: 6000,
         autoDismiss: true,
         announce: true,
       });
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
index 6b02aa9904..e133ab255a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/__tests__/studioCopyToken.spec.js
@@ -76,7 +76,7 @@ describe('StudioCopyToken', () => {
     Object.assign(navigator, {
       clipboard: { writeText },
     });
-    const { mockStore } = makeWrapper();
+    makeWrapper();
     const button = screen.getByRole('button');
     await fireEvent.click(button);
     expect(mockCreateSnackbar).toHaveBeenCalled();
@@ -87,7 +87,7 @@ describe('StudioCopyToken', () => {
     Object.assign(navigator, {
       clipboard: { writeText },
     });
-    const { mockStore } = makeWrapper();
+    makeWrapper();
     const button = screen.getByRole('button');
     await fireEvent.click(button);
     expect(mockCreateSnackbar).toHaveBeenCalled();
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
index 49dc2c683a..27cd4fc0e3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
@@ -1,61 +1,78 @@
 
 import { mount } from "@vue/test-utils";
-import GlobalSnackbar from "../GlobalSnackbar.vue";
-import KSnackbar from "kolibri-design-system/lib/KSnackbar/KSnackbar.vue";
 import useKSnackbar from "kolibri-design-system/lib/composables/useKSnackbar";
-
-jest.mock("kolibri-design-system/lib/composables/useKSnackbar");
+import GlobalSnackbar from "../GlobalSnackbar.vue";
 
 describe("GlobalSnackbar", () => {
-  let mockClearSnackbar;
-  let mockSnackbarOptions;
-  let mockSnackbarIsVisible;
+  let actionCallback;
+  let hideCallback;
 
   beforeEach(() => {
-    mockClearSnackbar = jest.fn();
-    mockSnackbarOptions = {
-      text: "Test Snackbar",
-      actionText: "Action",
-      actionCallback: jest.fn(),
-      hideCallback: jest.fn(),
-    };
-    mockSnackbarIsVisible = true;
-
-    useKSnackbar.mockReturnValue({
-      snackbarIsVisible: mockSnackbarIsVisible,
-      snackbarOptions: mockSnackbarOptions,
-      clearSnackbar: mockClearSnackbar,
-    });
+    actionCallback = jest.fn();
+    hideCallback = jest.fn();
+    const { clearSnackbar } = useKSnackbar();
+    clearSnackbar(); // ensure clean state
   });
 
   function makeWrapper() {
-    return mount(GlobalSnackbar, {});
+    return mount(GlobalSnackbar, {
+      stubs: {
+        KSnackbar: true
+      }
+    });
   }
 
-  it("renders the snackbar text", () => {
+  it("renders the snackbar text", async () => {
+    const { createSnackbar } = useKSnackbar();
+    createSnackbar({ text: "Test Snackbar", announce: true });
     const wrapper = makeWrapper();
-    expect(wrapper.text()).toContain("Test Snackbar");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.snackbarOptions.text).toBe("Test Snackbar");
   });
 
-  it("renders the snackbar action correctly", () => {
+  it("renders the snackbar action correctly", async () => {
+    const { createSnackbar } = useKSnackbar();
+    createSnackbar({ text: "Test Snackbar", actionText: "Action", announce: true });
     const wrapper = makeWrapper();
-    expect(wrapper.text()).toContain("Action");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.snackbarOptions.actionText).toBe("Action");
   });
 
   it("clicking the action calls the action callback and closes the snackbar", async () => {
+    const { createSnackbar, snackbarIsVisible } = useKSnackbar();
+    createSnackbar({
+      text: "Test Snackbar",
+      actionText: "Action",
+      actionCallback,
+      hideCallback,
+      announce: true,
+    });
     const wrapper = makeWrapper();
-    wrapper.findComponent(KSnackbar).vm.$emit("actionClick");
-    
-    expect(mockSnackbarOptions.actionCallback).toHaveBeenCalled();
-    expect(mockClearSnackbar).toHaveBeenCalled();
+    await wrapper.vm.$nextTick();
+
+    // Simulate action click on the stub
+    wrapper.findComponent({ name: "KSnackbar" }).vm.$emit("actionClick");
+
+    expect(actionCallback).toHaveBeenCalledTimes(1);
+    expect(hideCallback).toHaveBeenCalledTimes(1);
+    expect(snackbarIsVisible.value).toBe(false);
   });
 
-  it("closing the snackbar calls hideCallback when provided", async () => {
+  it("closing the snackbar calls hideCallback exactly once when provided", async () => {
+    const { createSnackbar, snackbarIsVisible } = useKSnackbar();
+    createSnackbar({
+      text: "Test Snackbar",
+      hideCallback,
+      announce: true,
+    });
+
     const wrapper = makeWrapper();
-    wrapper.findComponent(KSnackbar).vm.$emit("close");
-    
-    expect(mockSnackbarOptions.hideCallback).toHaveBeenCalled();
-    expect(mockClearSnackbar).toHaveBeenCalled();
+    await wrapper.vm.$nextTick();
+
+    wrapper.findComponent({ name: "KSnackbar" }).vm.$emit("close");
+
+    expect(hideCallback).toHaveBeenCalledTimes(1);
+    expect(snackbarIsVisible.value).toBe(false);
   });
 });
 

From b9295a3792442189184531ec691f5e4b56cd2444 Mon Sep 17 00:00:00 2001
From: Monier Ayman <monierayman2007@gmail.com>
Date: Fri, 2 Oct 2026 19:10:29 +0300
Subject: [PATCH 5/6] Fix snackbar test review feedback

---
 .../__tests__/EditSourceModal.spec.js           | 17 ++++++-----------
 .../views/__tests__/GlobalSnackbar.spec.js      |  4 ++--
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index 86a161ac25..1652e708ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { Store } from 'vuex';
+import flushPromises from 'flush-promises';
 import EditSourceModal from '../EditSourceModal';
 import { LicensesList } from 'shared/leUtils/Licenses';
 import { constantsTranslationMixin } from 'shared/mixins';
@@ -258,24 +259,18 @@ describe('EditSourceModal', () => {
       expect(contentNodeActions.updateContentNode).not.toHaveBeenCalled();
     });
 
-    test('should show a snackbar with the correct number of edited nodes on success submit', async () => {
+    test('should show a snackbar with "Changes saved" on success submit', async () => {
       const wrapper = makeWrapper(['node1', 'node2']);
-      await wrapper.vm.handleSave();
-
-      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
-    });
-
-    test('should show a snack bar with the correct number of edited nodes on success submit if some nodes are imported', async () => {
-      nodes['node1'].original_source_node_id = 'original_node1';
-      const wrapper = makeWrapper(['node1', 'node2']);
-      await wrapper.vm.handleSave();
+      wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
+      await flushPromises();
 
       expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
     });
 
     test('should emit close event on success submit', async () => {
       const wrapper = makeWrapper(['node1', 'node2']);
-      await wrapper.vm.handleSave();
+      wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
+      await flushPromises();
 
       expect(wrapper.emitted('close')).toBeTruthy();
     });
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
index 27cd4fc0e3..b98154381a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
@@ -27,7 +27,7 @@ describe("GlobalSnackbar", () => {
     createSnackbar({ text: "Test Snackbar", announce: true });
     const wrapper = makeWrapper();
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.snackbarOptions.text).toBe("Test Snackbar");
+    expect(wrapper.findComponent({ name: "KSnackbar" }).props("text")).toBe("Test Snackbar");
   });
 
   it("renders the snackbar action correctly", async () => {
@@ -35,7 +35,7 @@ describe("GlobalSnackbar", () => {
     createSnackbar({ text: "Test Snackbar", actionText: "Action", announce: true });
     const wrapper = makeWrapper();
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.snackbarOptions.actionText).toBe("Action");
+    expect(wrapper.findComponent({ name: "KSnackbar" }).props("actionText")).toBe("Action");
   });
 
   it("clicking the action calls the action callback and closes the snackbar", async () => {

From fdf4611522bfd9525f2a52963476c0865f3a70a4 Mon Sep 17 00:00:00 2001
From: Monier Ayman <monierayman2007@gmail.com>
Date: Mon, 5 Oct 2026 17:30:17 +0300
Subject: [PATCH 6/6] Fix frontend formatting

---
 .../__tests__/EditSourceModal.spec.js         |  4 +-
 .../views/__tests__/GlobalSnackbar.spec.js    | 40 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index 1652e708ea..e829aed369 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -264,7 +264,9 @@ describe('EditSourceModal', () => {
       wrapper.find('[data-test="edit-source-modal"]').vm.$emit('submit');
       await flushPromises();
 
-      expect(mockCreateSnackbar).toHaveBeenCalledWith(expect.objectContaining({ text: 'Changes saved' }));
+      expect(mockCreateSnackbar).toHaveBeenCalledWith(
+        expect.objectContaining({ text: 'Changes saved' }),
+      );
     });
 
     test('should emit close event on success submit', async () => {
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
index b98154381a..88d18be340 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/GlobalSnackbar.spec.js
@@ -1,9 +1,8 @@
+import { mount } from '@vue/test-utils';
+import useKSnackbar from 'kolibri-design-system/lib/composables/useKSnackbar';
+import GlobalSnackbar from '../GlobalSnackbar.vue';
 
-import { mount } from "@vue/test-utils";
-import useKSnackbar from "kolibri-design-system/lib/composables/useKSnackbar";
-import GlobalSnackbar from "../GlobalSnackbar.vue";
-
-describe("GlobalSnackbar", () => {
+describe('GlobalSnackbar', () => {
   let actionCallback;
   let hideCallback;
 
@@ -17,32 +16,32 @@ describe("GlobalSnackbar", () => {
   function makeWrapper() {
     return mount(GlobalSnackbar, {
       stubs: {
-        KSnackbar: true
-      }
+        KSnackbar: true,
+      },
     });
   }
 
-  it("renders the snackbar text", async () => {
+  it('renders the snackbar text', async () => {
     const { createSnackbar } = useKSnackbar();
-    createSnackbar({ text: "Test Snackbar", announce: true });
+    createSnackbar({ text: 'Test Snackbar', announce: true });
     const wrapper = makeWrapper();
     await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent({ name: "KSnackbar" }).props("text")).toBe("Test Snackbar");
+    expect(wrapper.findComponent({ name: 'KSnackbar' }).props('text')).toBe('Test Snackbar');
   });
 
-  it("renders the snackbar action correctly", async () => {
+  it('renders the snackbar action correctly', async () => {
     const { createSnackbar } = useKSnackbar();
-    createSnackbar({ text: "Test Snackbar", actionText: "Action", announce: true });
+    createSnackbar({ text: 'Test Snackbar', actionText: 'Action', announce: true });
     const wrapper = makeWrapper();
     await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent({ name: "KSnackbar" }).props("actionText")).toBe("Action");
+    expect(wrapper.findComponent({ name: 'KSnackbar' }).props('actionText')).toBe('Action');
   });
 
-  it("clicking the action calls the action callback and closes the snackbar", async () => {
+  it('clicking the action calls the action callback and closes the snackbar', async () => {
     const { createSnackbar, snackbarIsVisible } = useKSnackbar();
     createSnackbar({
-      text: "Test Snackbar",
-      actionText: "Action",
+      text: 'Test Snackbar',
+      actionText: 'Action',
       actionCallback,
       hideCallback,
       announce: true,
@@ -51,17 +50,17 @@ describe("GlobalSnackbar", () => {
     await wrapper.vm.$nextTick();
 
     // Simulate action click on the stub
-    wrapper.findComponent({ name: "KSnackbar" }).vm.$emit("actionClick");
+    wrapper.findComponent({ name: 'KSnackbar' }).vm.$emit('actionClick');
 
     expect(actionCallback).toHaveBeenCalledTimes(1);
     expect(hideCallback).toHaveBeenCalledTimes(1);
     expect(snackbarIsVisible.value).toBe(false);
   });
 
-  it("closing the snackbar calls hideCallback exactly once when provided", async () => {
+  it('closing the snackbar calls hideCallback exactly once when provided', async () => {
     const { createSnackbar, snackbarIsVisible } = useKSnackbar();
     createSnackbar({
-      text: "Test Snackbar",
+      text: 'Test Snackbar',
       hideCallback,
       announce: true,
     });
@@ -69,10 +68,9 @@ describe("GlobalSnackbar", () => {
     const wrapper = makeWrapper();
     await wrapper.vm.$nextTick();
 
-    wrapper.findComponent({ name: "KSnackbar" }).vm.$emit("close");
+    wrapper.findComponent({ name: 'KSnackbar' }).vm.$emit('close');
 
     expect(hideCallback).toHaveBeenCalledTimes(1);
     expect(snackbarIsVisible.value).toBe(false);
   });
 });
-