Fix Audio SFX right accordion folding behavior - PR_26144_008-fix-audio-sfx-right-accordion-folding

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_right_accordion_folding.md

@@ -0,0 +1,71 @@
+# Audio / SFX Playground V2 Right Accordion Folding Validation
+
+PR: `PR_26144_008-fix-audio-sfx-right-accordion-folding`
+
+## Scope
+
+- Updated only `tools/audio-sfx-playground-v2` plus required reports.
+- Preserved the shared/template accordion pattern.
+- Kept Wave Preview, Output Summary, and Status as accordion sections.
+- Changed the Status accordion header from a non-button wrapper to a real accordion header button.
+- Moved the Clear button into the Status accordion content so it no longer sits inside the header toggle area.
+- Updated the accordion control to bind only direct child header/content elements for each section.
+- Restored right-column collapsed accordions to `flex: 0 0 auto` so closed sections release body height.
+- Did not modify `start_of_day` folders.
+
+## Static Validation
+
+PASS:
+
+- HTML/CSS accordion validation:
+  - no `<style>` blocks
+  - no inline event handlers
+  - no script tags without `src`
+  - linked stylesheets resolve
+  - right-column Wave Preview, Output Summary, and Status sections each have a direct accordion header button
+  - Clear button is not nested inside the Status accordion header
+  - CSS contains the closed right-column flex release rule
+  - CSS braces are balanced
+- Audio / SFX Playground V2 JavaScript syntax check:
+  - `node --check` over `tools/audio-sfx-playground-v2/js/**/*.js`
+- Changed runtime module import check:
+  - `AccordionSection.js`
+- Accordion behavior check:
+  - `AccordionSection` collapses and expands a section, updates `is-open`, `hidden`, and `aria-expanded`
+- Whitespace validation:
+  - `git diff --check -- tools/audio-sfx-playground-v2`
+- JSON validation:
+  - No JSON files changed in this PR.
+
+## Playwright Impact
+
+Playwright impacted: Yes.
+
+Expected validation:
+
+- Workspace V2 launches Audio / SFX Playground V2 with no console errors.
+- Wave Preview accordion collapses and expands.
+- Output Summary accordion collapses and expands.
+- Status accordion collapses and expands.
+- Clicking a right-column accordion header toggles only that section.
+- Collapsed right-column sections release vertical body space.
+- Clicking Clear inside the expanded Status body does not toggle the Status accordion.
+
+Local command results:
+
+- `npm run test:workspace-v2`
+  - FAIL: PowerShell blocked `npm.ps1` because script execution is disabled on this system.
+- `npm.cmd run test:workspace-v2`
+  - FAIL: package script started, but `playwright` is not installed or not available on PATH.
+
+Because Playwright is unavailable in this local environment, browser launch validation and V8 coverage could not be completed here.
+
+## Coverage
+
+WARN: Runtime JavaScript changed, but Playwright V8 coverage could not be generated because the local Playwright command is unavailable.
+
+- `(WARN) tools/audio-sfx-playground-v2/js/controls/AccordionSection.js - Playwright unavailable`
+
+## Full Samples Smoke Test
+
+Skipped. This PR only impacts Audio / SFX Playground V2 right-column UI behavior.

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

@@ -154,14 +154,14 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
         </section>
 
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
-          <div class="accordion-v2__header tool-starter__status-accordion-header" aria-expanded="true" aria-controls="statusLogContent">
+          <button class="accordion-v2__header tool-starter__status-accordion-header" type="button" aria-expanded="true" aria-controls="statusLogContent">
             <span>Status</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="statusLogContent" class="accordion-v2__content">
             <div class="tool-starter__status-header-actions">
               <button id="clearStatusButton" class="tool-starter__status-clear-button" type="button">Clear</button>
-              <span class="accordion-v2__icon" aria-hidden="true">+</span>
             </div>
-          </div>
-          <div id="statusLogContent" class="accordion-v2__content">
             <textarea id="statusLog" readonly rows="10" aria-label="Status log"></textarea>
           </div>
         </section>

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

@@ -1,8 +1,9 @@
 export class AccordionSection {
   constructor(section) {
     this.section = section;
-    this.header = section?.querySelector(".accordion-v2__header") || null;
-    this.content = section?.querySelector(".accordion-v2__content") || null;
+    const children = Array.from(section?.children || []);
+    this.header = children.find((child) => child.classList.contains("accordion-v2__header")) || null;
+    this.content = children.find((child) => child.classList.contains("accordion-v2__content")) || null;
     this.icon = this.header?.querySelector(".accordion-v2__icon") || null;
   }
 

tools/audio-sfx-playground-v2/styles/audioSfxLayoutDensity.css

@@ -155,12 +155,20 @@ body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right > .acco
   flex: 1 1 0;
 }
 
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right > .accordion-v2:not(.is-open) {
+  flex: 0 0 auto;
+}
+
 body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right .accordion-v2__content {
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
 }
 
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right .accordion-v2__content[hidden] {
+  display: none;
+}
+
 body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview {
   height: 100%;
   min-height: 0;