Skip to content

🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons #23

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

🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons #23

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: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-10 - Missing ARIA labels on Icon-only utility buttons
**Learning:** Common utility buttons like modal close elements ("✕", SVGs) and input clearing buttons consistently lack `aria-label` properties, degrading the screen-reader experience.
**Action:** When adding or refactoring utility interactions, proactively evaluate and append `aria-label` (e.g., `aria-label="Fermer"`, `aria-label="Effacer le filtre"`) to icon-only buttons to conform to accessibility standards.
2 changes: 1 addition & 1 deletion src/components/apps/AppLogsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export default function AppLogsPage({ appName, initialServerId }: Props) {
<span class="text-gray-600 text-[10px]">
{displayLines.length}/{lines.length}
</span>
<button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs">✕</button>
<button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 10, 2026

Choose a reason for hiding this comment

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

medium

The button is missing an explicit type="button", which is a best practice to prevent accidental form submissions. Additionally, the text-gray-600 color on the bg-gray-950 background has insufficient contrast (~2.8:1), which is below the WCAG 3:1 requirement for UI components. Using text-gray-400 (~10:1) would improve accessibility and maintain consistency with other utility buttons in this file.

Suggested change
<button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button>
<button type="button" onClick={() => setFilter('')} class="text-gray-400 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button>
References
  1. Interactive elements should meet WCAG 2.1 AA contrast requirements (at least 3:1 for UI components) to ensure visibility for users with low vision.

</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/apps/GithubImportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function GithubImportModal() {
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z" /></svg>
Importer un dépôt
</h2>
<button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors">
<button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 10, 2026

Choose a reason for hiding this comment

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

medium

The button should have an explicit type="button". Furthermore, the text-gray-400 color on the light bg-gray-50 background has very low contrast (~2.0:1). Increasing it to text-gray-500 (~4.0:1) ensures it meets the WCAG 3:1 requirement for user interface components.

Suggested change
<button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer">
<button type="button" onClick={() => setOpen(false)} class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer">
References
  1. Interactive elements should meet WCAG 2.1 AA contrast requirements (at least 3:1 for UI components) to ensure visibility for users with low vision.

<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
Expand Down