polish: aria-pressed on toggles + reduced-motion CSS guard

a67a3b7bc00df1908f35a9e39ec8f1207f651a59 · 2026-07-24 23:59:09 -0700 · Steve

- Seeds/Cracks toggle buttons expose aria-pressed state for screen readers.
- @media (prefers-reduced-motion: reduce) disables panel/button CSS transitions
  to match the existing JS reduced-motion handling.
Playwright-verified: aria-pressed flips true->false, toggles work, zero errors.

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

Files touched

M index.html

Diff

commit a67a3b7bc00df1908f35a9e39ec8f1207f651a59
Author: Steve <steve@designerwallcoverings.com>
Date:   Fri Jul 24 23:59:09 2026 -0700

    polish: aria-pressed on toggles + reduced-motion CSS guard
    
    - Seeds/Cracks toggle buttons expose aria-pressed state for screen readers.
    - @media (prefers-reduced-motion: reduce) disables panel/button CSS transitions
      to match the existing JS reduced-motion handling.
    Playwright-verified: aria-pressed flips true->false, toggles work, zero errors.
    
    Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 32cdd8d..608e7b1 100644
--- a/index.html
+++ b/index.html
@@ -114,6 +114,11 @@
     display: none;
   }
   #showBtn.visible { display: inline-block; }
+  /* Match the JS reduced-motion handling: kill UI easing too. */
+  @media (prefers-reduced-motion: reduce) {
+    #panel { transition: none; }
+    button { transition: none; }
+  }
 </style>
 </head>
 <body>
@@ -126,8 +131,8 @@
   <p><b>Click</b> to add a point &amp; re-shatter · <b>drag</b> to paint ·
      <b>right-click</b> (or Shift-click) removes the nearest.</p>
   <div class="row">
-    <button id="toggleSeeds" class="active">Seeds: on</button>
-    <button id="toggleEdges" class="active">Cracks: on</button>
+    <button id="toggleSeeds" class="active" aria-pressed="true">Seeds: on</button>
+    <button id="toggleEdges" class="active" aria-pressed="true">Cracks: on</button>
   </div>
   <div class="row">
     <button id="explode">💥 Shatter</button>
@@ -602,12 +607,14 @@
     showSeeds = v;
     els.toggleSeeds.textContent = "Seeds: " + (v ? "on" : "off");
     els.toggleSeeds.classList.toggle("active", v);
+    els.toggleSeeds.setAttribute("aria-pressed", v ? "true" : "false");
     schedule();
   }
   function setEdges(v) {
     showEdges = v;
     els.toggleEdges.textContent = "Cracks: " + (v ? "on" : "off");
     els.toggleEdges.classList.toggle("active", v);
+    els.toggleEdges.setAttribute("aria-pressed", v ? "true" : "false");
     schedule();
   }
   function cyclePalette() {

← 88e9a81 Voronoi Shatter: clamp seeds into viewport on resize + honor · back to Voronoi Shatter · (newest)