Move MIDI Studio V2 status and accordion actions into headers - PR_26146_006-midi-studio-v2-header-actions-layout

Author: ToolboxAid

docs/dev/reports/PR_26146_006-midi-studio-v2-header-actions-layout_validation.md

@@ -0,0 +1,38 @@
+# PR_26146_006-midi-studio-v2-header-actions-layout Validation
+
+## Scope
+
+- Continued from PR_26146_005.
+- Updated MIDI Studio V2 Status section markup so the Clear button lives inside the Status header without nesting a button inside another button.
+- Preserved existing accordion behavior and status logging behavior.
+- Preserved MIDI parsing, playback contract, source inspection behavior, and manifest schema.
+
+## Layout Contract
+
+- Status Clear is inside the Status header.
+- Accordion expand/collapse icons are inside their section headers.
+- Close/X controls are validated to be header-scoped where present; MIDI Studio V2 currently has no separate close/X panel controls.
+- No duplicated or floating Status Clear action rows exist under the Status content.
+- Left panel remains setup/input, center remains primary work surface, and right panel remains output/status/logging/diagnostics.
+
+## Validation
+
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: MIDI Studio V2 HTML inline scan found no inline `<script>`, `<style>`, or inline event handlers.
+- PASS: `npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --project=playwright --workers=1 --reporter=line`
+- PASS: `git diff --check`
+
+## Playwright Coverage
+
+- PASS: Status Clear is located inside the Status header.
+- PASS: Status Clear is not duplicated under the Status content panel.
+- PASS: accordion +/- controls are located inside section headers.
+- PASS: close/X placement is validated where such controls exist.
+- PASS: Clear still clears status/log content and does not collapse the Status accordion.
+- PASS: Status and Source accordions still open and close correctly.
+- PASS: existing MIDI source inspection tests still pass.
+
+## Explicit Skips
+
+- SKIP: Workspace Manager V2 registration/handoff test because Workspace Manager files were not touched.
+- SKIP: full samples smoke test because sample JSON alignment is out of scope.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -281,13 +281,50 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
-  test("keeps the Status Clear action aligned with MIDI Studio status layout", async ({ page }) => {
+  test("keeps header actions inside section headers", async ({ page }) => {
     const server = await openMidiStudio(page);
     try {
       const clearButton = page.locator("#clearStatusButton");
+      await expect(clearButton.locator("xpath=ancestor::*[contains(concat(' ', normalize-space(@class), ' '), ' accordion-v2__header ')][1]")).toHaveAttribute("aria-controls", "statusLogContent");
+      await expect(page.locator("#statusLogContent #clearStatusButton")).toHaveCount(0);
+      await expect(page.locator(".accordion-v2__header #clearStatusButton")).toHaveCount(1);
       await expect(clearButton).toHaveClass(/midi-studio-v2__status-clear-button/);
       await expect(clearButton).toHaveCSS("padding-left", "0px");
       await expect(clearButton).toHaveCSS("padding-right", "0px");
+      expect(await page.locator(".accordion-v2").evaluateAll((sections) => sections.every((section) => {
+        const header = section.querySelector(".accordion-v2__header");
+        const icon = section.querySelector(".accordion-v2__icon");
+        return Boolean(header && icon && header.contains(icon));
+      }))).toBe(true);
+      expect(await page.locator("body").evaluate((body) => Array.from(body.querySelectorAll('[aria-label*="close" i], [title*="close" i], [data-close], .tool-starter__close-button')).every((control) => Boolean(control.closest(".accordion-v2__header, .tools-platform-frame__accordion-summary, .is-collapsible__summary"))))).toBe(true);
+    } finally {
+      await workspaceV2CoverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
+  test("clears status content and preserves accordion open close behavior", async ({ page }) => {
+    const server = await openMidiStudio(page);
+    try {
+      const statusHeader = page.locator('.accordion-v2__header[aria-controls="statusLogContent"]');
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Loaded 3 MIDI songs/);
+      await page.locator("#clearStatusButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue("");
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(page.locator("#statusLogContent")).toBeVisible();
+      await statusHeader.click();
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "false");
+      await expect(page.locator("#statusLogContent")).toBeHidden();
+      await statusHeader.click();
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(page.locator("#statusLogContent")).toBeVisible();
+      const sourceHeader = page.locator('.accordion-v2__header[aria-controls="songSourceContent"]');
+      await sourceHeader.click();
+      await expect(sourceHeader).toHaveAttribute("aria-expanded", "false");
+      await expect(page.locator("#songSourceContent")).toBeHidden();
+      await sourceHeader.click();
+      await expect(sourceHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(page.locator("#songSourceContent")).toBeVisible();
     } finally {
       await workspaceV2CoverageReporter.stop(page);
       await server.close();

tools/midi-studio-v2/index.html

@@ -154,13 +154,13 @@ <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">
-          <button class="accordion-v2__header tool-starter__status-accordion-header" type="button" aria-expanded="true" aria-controls="statusLogContent">
+          <div class="accordion-v2__header tool-starter__status-accordion-header" aria-expanded="true" aria-controls="statusLogContent">
             <span>Status</span>
             <div class="tool-starter__status-header-actions">
               <button id="clearStatusButton" class="tool-starter__status-clear-button midi-studio-v2__status-clear-button" type="button">Clear</button>
               <span class="accordion-v2__icon" aria-hidden="true">+</span>
             </div>
-          </button>
+          </div>
           <div id="statusLogContent" class="accordion-v2__content">
             <textarea id="statusLog" readonly rows="10" aria-label="MIDI Studio V2 status log"></textarea>
           </div>