DeadAir's pause slider without its heading (#290)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/CHANGELOG.md

@@ -22,7 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- A feed's settings are in parts, each named beside its controls: Address, Downloads, Playback, Where it shows and Directory, with All Subscriptions and Signals drawn as the sidebar draws them (#290).
+- A feed's settings are in parts, each named beside its controls: Address, Downloads, Playback, Where it shows and Directory, with All Subscriptions and Signals drawn as the sidebar draws them, and DeadAir's pause as a slider without a heading (#290).
 - An OPML subscription's page lists the items of all its shows together, newest first, with the same tabs, search and sort as a show's, in place of a list of the shows; the shows are still in the folder in the feed list (#283).
 - Unless the server pays for them, Signals are turned on in Settings with your own TypeSafe key, and the Signals folder shows only once they are on (#271).
 - A Signal's dialog says how far back it reads, and that an edit reads again only what was picked out (#276).

web/app.css

@@ -1164,7 +1164,8 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 .fsecin>.cap+.ffield{margin-top:10px}
 /* DeadAir's pause: four stops on one scale, a dot at each so it reads as four places to stop. */
 .dpause{display:grid;gap:6px;margin-top:6px}
-.dphead{display:flex;justify-content:space-between;align-items:baseline}
+/* The pause it leaves, over the slider's right end; the slider is named for a screen reader alone. */
+.dphead{display:flex;justify-content:flex-end;align-items:baseline}
 .dphead output{font-variant-numeric:tabular-nums;font-weight:600}
 .dpslide{--t:22px;position:relative;height:var(--t)}
 .dpslide::before,.dpslide::after{content:'';position:absolute;top:50%;pointer-events:none}

web/src/dialogs.ts

@@ -621,8 +621,8 @@ function settingsModal(f: Feed, newUrl?: string){
       <p class="cap">Shrinks long silences in ${these} to a beat, so episodes finish sooner. Leave it off
       for stories whose pauses are part of the telling.</p>
       <div class="dpause">
-        <div class="dphead"><label class="flabel" for="sdpause">Breathing room</label><output id="sdpauseout" for="sdpause"></output></div>
-        <div class="dpslide"><input type="range" id="sdpause" min="200" max="500" step="100" value="${f.deadair_pause||300}"${f.deadair?'':' disabled'}></div>
+        <div class="dphead"><output id="sdpauseout" for="sdpause"></output></div>
+        <div class="dpslide"><input type="range" id="sdpause" aria-label="Breathing room" min="200" max="500" step="100" value="${f.deadair_pause||300}"${f.deadair?'':' disabled'}></div>
         <div class="dpends" aria-hidden="true"><span>Brisk</span><span>Relaxed</span></div></div>`)}
     ${sect('Where it shows',`<div class="fplaces">${place('sinall','hide_from_all',ICON.all,'All Subscriptions')}${
       signalsOn()?place('sinsig','hide_from_signals',`<span class="fsig">${tile('signals')}</span>`,'Signals'):''}</div>
@@ -679,7 +679,7 @@ function settingsModal(f: Feed, newUrl?: string){
     if(n) n.oninput=()=>{ newest=Math.max(1,Math.floor(Number(n.value))||1); draw(false); };
   };
   for(const r of $$<HTMLInputElement>('[name=swin]')) r.onchange=()=>{ mode=r.value; draw(true); };
-  // Breathing room only matters with DeadAir on: greyed out, not hidden, so it can be seen beforehand.
+  // The pause slider only matters with DeadAir on: greyed out, not hidden, so it can be seen beforehand.
   $<HTMLInputElement>('#sdead').onchange=(e: Event)=>{ $<HTMLInputElement>('#sdpause').disabled=!(e.target as HTMLInputElement).checked; };
   const pause=$<HTMLInputElement>('#sdpause'), pauseText=()=>{ const s=`${Number(pause.value)/1000} s`; $('#sdpauseout').textContent=s; pause.setAttribute('aria-valuetext',s); };
   pause.oninput=pauseText; pauseText();