fix: keep the volume readout out of the live regions

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

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 {

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;

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;
 }