fix(color): indicate [autofocus] on interactive elements when not using the keyboard

front/src/components/ui/Button.vue

@@ -75,6 +75,7 @@ onMounted(() => {
          align(props, { alignSelf:'start', alignText:'center' })(
     )))}"
     class="funkwhale button split-main"
+    :autofocus="autofocus || undefined"
     :disabled="disabled || undefined"
     :aria-pressed="props.ariaPressed"
     :class="{
@@ -106,6 +107,7 @@ onMounted(() => {
          align(props, { alignSelf:'start', alignText:'center' })(
     )))}"
     :disabled="disabled || undefined"
+    :autofocus="autofocus || undefined"
     :class="[
       'funkwhale',
       'button',
@@ -132,6 +134,7 @@ onMounted(() => {
       align(props, { alignSelf:'start', alignText:'center' })(
   )))"
   :disabled="disabled || undefined"
+  :autofocus="autofocus || undefined"
   class="funkwhale button"
   :aria-pressed="props.ariaPressed"
   :class="{

front/src/components/ui/Input.vue

@@ -65,6 +65,7 @@ const model = defineModel<string|number>({ required: true })
     v-bind="{...$attrs, ...attributes, ...color(props, ['solid', 'default', 'secondary'])()}"
     v-model="model"
     ref="input"
+    :autofocus="autofocus || undefined"
     :placeholder="placeholder"
     @click.stop
     @blur="showPassword = false"

front/src/components/ui/Link.vue

@@ -44,6 +44,7 @@ onMounted(() => {
             align(props)(
             )))"
     ref="button"
+    :autofocus="autofocus || undefined"
     :class="[
       $style.link,
       round && $style['is-round'],

front/src/components/ui/Modal.vue

@@ -86,7 +86,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
               {{ cancel }}
             </Button>
           </Layout>
-          <Spacer size-48 v-else />
+          <Spacer size-46 v-else />
         </div>
       </div>
     </Transition>

front/src/components/ui/Slider.vue

@@ -67,7 +67,9 @@ onMounted(() => {
       <input ref="input" type="range"
         style="width: var(--slider-width); opacity: .001;"
         :max="keys.length - 1"
-        v-model="index" />
+        :autofocus="autofocus || undefined"
+        v-model="index"
+      />
       <div :class="$style.range" />
       <div :class="$style.pin" />
     </span>

front/src/components/ui/Textarea.vue

@@ -206,6 +206,7 @@ onMounted(() => {
         @keydown.ctrl.b.exact.prevent="bold" @keydown.ctrl.i.exact.prevent="italics"
         @keydown.ctrl.shift.x.exact.prevent="strikethrough" @keydown.ctrl.k.exact.prevent="link" :maxlength="charLimit"
         v-bind="$attrs"
+        :autofocus="autofocus || undefined"
         :required="required"
         :placeholder="placeholder" v-model="model" id="textarea_id" :rows="initialLines"
         :style="`min-height:${((typeof(initialLines) === 'string' ? parseInt(initialLines) : (initialLines ?? 3)) + 1.2) * 1.5}rem`"

front/src/style/colors.scss

@@ -80,7 +80,7 @@
 // (2) Choosing the semantic colors from the palette
 
 * {
-  --focus-background-color: color-mix(in oklab, var(--focus-ring-color) 20%, var(--background-color));
+  --autofocus-outline-color: color-mix(in oklab, var(--background-color) 80%, transparent);
 }
 
 // Light theme
@@ -528,10 +528,11 @@
     background-color: var(--pressed-background-color, var(--active-background-color));
   }
 
-  // FIndicate autofocus when using a mouse
+  // Indicate autofocus when using a mouse
 
-  :focus:not(:focus-visible) {
+  [autofocus]:focus:not(:focus-visible) {
-    background-color: var(--focus-background-color);
+    outline: 4px solid var(--autofocus-outline-color);
+    outline-offset: 2px;
   }
 
   // Fallback for decorative elements without explicit color props