forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use radiogroup rather than buttons for color picker
+28
-16
+28
-16
app/components/AccentColorPicker.vue
+28
-16
app/components/AccentColorPicker.vue
···
5
5
</script>
6
6
7
7
<template>
8
-
<div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
9
-
<button
8
+
<fieldset class="flex items-center gap-4">
9
+
<legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
10
+
<label
10
11
v-for="color in accentColors"
11
12
:key="color.id"
12
-
type="button"
13
-
role="option"
14
-
:aria-selected="selectedAccentColor === color.id"
15
-
:aria-label="color.name"
16
-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
13
+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
17
14
:style="{ backgroundColor: color.value }"
18
-
@click="setAccentColor(color.id)"
19
-
/>
20
-
<button
21
-
type="button"
22
-
:aria-label="$t('settings.clear_accent')"
23
-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
24
-
@click="setAccentColor(null)"
25
15
>
16
+
<input
17
+
type="radio"
18
+
name="accent-color"
19
+
class="sr-only"
20
+
:value="color.id"
21
+
:checked="selectedAccentColor === color.id"
22
+
:aria-label="color.name"
23
+
@change="setAccentColor(color.id)"
24
+
/>
25
+
</label>
26
+
<label
27
+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
28
+
>
29
+
<input
30
+
type="radio"
31
+
name="accent-color"
32
+
class="sr-only"
33
+
value=""
34
+
:checked="selectedAccentColor === null"
35
+
:aria-label="$t('settings.clear_accent')"
36
+
@change="setAccentColor(null)"
37
+
/>
26
38
<span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
27
-
</button>
28
-
</div>
39
+
</label>
40
+
</fieldset>
29
41
</template>