Skip to content

Commit a85c0cc

Browse files
fix(a11y): add missing focus outlines per reviewer feedback
- Settings Toggle: add focus-visible ring styles to switch button - CollapsibleSection: add focus styles to anchor link heading - tag shortcut: add focus-visible styles for interactive tags/badges
1 parent 3b80102 commit a85c0cc

3 files changed

Lines changed: 3 additions & 3 deletions

File tree

app/components/CollapsibleSection.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ useHead({
105105

106106
<a
107107
:href="`#${id}`"
108-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
108+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
109109
>
110110
{{ title }}
111111
<span

app/components/Settings/Toggle.client.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const checked = defineModel<boolean>({
1212
<template>
1313
<button
1414
type="button"
15-
class="w-full flex items-center justify-between gap-4 group"
15+
class="w-full flex items-center justify-between gap-4 group rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-subtle"
1616
role="switch"
1717
:aria-checked="checked"
1818
@click="checked = !checked"

uno.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export default defineConfig({
155155
// Tags/badges
156156
[
157157
'tag',
158-
'inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)',
158+
'inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) focus-visible:(outline-none ring-2 ring-fg/50 ring-offset-1 ring-offset-bg)',
159159
],
160160
['badge-orange', 'bg-badge-orange/10 text-badge-orange'],
161161
['badge-yellow', 'bg-badge-yellow/10 text-badge-yellow'],

0 commit comments

Comments
 (0)