Merge remote-tracking branch 'origin/main' into feat/top-searchbox

Author: danielroe

app/components/AccentColorPicker.vue

@@ -5,25 +5,37 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
-    <button
+  <fieldset class="flex items-center gap-4">
+    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <label
       v-for="color in accentColors"
       :key="color.id"
-      type="button"
-      role="option"
-      :aria-selected="selectedAccentColor === color.id"
-      :aria-label="color.name"
-      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)"
+      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)"
       :style="{ backgroundColor: color.value }"
-      @click="setAccentColor(color.id)"
-    />
-    <button
-      type="button"
-      :aria-label="$t('settings.clear_accent')"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
-      @click="setAccentColor(null)"
     >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        :value="color.id"
+        :checked="selectedAccentColor === color.id"
+        :aria-label="color.name"
+        @change="setAccentColor(color.id)"
+      />
+    </label>
+    <label
+      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"
+    >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        value=""
+        :checked="selectedAccentColor === null"
+        :aria-label="$t('settings.clear_accent')"
+        @change="setAccentColor(null)"
+      />
       <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
-    </button>
-  </div>
+    </label>
+  </fieldset>
 </template>

app/pages/settings.vue

@@ -216,7 +216,13 @@ defineOgImageComponent('Default', {
                   </option>
                 </select>
                 <template #fallback>
-                  <span class="skeleton block w-48 h-8" />
+                  <select
+                    id="language-select"
+                    disabled
+                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait"
+                  >
+                    <option>{{ $t('common.loading') }}</option>
+                  </select>
                 </template>
               </ClientOnly>
             </div>