From 3483f2b952cb7003c29452146601a5faa0c29f43 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:23:32 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20notific?=
 =?UTF-8?q?ation=20close=20button=20accessibility=20and=20focus=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced `:focus` with `:focus-visible` for notification buttons to reduce visual noise for mouse users.
- Added `title="Close"` and `aria-hidden="true"` to the decorative '✕' character to improve screen reader experience and provide a native tooltip.

Co-authored-by: anchapin <6326294+anchapin@users.noreply.github.com>
---
 .Jules/palette.md                                             | 3 +++
 .../src/components/NotificationSystem/NotificationSystem.css  | 4 ++--
 .../src/components/NotificationSystem/NotificationSystem.tsx  | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index f5209c33..6528c493 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,6 @@
 ## 2024-06-13 - [Accessibility] Screen readers pronouncing decorative emojis
 **Learning:** Screen readers often misinterpret standalone emojis (e.g., ⬇️, 🗑️) inside buttons, reading them literally, which creates redundant or confusing announcements when a descriptive `aria-label` is already present.
 **Action:** Always wrap non-informational emojis or text-based icons in `<span aria-hidden="true">` when the parent interactive element already has a sufficiently descriptive label.
+## 2025-04-03 - Improved Notification Close Button Accessibility and Focus Styles
+**Learning:** Decorative characters like "✕" inside buttons that already have `aria-label` attributes can cause redundant or confusing announcements for screen reader users. Additionally, using the `:focus` pseudo-class for buttons triggers focus outlines even on mouse clicks, which can add unnecessary visual noise.
+**Action:** When implementing icon-only buttons with decorative characters, wrap the visual character in `<span aria-hidden="true">` to rely entirely on the `aria-label`. Use `:focus-visible` instead of `:focus` for interactive elements to ensure focus outlines appear only during keyboard navigation.
diff --git a/frontend/src/components/NotificationSystem/NotificationSystem.css b/frontend/src/components/NotificationSystem/NotificationSystem.css
index 22a33b13..604b8edd 100644
--- a/frontend/src/components/NotificationSystem/NotificationSystem.css
+++ b/frontend/src/components/NotificationSystem/NotificationSystem.css
@@ -281,8 +281,8 @@
 }
 
 /* Focus states for accessibility */
-.notification-action-btn:focus,
-.notification-close-btn:focus {
+.notification-action-btn:focus-visible,
+.notification-close-btn:focus-visible {
   outline: 2px solid #667eea;
   outline-offset: 2px;
 }
diff --git a/frontend/src/components/NotificationSystem/NotificationSystem.tsx b/frontend/src/components/NotificationSystem/NotificationSystem.tsx
index 176a51e5..aa81f881 100644
--- a/frontend/src/components/NotificationSystem/NotificationSystem.tsx
+++ b/frontend/src/components/NotificationSystem/NotificationSystem.tsx
@@ -202,8 +202,9 @@ const NotificationItem: React.FC<NotificationItemProps> = ({
             className="notification-close-btn"
             onClick={handleRemove}
             aria-label="Close notification"
+            title="Close"
           >
-            ✕
+            <span aria-hidden="true">✕</span>
           </button>
         </div>
       </div>

From 48e1ccda5530134abfa7c54faf7879ef8e14eb5d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:32:50 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20notific?=
 =?UTF-8?q?ation=20close=20button=20accessibility=20and=20focus=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced `:focus` with `:focus-visible` for notification buttons to reduce visual noise for mouse users.
- Added `title="Close"` and `aria-hidden="true"` to the decorative '✕' character to improve screen reader experience and provide a native tooltip.
- Formatted modified files using pnpm prettier.

Co-authored-by: anchapin <6326294+anchapin@users.noreply.github.com>
---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2f6250c4..1d444478 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -94,4 +94,4 @@
     "vitest": "^4.1.2",
     "web-streams-polyfill": "^4.2.0"
   }
-}
\ No newline at end of file
+}