Skip to content

🎨 Palette: Added focus-visible styles to topbar buttons #292

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

Merged
bobdivx merged 1 commit into from
Oct 30, 2026
Merged

🎨 Palette: Added focus-visible styles to topbar buttons #292

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
4 changes: 2 additions & 2 deletions apps/web/src/components/ActiveRuns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function ActiveRunRows({ runs, onPick }: { runs: AgentRunInfo[]; onPick:
<li key={run.run_uuid}>
<button
type="button"
class="flex min-h-[44px] w-full min-w-0 items-center gap-2.5 px-3 py-2 text-left transition hover:bg-white/5"
class="flex min-h-[44px] w-full min-w-0 items-center gap-2.5 px-3 py-2 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
onClick={() => onPick(run)}
>
<Dot status={run.status} />
Expand Down Expand Up @@ -110,7 +110,7 @@ export function ActiveRunsMenu() {
<>
<button
type="button"
class="hidden min-h-[44px] shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 md:flex"
class="hidden min-h-[44px] shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] md:flex"
aria-haspopup="dialog"
onClick={() => setOpen(true)}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export function AppHeader({
<div class="relative shrink-0" ref={menuRef}>
<button
type="button"
class="flex min-h-[44px] min-w-[44px] items-center justify-center gap-2.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] p-1 transition-[border-color,background-color,transform] duration-200 hover:border-white/20 hover:bg-white/[0.06] active:scale-[0.99] sm:justify-start sm:pr-3"
class="flex min-h-[44px] min-w-[44px] items-center justify-center gap-2.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] p-1 transition-[border-color,background-color,transform] duration-200 hover:border-white/20 hover:bg-white/[0.06] active:scale-[0.99] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] sm:justify-start sm:pr-3"
aria-label={`Compte : ${displayName}`}
aria-expanded={menuOpen}
aria-haspopup="menu"
Expand Down Expand Up @@ -215,7 +215,7 @@ export function AppHeader({
type="button"
role="menuitem"
disabled={loggingOut}
class="block w-full px-3 py-2.5 text-left text-sm text-[var(--color-danger)] transition hover:bg-white/5 disabled:opacity-50"
class="block w-full px-3 py-2.5 text-left text-sm text-[var(--color-danger)] transition hover:bg-white/5 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
onClick={logout}
>
{loggingOut ? 'Déconnexion…' : 'Se déconnecter'}
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/components/LaunchedAgentsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function LaunchedAgentRows({
<button
type="button"
class={cn(
'flex min-w-0 flex-1 items-center gap-2.5 text-left transition hover:bg-white/5',
'flex min-w-0 flex-1 items-center gap-2.5 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]',
dense ? 'px-3 py-2' : 'min-h-[44px] px-3 py-2.5',
)}
onClick={() => {
Expand All @@ -81,7 +81,7 @@ export function LaunchedAgentRows({
</button>
<button
type="button"
class="shrink-0 px-3 text-sm text-[var(--color-ink-faint)] transition hover:bg-white/5 hover:text-[var(--color-ink)]"
class="shrink-0 px-3 text-sm text-[var(--color-ink-faint)] transition hover:bg-white/5 hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
aria-label={`Retirer ${agent.title}`}
onClick={() => dismissLaunchedAgent(agent.uuid)}
>
Expand Down Expand Up @@ -131,7 +131,7 @@ export function LaunchedAgentsMenu() {
<div class="flex min-h-[44px] items-center rounded-full border border-[var(--color-line)] bg-white/[0.03]">
<button
type="button"
class="flex min-w-0 items-center gap-2 py-1 pl-2.5 pr-2 transition hover:text-[var(--color-ink)]"
class="flex min-w-0 items-center gap-2 py-1 pl-2.5 pr-2 transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
onClick={openLatest}
title={latest.projectName ? `${latest.title} · ${latest.projectName}` : latest.title}
>
Expand All @@ -143,7 +143,7 @@ export function LaunchedAgentsMenu() {
{agents.length > 1 ? (
<button
type="button"
class="flex h-8 items-center gap-1 border-l border-[var(--color-line)] px-2.5 text-[11px] font-medium text-[var(--color-ink-muted)] transition hover:text-[var(--color-ink)]"
class="flex h-8 items-center gap-1 border-l border-[var(--color-line)] px-2.5 text-[11px] font-medium text-[var(--color-ink-muted)] transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
aria-expanded={open}
aria-haspopup="menu"
aria-label="Agents lancés"
Expand All @@ -166,7 +166,7 @@ export function LaunchedAgentsMenu() {
) : (
<button
type="button"
class="pr-2.5 text-sm text-[var(--color-ink-faint)] transition hover:text-[var(--color-ink)]"
class="pr-2.5 text-sm text-[var(--color-ink-faint)] transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
aria-label={`Retirer ${latest.title}`}
onClick={() => dismissLaunchedAgent(latest.uuid)}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/WatchAlertsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function WatchAlertsMenu() {
<>
<button
type="button"
class="flex min-h-[44px] shrink-0 items-center gap-1.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20"
class="flex min-h-[44px] shrink-0 items-center gap-1.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
aria-haspopup="dialog"
aria-label={`${unread} alerte${unread > 1 ? 's' : ''} de surveillance`}
onClick={() => setOpen(true)}
Expand Down Expand Up @@ -111,7 +111,7 @@ export function WatchAlertsMenu() {
<li key={a.uuid}>
<button
type="button"
class="flex min-h-[44px] w-full min-w-0 items-start gap-2.5 px-4 py-2.5 text-left transition hover:bg-white/5"
class="flex min-h-[44px] w-full min-w-0 items-start gap-2.5 px-4 py-2.5 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
onClick={() => void pick(a)}
>
<span
Expand Down
Loading