Skip to content

🎨 Palette: Améliorer l'accessibilité des boutons d'action Ollama #77

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: Améliorer l'accessibilité des boutons d'action Ollama #77

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
22 changes: 12 additions & 10 deletions src/components/settings/OllamaTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,22 +405,24 @@ export default function OllamaTab() {
<button
onClick={() => runTest(m, inst.normalizedUrl || inst.url)}
disabled={isTesting || batchTesting}
class={`p-1 rounded hover:bg-gray-200 transition-colors ${isTesting ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
class={`p-1 rounded hover:bg-gray-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${isTesting ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
title="Lancer un test"
aria-label="Lancer un test"
>
Comment on lines 405 to 411
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

medium

Le bouton de test individuel appelle actuellement runTest, qui ne met pas à jour l'état de chargement local testingModel. Par conséquent, l'icône ne tourne pas (animate-spin) et le bouton n'est pas désactivé pendant un test individuel. En utilisant testModel à la place et en vérifiant si testingModel === m, le bouton affichera correctement l'état de chargement et sera désactivé pour éviter les clics multiples.

Suggested change
<button
onClick={() => runTest(m, inst.normalizedUrl || inst.url)}
disabled={isTesting || batchTesting}
class={`p-1 rounded hover:bg-gray-200 transition-colors ${isTesting ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
class={`p-1 rounded hover:bg-gray-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${isTesting ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
title="Lancer un test"
aria-label="Lancer un test"
>
<button
onClick={() => testModel(m, inst.normalizedUrl || inst.url)}
disabled={isTesting || batchTesting || testingModel === m}
class={`p-1 rounded hover:bg-gray-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${(isTesting || testingModel === m) ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
title="Lancer un test"
aria-label="Lancer un test"
>

<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
</svg>
</button>
<button
onClick={() => toggleManualDisable(m, !!isDisabled)}
class={`p-1 rounded transition-colors ${isDisabled ? 'text-emerald-500 hover:bg-emerald-50' : 'text-gray-300 hover:text-rose-500 hover:bg-rose-50'}`}
class={`p-1 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${isDisabled ? 'text-emerald-500 hover:bg-emerald-50' : 'text-gray-300 hover:text-rose-500 hover:bg-rose-50'}`}
title={isDisabled ? 'Activer le modèle' : 'Désactiver le modèle'}
aria-label={isDisabled ? 'Activer le modèle' : 'Désactiver le modèle'}
>
{isDisabled ? (
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /></svg>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /></svg>
) : (
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
)}
</button>
</div>
Expand All @@ -435,14 +437,14 @@ export default function OllamaTab() {
)}
</div>
<div class="flex items-center gap-2">
<button onClick={() => toggleInstance(inst)} class={`text-[10px] font-bold px-3 py-1 rounded-full border transition-colors ${inst.enabled ? 'border-amber-200 text-amber-700 hover:bg-amber-50' : 'border-green-200 text-green-700 hover:bg-green-50'}`}>
<button onClick={() => toggleInstance(inst)} class={`text-[10px] font-bold px-3 py-1 rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${inst.enabled ? 'border-amber-200 text-amber-700 hover:bg-amber-50' : 'border-green-200 text-green-700 hover:bg-green-50'}`}>
{inst.enabled ? 'Désactiver' : 'Activer'}
</button>
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" aria-label="Modifier l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
</button>
Comment on lines +443 to 445
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

medium

Pour les utilisateurs sur ordinateur, l'ajout d'un attribut title en plus de aria-label permet d'afficher une infobulle (tooltip) au survol de la souris, ce qui améliore grandement l'expérience utilisateur pour ces boutons contenant uniquement des icônes.

Suggested change
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" aria-label="Modifier l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
</button>
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" title="Modifier l'instance" aria-label="Modifier l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
</button>

<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" aria-label="Supprimer l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
</button>
Comment on lines +446 to 448
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

medium

Pour les utilisateurs sur ordinateur, l'ajout d'un attribut title en plus de aria-label permet d'afficher une infobulle (tooltip) au survol de la souris, ce qui améliore grandement l'expérience utilisateur pour ces boutons contenant uniquement des icônes.

Suggested change
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" aria-label="Supprimer l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
</button>
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" title="Supprimer l'instance" aria-label="Supprimer l'instance">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
</button>

</div>
</div>
Expand Down