From 0a0b3db5655e128fd7831152728517585db183e5 Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Thu, 13 Mar 2025 16:06:40 +0530
Subject: [PATCH 1/2] FIXED : - Toast notifications now announced properly by
 screen readers #3382

---
 client/modules/IDE/actions/project.js   | 12 +++----
 client/modules/IDE/actions/toast.js     |  6 ++--
 client/modules/IDE/components/Toast.jsx | 43 ++++++++++++++++++-------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 1d8943336b..94ca5d1dbf 100644
--- a/client/modules/IDE/actions/project.js
+++ b/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'));
           }
         }
diff --git a/client/modules/IDE/actions/toast.js b/client/modules/IDE/actions/toast.js
index b1e43d9e59..e8f9c64ae0 100644
--- a/client/modules/IDE/actions/toast.js
+++ b/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') {
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 882d101748..fe91214650 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/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>
+    </>
   );
 }

From 294dc80bd23566605259a013c6fecff18fa17bec Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Thu, 13 Mar 2025 21:52:05 +0530
Subject: [PATCH 2/2] Corrected the aria-live region to "polite"

---
 client/modules/IDE/components/Toast.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index fe91214650..7140a28033 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -28,7 +28,7 @@ export default function Toast() {
       {/* Global ARIA Live Region */}
       <div
         id="toast-live-region"
-        aria-live="assertive"
+        aria-live="polite"
         style={{ position: 'absolute', left: '-9999px' }}
       />