Skip to content

🎨 Palette: Add aria-labels and focus states to close icons #112

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
Alesiobarquin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Add aria-labels and focus states to close icons #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 2 additions & 1 deletion src/components/Analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -913,8 +913,9 @@ export const Analytics: React.FC = () => {
</div>
</div>
<button
aria-label="Close session details"
onClick={() => setViewingSession(null)}
className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"
className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"
Comment on lines +916 to +918

@coderabbitai coderabbitai Bot May 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

Tailwind CSS v4 outline-none vs outline-hidden behavior difference

💡 Result:

In Tailwind CSS v4, the outline-none and outline-hidden utilities serve distinct purposes regarding how they handle browser focus indicators, especially concerning accessibility and forced colors mode [1][2]. outline-none The v4 outline-none utility is a simple, standard wrapper that sets outline-style: none [1][3]. It is intended for use when you want to completely remove the browser's default focus outline, typically because you are implementing your own custom focus ring [1][4]. Because this utility strictly removes the outline, it does not provide any accessibility fallbacks for forced colors mode [1][2]. outline-hidden The outline-hidden utility is the direct replacement for the behavior of outline-none in Tailwind CSS v3 [2]. It is designed to be the preferred choice for accessibility [4][2]. While it sets outline-style: none in standard environments, it preserves an invisible focus indicator (specifically a 2px solid transparent outline) when the browser is in forced colors mode [1][3][2]. This ensures that users relying on high-contrast or forced-color themes can still perceive when an element has received focus, maintaining accessibility standards [1]. Summary Table Utility | Behavior | Use Case --- | --- | --- outline-none | Sets outline-style: none | Use when replacing the default focus ring with a custom implementation. outline-hidden | Sets outline-style: none (standard); preserves outline (forced colors) | Use for general accessibility to maintain focus visibility in high-contrast modes. If you are migrating from v3 to v4, Tailwind Labs recommends replacing all instances of outline-none with outline-hidden unless you specifically require the behavior of the new, simplified outline-none [2].

Citations:

Use outline-hidden instead of outline-none for the custom focus ring
In src/components/Analytics.tsx (lines 916-918), switch outline-none to outline-hidden so focus remains visible in forced-colors/high-contrast modes even though you’re adding your own focus-visible:ring-* ring.

🎨 Proposed fix 
               <button
                 aria-label="Close session details"
                 onClick={() => setViewingSession(null)}
-                className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"
+                className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-hidden"
               >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
aria-label="Close session details"
onClick={() => setViewingSession(null)}
className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"
className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"
aria-label="Close session details"
onClick={() => setViewingSession(null)}
className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-hidden"
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Analytics.tsx` around lines 916 - 918, Replace the use of the
Tailwind utility "outline-none" with "outline-hidden" on the close button
element that has aria-label "Close session details" and the onClick handler
setViewingSession(null) in the Analytics component; locate the JSX element in
src/components/Analytics.tsx (the button tied to setViewingSession) and change
the className token so the custom focus-visible:ring-emerald-500 ring remains
visible in forced-colors/high-contrast modes by using outline-hidden instead of
outline-none.

>
<X size={24} />
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ export const Dashboard: React.FC = () => {
<button onClick={() => setCatchUpPlan('CATCH_UP', missedDaysCount)} className="flex-1 sm:flex-none px-4 py-2 bg-amber-500 hover:bg-amber-400 text-amber-950 font-bold text-sm rounded-lg shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all flex items-center justify-center gap-2">
<Zap size={16} /> Catch Up Faster
</button>
<button onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors"><X size={18} /></button>
<button aria-label="Dismiss catch-up banner" onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"><X size={18} /></button>

@coderabbitai coderabbitai Bot May 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Consider using outline-hidden instead of outline-none for Tailwind v4.

In Tailwind CSS v4, outline-none only removes the outline style property, not the outline completely. To fully suppress the default browser outline and prevent it from appearing alongside your custom focus-visible:ring-2 indicator, use outline-hidden instead.

🎨 Proposed fix to use outline-hidden 
-              <button aria-label="Dismiss catch-up banner" onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"><X size={18} /></button>
+              <button aria-label="Dismiss catch-up banner" onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-hidden"><X size={18} /></button>

As per coding guidelines, this aligns with Tailwind CSS v4 best practices for custom focus indicators.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button aria-label="Dismiss catch-up banner" onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none"><X size={18} /></button>
<button aria-label="Dismiss catch-up banner" onClick={dismissCatchUpBanner} className="px-2 py-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-zinc-800/50 transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 outline-hidden"><X size={18} /></button>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Dashboard.tsx` at line 571, Replace the Tailwind utility on
the catch-up banner dismiss button so the browser focus outline is fully
suppressed in Tailwind v4: in the JSX where the <button aria-label="Dismiss
catch-up banner" onClick={dismissCatchUpBanner} ...> is rendered (the element
that also includes className with focus-visible:ring-2), swap the existing
outline-none utility for outline-hidden to prevent the native outline from
appearing alongside the custom focus-visible:ring indicator; ensure the change
is applied to the className string in the Dashboard component JSX where
dismissCatchUpBanner is used.

</div>
</div>
</div>
Expand Down