diff --git a/app/components/home/HomeConsole.vue b/app/components/home/HomeConsole.vue index d74fba4..8004d73 100644 --- a/app/components/home/HomeConsole.vue +++ b/app/components/home/HomeConsole.vue @@ -3,10 +3,10 @@ ref="root" class="console" :class="{ 'console--compact': compact, 'console--still': reduced }" - @pointerenter="hovered = true" - @pointerleave="hovered = false" - @focusin="hovered = true" - @focusout="hovered = false" + @pointerenter="pointerIn = true; hold()" + @pointerleave="pointerIn = false; release()" + @focusin="focusIn = true; hold()" + @focusout="onFocusOut" >
@@ -30,12 +30,17 @@ type="button" role="tab" class="fader" - :class="{ 'fader--active': axis.key === active }" + :class="{ 'fader--active': axis.key === active, 'fader--lifting': axis.key === hot }" :style="{ '--hue': `var(${axis.hue})`, '--level': levels[axis.key] ?? 0, '--i': i }" + :data-axis="axis.key" :aria-selected="axis.key === active" :aria-controls="`panel-${uid}`" :tabindex="axis.key === active ? 0 : -1" @click="choose(axis.key)" + @pointerenter="hoverKey = axis.key; lift(axis.key)" + @pointerleave="hoverKey = null" + @focus="focusKey = axis.key; lift(axis.key)" + @blur="focusKey = null" >