Skip to content

🎨 Palette: Improve accessibility of AI Analyst Panel buttons #290

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

Closed
d3mocide wants to merge 1 commit into from
Closed

🎨 Palette: Improve accessibility of AI Analyst Panel buttons #290

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
8 changes: 8 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,11 @@
## 2025-04-24 - Interactive Element Keyboard Accessibility
**Learning:** Found multiple interactive `<button>` elements in user-facing components (`UserManagementPanel`, `UserMenuWidget`) that lacked keyboard focus indicators. This makes navigation via keyboard difficult for users relying on alternative inputs.
**Action:** When creating or maintaining new buttons, always append `focus-visible:ring-1 focus-visible:ring-[color] outline-none` to ensure standard keyboard accessibility across the UI.

## 2026-05-11 - Added ARIA labels and focus styles to AI Analyst Panel controls
**Learning:** Icon-only action buttons in dense widgets like the AI Analyst Panel (e.g., Settings, Close) often lack s and distinct keyboard focus rings (). Without these, screen readers can't identify the buttons' purpose and keyboard users can't see which element is focused. Additionally, toggle buttons (like Settings) need to communicate their state.
**Action:** Always ensure custom icon-only buttons in widgets include , visible keyboard focus states matching the panel's theme color, and stateful ARIA attributes like when they control nested content.

## 2025-05-11 - Added ARIA labels and focus styles to AI Analyst Panel controls
**Learning:** Icon-only action buttons in dense widgets like the AI Analyst Panel (e.g., Settings, Close) often lack `aria-label`s and distinct keyboard focus rings (`focus-visible:ring-1 focus-visible:ring-violet-400 outline-none`). Without these, screen readers can't identify the buttons' purpose and keyboard users can't see which element is focused. Additionally, toggle buttons (like Settings) need `aria-expanded` to communicate their state.
**Action:** Always ensure custom icon-only buttons in widgets include `aria-label`, visible keyboard focus states matching the panel's theme color, and stateful ARIA attributes like `aria-expanded` when they control nested content.
7 changes: 5 additions & 2 deletions frontend/src/components/widgets/AIAnalystPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,16 +229,19 @@ export const AIAnalystPanel: React.FC<AIAnalystPanelProps> = ({
{isAdmin && (
<button
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
className={`p-1.5 rounded-sm transition-all ${isSettingsOpen ? 'bg-white/20 text-white shadow-[0_0_10px_rgba(255,255,255,0.2)]' : 'hover:bg-white/10 text-white/40 hover:text-white/80'}`}
className={`p-1.5 rounded-sm transition-all focus-visible:ring-1 focus-visible:ring-violet-400 outline-none ${isSettingsOpen ? 'bg-white/20 text-white shadow-[0_0_10px_rgba(255,255,255,0.2)]' : 'hover:bg-white/10 text-white/40 hover:text-white/80'}`}
title="AI Engine Settings"
aria-label="AI Engine Settings"
aria-expanded={isSettingsOpen}
>
<Settings size={13} />
</button>
)}
<button
onClick={onClose}
className="p-1.5 hover:bg-red-500/10 rounded-sm text-white/30 hover:text-red-400 transition-all group"
className="p-1.5 hover:bg-red-500/10 rounded-sm text-white/30 hover:text-red-400 transition-all group focus-visible:ring-1 focus-visible:ring-violet-400 outline-none"
title="Close Panel"
aria-label="Close Panel"
>
<X size={14} className="group-hover:rotate-90 transition-transform duration-300" />
</button>
Expand Down
Loading