FIXED : - Toast notifications now announced properly by screen readers processing#3382

Author: Harshit-7373

client/modules/IDE/actions/project.js

@@ -174,15 +174,15 @@ export function saveProject(
           dispatch(projectSaveSuccess());
           if (!autosave) {
             if (state.ide.justOpenedProject && state.preferences.autosave) {
-              dispatch(showToast(5500));
+              dispatch(showToast(12000));
               dispatch(setToastText('Toast.SketchSaved'));
               setTimeout(
                 () => dispatch(setToastText('Toast.AutosaveEnabled')),
-                1500
+                60000
               );
               dispatch(resetJustOpenedProject());
             } else {
-              dispatch(showToast(1500));
+              dispatch(showToast(6000));
               dispatch(setToastText('Toast.SketchSaved'));
             }
           }
@@ -224,15 +224,15 @@ export function saveProject(
         dispatch(projectSaveSuccess());
         if (!autosave) {
           if (state.preferences.autosave) {
-            dispatch(showToast(5500));
+            dispatch(showToast(12000));
             dispatch(setToastText('Toast.SketchSaved'));
             setTimeout(
               () => dispatch(setToastText('Toast.AutosaveEnabled')),
-              1500
+              6000
             );
             dispatch(resetJustOpenedProject());
           } else {
-            dispatch(showToast(1500));
+            dispatch(showToast(6000));
             dispatch(setToastText('Toast.SketchSaved'));
           }
         }

client/modules/IDE/actions/toast.js

@@ -10,12 +10,12 @@ export function hideToast() {
  * Temporary fix until #2206 is merged.
  * Supports legacy two-action syntax:
  *    dispatch(setToastText('Toast.SketchFailedSave'));
- *    dispatch(showToast(1500));
+ *    dispatch(showToast(6000));
  * And also supports proposed single-action syntax with message and optional timeout.
  *    dispatch(showToast('Toast.SketchFailedSave'));
- *    dispatch(showToast('Toast.SketchSaved', 5500));
+ *    dispatch(showToast('Toast.SketchSaved', 6000));
  */
-export function showToast(textOrTime, timeout = 1500) {
+export function showToast(textOrTime, timeout = 6000) {
   return (dispatch) => {
     let time = timeout;
     if (typeof textOrTime === 'string') {

client/modules/IDE/components/Toast.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { hideToast } from '../actions/toast';
@@ -9,19 +9,40 @@ export default function Toast() {
   const { text, isVisible } = useSelector((state) => state.toast);
   const dispatch = useDispatch();
   const { t } = useTranslation();
+
+  useEffect(() => {
+    if (isVisible) {
+      const liveRegion = document.getElementById('toast-live-region');
+      if (liveRegion) {
+        liveRegion.textContent = t(text); // Update live region globally
+      }
+    }
+  }, [isVisible, text, t]);
+
   if (!isVisible) {
     return null;
   }
+
   return (
-    <section className="toast" role="status" aria-live="polite">
-      <p>{t(text)}</p>
-      <button
-        className="toast__close"
-        onClick={() => dispatch(hideToast())}
-        aria-label="Close Alert"
-      >
-        <ExitIcon focusable="false" aria-hidden="true" />
-      </button>
-    </section>
+    <>
+      {/* Global ARIA Live Region */}
+      <div
+        id="toast-live-region"
+        aria-live="assertive"
+        style={{ position: 'absolute', left: '-9999px' }}
+      />
+
+      {/* Toast UI */}
+      <section className="toast" role="status">
+        <p>{t(text)}</p>
+        <button
+          className="toast__close"
+          onClick={() => dispatch(hideToast())}
+          aria-label="Close Alert"
+        >
+          <ExitIcon focusable="false" aria-hidden="true" />
+        </button>
+      </section>
+    </>
   );
 }