[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: use radiogroup rather than buttons for color picker

+28 -16
+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>