From 6ac5e6f02eea770f6416bcffc6e30901f0be92a5 Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Sat, 10 Oct 2026 23:57:15 +0300
Subject: [PATCH] fix: keep the volume readout out of the live regions

---
 src/components/DriveControls.vue | 5 ++++-
 src/styles/chromatic.css         | 2 +-
 src/styles/gantry.css            | 2 +-
 src/styles/world.css             | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/DriveControls.vue b/src/components/DriveControls.vue
index 5e93724..1778f48 100644
--- a/src/components/DriveControls.vue
+++ b/src/components/DriveControls.vue
@@ -313,9 +313,12 @@ onBeforeUnmount(() => {
             max="1"
             step="0.05"
             :value="audioVolume"
+            :aria-valuetext="`${Math.round(audioVolume * 100)}%`"
             @input="changeVolume"
           />
-          <output for="drive-volume">{{ Math.round(audioVolume * 100) }}%</output>
+          <!-- A plain readout: <output> is an implicit live region and would
+               compete with the motion status announcer. -->
+          <span class="drive-popover__readout" aria-hidden="true">{{ Math.round(audioVolume * 100) }}%</span>
         </div>
       </template>
       <button
diff --git a/src/styles/chromatic.css b/src/styles/chromatic.css
index 1643f02..31ebc7a 100644
--- a/src/styles/chromatic.css
+++ b/src/styles/chromatic.css
@@ -367,7 +367,7 @@
     background: #271633;
   }
   .drive-popover strong,
-  .drive-popover output {
+  .drive-popover__readout {
     color: var(--rose);
   }
   .drive-popover select {
diff --git a/src/styles/gantry.css b/src/styles/gantry.css
index be218d1..8a5df7d 100644
--- a/src/styles/gantry.css
+++ b/src/styles/gantry.css
@@ -609,7 +609,7 @@ html .drive-popover {
 }
 html .drive-popover strong { color: var(--focus); border-color: rgb(217 200 244 / 16%); }
 html .drive-popover input[type='range'] { accent-color: var(--focus); }
-html .drive-popover output { color: var(--focus); }
+html .drive-popover__readout { color: var(--focus); }
 html .drive-popover select { border-color: rgb(217 200 244 / 26%); background: #10091e; }
 .drive-popover__volume {
   display: grid;
diff --git a/src/styles/world.css b/src/styles/world.css
index cdf094d..b8f71a2 100644
--- a/src/styles/world.css
+++ b/src/styles/world.css
@@ -398,7 +398,7 @@
   padding-inline: 0.65rem;
 }
 
-.drive-popover output {
+.drive-popover__readout {
   color: var(--cyan);
   font-size: 0.68rem;
 }