fix(canvas/app): WCAG 2.4.7 focus-visible on error-state recovery buttons #1400

Open
core-uiux wants to merge 2 commits from fix/app-page-focus-v2 into main
2 changed files with 6 additions and 6 deletions
+3 -3
View File
@@ -118,7 +118,7 @@ export default function OrgsPage() {
<p role="alert" className="text-bad">Error: {error}</p>
<button
onClick={() => window.location.reload()}
className="mt-4 rounded bg-surface-card px-4 py-2 text-sm text-ink hover:bg-surface-card"
className="mt-4 rounded bg-surface-card px-4 py-2 text-sm text-ink hover:bg-surface-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
Retry
</button>
@@ -212,7 +212,7 @@ function AccountBar({ session }: { session: Session }) {
// edge cases (jsdom, blocked navigation) where it doesn't.
setSigningOut(false);
}}
className="rounded border border-line bg-surface-card px-3 py-1 text-xs text-ink hover:bg-surface-card disabled:opacity-50"
className="rounded border border-line bg-surface-card px-3 py-1 text-xs text-ink hover:bg-surface-card disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
aria-label="Sign out"
>
{signingOut ? "Signing out…" : "Sign out"}
@@ -439,7 +439,7 @@ function CreateOrgForm({ onCreated }: { onCreated: (slug: string) => void }) {
<button
type="submit"
disabled={submitting}
className="rounded bg-accent-strong px-4 py-2 text-sm font-medium text-white hover:bg-accent disabled:opacity-50"
className="rounded bg-accent-strong px-4 py-2 text-sm font-medium text-white hover:bg-accent disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{submitting ? "Creating…" : "Create organization"}
</button>
+3 -3
View File
@@ -103,7 +103,7 @@ export default function Home() {
setHydrationError(null);
window.location.reload();
}}
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm"
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
>
Retry
</button>
@@ -134,7 +134,7 @@ export default function Home() {
setHydrationError(null);
window.location.reload();
}}
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm"
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
>
Retry
</button>
@@ -176,7 +176,7 @@ brew services start redis`}</pre>
</p>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm mt-2"
className="px-4 py-2 bg-accent-strong hover:bg-accent text-white rounded-md text-sm mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
>
Reload
</button>