feat(a11y): wrap visual block in semantic container and add ARIA roles

chenxing-dev · chenxing-dev · commit 0f0a1b06cb47 · 2025-10-30T17:57:14.000+08:00
diff --git a/TODO.md b/TODO.md
@@ -5,11 +5,10 @@
 - [x] refactor(css): extract repeated colors and sizes into CSS variables
 - [x] style(a11y): add prefers-reduced-motion support
 - [x] refactor(controls): pause animations by default and toggle with a state class
-- [ ] perf(animation): replace blur filter with a soft radial/gradient overlay
-- [ ] feat(a11y): wrap the visual block in a semantic container
-  - [ ] feat(a11y): <main> with ARIA role img and label
-  - [ ] feat(a11y): decorative elements hidden from screen readers
-  - [ ] perf(css): mark glare as non-interactive
+- [x] feat(a11y): wrap the visual block in a semantic container
+  - [x] feat(a11y): <main> with ARIA role img and label
+  - [x] feat(a11y): decorative elements hidden from screen readers
+  - [x] perf(css): mark glare as non-interactive
 - [ ] fix(layout): center the record player itself with top/left 50% and transform
 - [ ] fix(animation): record spins via the record surface, not the label
 - [ ] fix(arm): join the tonearm bar and lower
@@ -25,7 +24,7 @@
   - [ ] feat(animation): add needle drop effect on play start
 - [ ] feat(ui): make tonearm, record, spindle, and stylus more realistic
   - [ ] feat(record): add vinyl groove texture
-  - [ ] feat(record): add surface reflection
+  
   - [ ] feat(spindle): add metallic texture
 - [ ] feat(chassis): add wooden base for the player
 - [ ] feat(shadow): add shadow under the record player
diff --git a/index.html b/index.html
@@ -10,19 +10,21 @@
 </head>
 
 <body>
-    <div class="record-player">
-        <div class="record-player__platter">
-            <div class="record-player__record">
-                <div class="record-player__glare"></div>
-                <div class="record-player__label">
+    <main role="img" aria-label="CSS illustration of a vinyl record player with a spinning record and tonearm.">
+        <div class="record-player" aria-hidden="true">
+            <div class="record-player__platter">
+                <div class="record-player__record">
+                    <div class="record-player__glare"></div>
+                    <div class="record-player__label">
+                    </div>
                 </div>
             </div>
+            <div class="record-player__arm">
+                <div class="record-player__arm-bar"></div>
+                <div class="record-player__arm-bar--lower"></div>
+            </div>
         </div>
-        <div class="record-player__arm">
-            <div class="record-player__arm-bar"></div>
-            <div class="record-player__arm-bar--lower"></div>
-        </div>
-    </div>
+    </main>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -165,15 +165,22 @@
         height: 100%;
         width: 100%;
         filter: blur(2vh);
+        /* softens the glare edges */
+        pointer-events: none;
+        /* non-interactive decorative layer */
+        user-select: none;
     }
 
+    /* Glare shapes simulate reflection */
     .record-player__glare::before {
         content: "";
         height: 100%;
         width: 100%;
         position: absolute;
         background-color: var(--glare-strong);
         clip-path: polygon(100% 0, 100% 50%, 0 50%, 0 100%);
+        /* a soft diagonal glare */
+        /* animation applied when .is-playing is present */
     }
 
     .record-player__glare::after {
@@ -183,6 +190,8 @@
         position: absolute;
         background-color: var(--glare-weak);
         clip-path: polygon(0 0, 50% 0, 50% 100%, 100% 100%);
+        /* a softer diagonal glare */
+        /* animation applied when .is-playing is present */
     }
 
     /* Tonearm */
@@ -308,8 +317,7 @@
     }
 }
 
-/* components consolidated above */
-
+/* a small positive rotation to simulate teetering */
 @keyframes teeter {
     0% {
         transform: rotate(0deg);
@@ -324,6 +332,7 @@
     }
 }
 
+/* a small negative rotation to simulate teetering */
 @keyframes teeter-flip {
     0% {
         transform: rotate(0deg);
@@ -338,8 +347,6 @@
     }
 }
 
-/* components consolidated above */
-
 @keyframes move-init {
     from {
         transform: rotate(-82deg);
@@ -362,6 +369,4 @@
     100% {
         transform: rotate(-75deg);
     }
-}
-
-/* components consolidated above */
+}
