Skip to content

🎨 Palette: Improve notification close button accessibility and focus styles #954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anchapin wants to merge 2 commits into
base: main
Choose a base branch
from
Open

🎨 Palette: Improve notification close button accessibility and focus styles #954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3483f2b
🎨 Palette: Improve notification close button accessibility and focus …
google-labs-jules[bot] Apr 3, 2026
48e1ccd
🎨 Palette: Improve notification close button accessibility and focus …
google-labs-jules[bot] Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

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

This new palette entry date looks off relative to the PR date (<current_datetime> is 2026-04-03). If this entry is meant to reflect this change, update the heading date accordingly to avoid a misleading historical log.

Suggested change
## 2025-04-03 - Improved Notification Close Button Accessibility and Focus Styles
## 2026-04-03 - Improved Notification Close Button Accessibility and Focus Styles

Copilot uses AI. Check for mistakes.
**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.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,4 +94,4 @@
"vitest": "^4.1.2",
"web-streams-polyfill": "^4.2.0"
}
}
}
4 changes: 2 additions & 2 deletions frontend/src/components/NotificationSystem/NotificationSystem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment on lines +284 to 287
Copy link

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

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

Switching these component-specific styles to :focus-visible doesn't prevent focus rings on mouse click because a global button:focus rule still applies (see frontend/src/index.css where button:focus sets an outline). As a result, .notification-*-btn will still show an outline on mouse focus in browsers where :focus-visible is not active. Consider adding a .notification-*-btn:focus:not(:focus-visible) rule (or an @supports selector(:focus-visible) block) to suppress mouse-focus outlines while preserving a keyboard-focus fallback.

Suggested change
.notification-action-btn:focus-visible,
.notification-close-btn:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
@supports selector(:focus-visible) {
.notification-action-btn:focus-visible,
.notification-close-btn:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
.notification-action-btn:focus:not(:focus-visible),
.notification-close-btn:focus:not(:focus-visible) {
outline: none;
}

Copilot uses AI. Check for mistakes.
}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/NotificationSystem/NotificationSystem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,9 @@ const NotificationItem: React.FC<NotificationItemProps> = ({
className="notification-close-btn"
onClick={handleRemove}
aria-label="Close notification"
title="Close"
Copy link

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

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

The title tooltip text (“Close”) is inconsistent with the accessible name (aria-label="Close notification"). For consistency (and to avoid potentially confusing mixed announcements in some assistive tech), consider aligning the title value with the aria-label (or dropping title if you don’t want a tooltip).

Suggested change
title="Close"
title="Close notification"

Copilot uses AI. Check for mistakes.
>
✕
<span aria-hidden="true">✕</span>
</button>
</div>
</div>
Expand Down
Loading