Fix Audio SFX slider focus and centralize control limits - PR_26145_008-audio-sfx-slider-focus-and-control-limits

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_slider_focus.md

@@ -0,0 +1,86 @@
+# Audio / SFX Playground V2 Slider Focus and Control Limits
+
+PR: `PR_26145_008-audio-sfx-slider-focus-and-control-limits`
+
+## Scope
+
+- Audited `tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js`.
+- Moved Audio / SFX slider `min`, `max`, `step`, and default values into the centralized `SLIDER_LIMITS` table in `SfxControlPanel.js`.
+- Removed scattered slider limit attributes from the Audio / SFX HTML; the control now applies them at mount.
+- Kept Sound Style as defaults/guidance only:
+  - no slider range mutation
+  - no waveform option disabling or hiding
+- Added range input focus retention after pointer, input, and change events so keyboard arrows continue adjusting the active slider.
+- Preserved current slider steps, including Duration, Release, and Sweep step `5`.
+
+## Targeted Static Validation
+
+- `node --check` over `tools/audio-sfx-playground-v2/js/**/*.js`: PASS
+- `JSON.parse` for `tools/schemas/tools/audio-sfx-playground-v2.schema.json`: PASS
+- HTML/CSS static guard:
+  - no inline event handlers: PASS
+  - no `<style>` blocks: PASS
+  - no inline `<script>` blocks: PASS
+  - CSS non-empty: PASS
+- `git diff --check -- tools/audio-sfx-playground-v2`: PASS
+  - Git reported LF-to-CRLF working-copy warnings only.
+
+## Targeted Node Validation
+
+- `SfxControlPanel.js` includes centralized `SLIDER_LIMITS`: PASS
+- Duration limit remains `min=60`, `max=2000`, `step=5`, `defaultValue=180`: PASS
+- Release limit remains `min=20`, `max=700`, `step=5`, `defaultValue=90`: PASS
+- Sweep limit remains `min=-1200`, `max=1200`, `step=5`, `defaultValue=700`: PASS
+- Mount applies centralized slider limits to the DOM inputs: PASS
+- Sound Style selection does not change slider limits: PASS
+- Sound Style selection does not disable waveform select: PASS
+- Slider pointer handler calls focus on the active range input: PASS
+
+## Focused Playwright Validation
+
+Ran a focused Playwright validation through a temporary local HTTP server using local browser binaries from `.ms-playwright`.
+
+- Tool launches without console errors: PASS
+- Runtime-applied slider limits are present on all range inputs: PASS
+- Duration, Release, and Sweep keep step `5`: PASS
+- Clicking Duration keeps focus on `#durationInput`: PASS
+- Pressing ArrowRight after clicking Duration adjusts by `5`: PASS
+- Clicking Sweep keeps focus on `#pitchSweepInput`: PASS
+- Pressing ArrowRight after clicking Sweep adjusts by `5`: PASS
+- Dragging Release keeps focus on `#releaseInput`: PASS
+- Pressing ArrowRight after dragging Release adjusts by `5`: PASS
+- Sound Style selection does not mutate slider limits: PASS
+- Sound Style selection does not disable or hide waveform options: PASS
+- All waveforms remain selectable after style selection: PASS
+
+## V8 Coverage
+
+- `(100%) tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js - covered by focused slider focus Playwright validation`
+
+Coverage is advisory per project instructions.
+
+## Workspace V2
+
+Command:
+
+```powershell
+$env:PLAYWRIGHT_BROWSERS_PATH='.ms-playwright'; npm.cmd run test:workspace-v2
+```
+
+Result: FAIL.
+
+Observed result:
+
+- 72 tests discovered.
+- 68 passed.
+- 4 failed:
+  - Input Mapping V2 mouse drag visual capture state test.
+  - Object Vector Studio V2 layout shell/schema-only palette gate test.
+  - Object Vector Studio V2 compact geometry layout/selected palette state test.
+  - Asset Manager V2 temporary UAT manifest/session context test timed out.
+
+The observed failures are outside the Audio / SFX Playground V2 scope.
+
+## Full Samples Smoke
+
+Skipped per request because this PR only impacts Audio / SFX Playground V2 controls.

tools/audio-sfx-playground-v2/index.html

@@ -95,32 +95,32 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </label>
             <label class="tool-starter__field" for="frequencyInput" data-density-control="frequency">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the starting pitch before any sweep is applied.">Frequency</span>
-              <input id="frequencyInput" type="range" min="80" max="1800" step="1">
+              <input id="frequencyInput" type="range">
               <output id="frequencyValue" for="frequencyInput"></output>
             </label>
             <label class="tool-starter__field" for="durationInput" data-density-control="duration">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls the total playback length of the effect.">Duration</span>
-              <input id="durationInput" type="range" min="60" max="2000" step="5">
+              <input id="durationInput" type="range">
               <output id="durationValue" for="durationInput"></output>
             </label>
             <label class="tool-starter__field" for="attackInput" data-density-control="attack">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the sound reaches full volume.">Attack</span>
-              <input id="attackInput" type="range" min="0" max="250" step="5">
+              <input id="attackInput" type="range">
               <output id="attackValue" for="attackInput"></output>
             </label>
             <label class="tool-starter__field" for="releaseInput" data-density-control="release">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how long the sound fades out at the end.">Release</span>
-              <input id="releaseInput" type="range" min="20" max="700" step="5">
+              <input id="releaseInput" type="range">
               <output id="releaseValue" for="releaseInput"></output>
             </label>
             <label class="tool-starter__field" for="volumeInput" data-density-control="volume">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the playback loudness for audition and export.">Volume</span>
-              <input id="volumeInput" type="range" min="0" max="1" step="0.01">
+              <input id="volumeInput" type="range">
               <output id="volumeValue" for="volumeInput"></output>
             </label>
             <label class="tool-starter__field" for="pitchSweepInput" data-density-control="sweep">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Bends pitch over time in cents, positive upward and negative downward.">Sweep</span>
-              <input id="pitchSweepInput" type="range" min="-1200" max="1200" step="5">
+              <input id="pitchSweepInput" type="range">
               <output id="pitchSweepValue" for="pitchSweepInput"></output>
             </label>
             <label class="tool-starter__toggle" for="noiseInput">
@@ -129,17 +129,17 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </label>
             <label class="tool-starter__field" for="noiseAmountInput" data-density-control="noiseAmount">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets how loud the arcade transient is when the noise source or layer is enabled.">Amount</span>
-              <input id="noiseAmountInput" type="range" min="0" max="1" step="0.01">
+              <input id="noiseAmountInput" type="range">
               <output id="noiseAmountValue" for="noiseAmountInput"></output>
             </label>
             <label class="tool-starter__field" for="noiseDecayInput" data-density-control="noiseDecay">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the burst fades out.">Decay</span>
-              <input id="noiseDecayInput" type="range" min="20" max="600" step="5">
+              <input id="noiseDecayInput" type="range">
               <output id="noiseDecayValue" for="noiseDecayInput"></output>
             </label>
             <label class="tool-starter__field" for="noiseFilterInput" data-density-control="noiseFilter">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Raises or lowers the transient brightness filter.">Brightness</span>
-              <input id="noiseFilterInput" type="range" min="400" max="9000" step="50">
+              <input id="noiseFilterInput" type="range">
               <output id="noiseFilterValue" for="noiseFilterInput"></output>
             </label>
             <p id="sfxValidationMessage" class="tool-starter__hint">Ready to audition.</p>

tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js

@@ -1,15 +1,39 @@
+const SLIDER_LIMITS = Object.freeze({
+  attackMs: Object.freeze({ min: 0, max: 250, step: 5, defaultValue: 5 }),
+  durationMs: Object.freeze({ min: 60, max: 2000, step: 5, defaultValue: 180 }),
+  frequencyHz: Object.freeze({ min: 80, max: 1800, step: 1, defaultValue: 880 }),
+  noiseAmount: Object.freeze({ min: 0, max: 1, step: 0.01, defaultValue: 0.65 }),
+  noiseDecayMs: Object.freeze({ min: 20, max: 600, step: 5, defaultValue: 95 }),
+  noiseFilterHz: Object.freeze({ min: 400, max: 9000, step: 50, defaultValue: 5200 }),
+  pitchSweepCents: Object.freeze({ min: -1200, max: 1200, step: 5, defaultValue: 700 }),
+  releaseMs: Object.freeze({ min: 20, max: 700, step: 5, defaultValue: 90 }),
+  volume: Object.freeze({ min: 0, max: 1, step: 0.01, defaultValue: 0.42 })
+});
+
+const SLIDER_INPUTS = Object.freeze([
+  Object.freeze({ soundKey: "attackMs", inputProperty: "attackInput" }),
+  Object.freeze({ soundKey: "durationMs", inputProperty: "durationInput" }),
+  Object.freeze({ soundKey: "frequencyHz", inputProperty: "frequencyInput" }),
+  Object.freeze({ soundKey: "noiseAmount", inputProperty: "noiseAmountInput" }),
+  Object.freeze({ soundKey: "noiseDecayMs", inputProperty: "noiseDecayInput" }),
+  Object.freeze({ soundKey: "noiseFilterHz", inputProperty: "noiseFilterInput" }),
+  Object.freeze({ soundKey: "pitchSweepCents", inputProperty: "pitchSweepInput" }),
+  Object.freeze({ soundKey: "releaseMs", inputProperty: "releaseInput" }),
+  Object.freeze({ soundKey: "volume", inputProperty: "volumeInput" })
+]);
+
 const DEFAULT_SOUND = Object.freeze({
-  attackMs: 5,
-  durationMs: 180,
-  frequencyHz: 880,
+  attackMs: SLIDER_LIMITS.attackMs.defaultValue,
+  durationMs: SLIDER_LIMITS.durationMs.defaultValue,
+  frequencyHz: SLIDER_LIMITS.frequencyHz.defaultValue,
   name: "Coin",
   noise: false,
-  noiseAmount: 0.65,
-  noiseDecayMs: 95,
-  noiseFilterHz: 5200,
-  pitchSweepCents: 700,
-  releaseMs: 90,
-  volume: 0.42,
+  noiseAmount: SLIDER_LIMITS.noiseAmount.defaultValue,
+  noiseDecayMs: SLIDER_LIMITS.noiseDecayMs.defaultValue,
+  noiseFilterHz: SLIDER_LIMITS.noiseFilterHz.defaultValue,
+  pitchSweepCents: SLIDER_LIMITS.pitchSweepCents.defaultValue,
+  releaseMs: SLIDER_LIMITS.releaseMs.defaultValue,
+  volume: SLIDER_LIMITS.volume.defaultValue,
   waveform: "square"
 });
 
@@ -138,10 +162,9 @@ function toNumber(input) {
   return Number.parseFloat(input.value);
 }
 
-function readRange(input) {
+function readRange(input, limits) {
   const value = toNumber(input);
-  const min = Number.parseFloat(input.min);
-  const max = Number.parseFloat(input.max);
+  const { min, max } = limits;
   if (!Number.isFinite(value) || value < min || value > max) {
     return { ok: false, message: `${input.id} must be between ${min} and ${max}.` };
   }
@@ -204,6 +227,7 @@ export class SfxControlPanel {
   }
 
   mount({ onAdd, onChange, onDelete }) {
+    this.applySliderLimits();
     this.loadSound(DEFAULT_SOUND);
     this.addButton.addEventListener("click", onAdd);
     this.deleteButton.addEventListener("click", onDelete);
@@ -236,6 +260,31 @@ export class SfxControlPanel {
         onChange();
       });
     });
+    this.sliderInputs().forEach((input) => {
+      input.addEventListener("pointerdown", () => this.focusSlider(input));
+      input.addEventListener("input", () => this.focusSlider(input));
+      input.addEventListener("change", () => this.focusSlider(input));
+    });
+  }
+
+  sliderInputs() {
+    return SLIDER_INPUTS.map((item) => this[item.inputProperty]);
+  }
+
+  applySliderLimits() {
+    SLIDER_INPUTS.forEach((item) => {
+      const input = this[item.inputProperty];
+      const limits = SLIDER_LIMITS[item.soundKey];
+      input.min = String(limits.min);
+      input.max = String(limits.max);
+      input.step = String(limits.step);
+    });
+  }
+
+  focusSlider(input) {
+    if (typeof input.focus === "function") {
+      input.focus({ preventScroll: true });
+    }
   }
 
   loadSound(sound) {
@@ -297,15 +346,15 @@ export class SfxControlPanel {
     if (!ALLOWED_WAVEFORMS.has(this.waveformSelect.value)) {
       return { valid: false, message: `Unsupported waveform: ${this.waveformSelect.value}.` };
     }
-    const frequency = readRange(this.frequencyInput);
-    const duration = readRange(this.durationInput);
-    const attack = readRange(this.attackInput);
-    const release = readRange(this.releaseInput);
-    const volume = readRange(this.volumeInput);
-    const pitchSweep = readRange(this.pitchSweepInput);
-    const noiseAmount = readRange(this.noiseAmountInput);
-    const noiseDecay = readRange(this.noiseDecayInput);
-    const noiseFilter = readRange(this.noiseFilterInput);
+    const frequency = readRange(this.frequencyInput, SLIDER_LIMITS.frequencyHz);
+    const duration = readRange(this.durationInput, SLIDER_LIMITS.durationMs);
+    const attack = readRange(this.attackInput, SLIDER_LIMITS.attackMs);
+    const release = readRange(this.releaseInput, SLIDER_LIMITS.releaseMs);
+    const volume = readRange(this.volumeInput, SLIDER_LIMITS.volume);
+    const pitchSweep = readRange(this.pitchSweepInput, SLIDER_LIMITS.pitchSweepCents);
+    const noiseAmount = readRange(this.noiseAmountInput, SLIDER_LIMITS.noiseAmount);
+    const noiseDecay = readRange(this.noiseDecayInput, SLIDER_LIMITS.noiseDecayMs);
+    const noiseFilter = readRange(this.noiseFilterInput, SLIDER_LIMITS.noiseFilterHz);
     const failed = [frequency, duration, attack, release, volume, pitchSweep, noiseAmount, noiseDecay, noiseFilter].find((result) => !result.ok);
     if (failed) {
       return { valid: false, message: failed.message };