From 6cc0d1c1ad7470382717cb5d913347a9c3d05e4e4b218212c37c3fa227180cb8 Mon Sep 17 00:00:00 2001
From: nnwhen <nnwhen@nnwhen.com>
Date: Mon, 17 Mar 2025 14:11:08 +0200
Subject: [PATCH] JS Accessibility refinement

---
 now.css               |  6 ++++--
 now.html              | 24 ++++++++++++++----------
 res/asset-js-audio.js | 19 ++++++++++++++++---
 res/asset-js-now.js   | 23 +++++++++++++++++++----
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/now.css b/now.css
index 3307bc1..f5f299a 100644
--- a/now.css
+++ b/now.css
@@ -76,7 +76,9 @@ div.now {
 }
 
 .lyrics {
-  display: none;
   width: 80%;
-  margin: 16px auto;
+  margin: 16px 20px;
+}
+.block-toggle {
+  display: none;
 }
diff --git a/now.html b/now.html
index 6b899d5..155274a 100644
--- a/now.html
+++ b/now.html
@@ -143,7 +143,7 @@
           <h1>Hello!</h1>
           <h2>Losing Momentum Happens</h2>
           <h3>2025-03-13T15:00Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           While I didn't stop maintaining habits, I haven't posted here nearly
@@ -173,7 +173,7 @@
           <h1>Enjoy Art!!!</h1>
           <h2>You shed pieces of joy whenever art is ignored</h2>
           <h3>2025-03-07T21:00Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           My life has been undeniably improved the moment I decided all art is
@@ -188,7 +188,7 @@
           <h1>Huge Project Progress</h1>
           <h2>Music Making Machine!</h2>
           <h3>2025-03-06</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           I made some incredible progress on 3 tracks I've been working on for
@@ -225,7 +225,7 @@
           <h1>Consistency is Easy</h1>
           <h2>Thinking About it Is When You Make Excuses</h2>
           <h3>2025-03-05T20:00Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           Just doing the thing to maintain a habit is actually easy and simple,
@@ -252,7 +252,7 @@
             >) editing and maintanence
           </h2>
           <h3>2025-03-04</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           Had my first playthrough of
@@ -281,7 +281,7 @@
             <h1>'Chest'</h1>
             <h2>A Preview</h2>
             <h3>2025-02-28T10:30Z</h3>
-            <h4 class="postID"></h4>
+            <h4 style="display: none" aria-hidden="true" class="postID"></h4>
           </hgroup>
           <audio preload="none" controls="">
             <source src="res/prvw-mus-2025-02-28-chest.ogg" type="audio/ogg" />
@@ -289,6 +289,8 @@
           </audio>
           <button
             type="button"
+            class="block-toggle"
+            aria-hidden="true"
             onclick="blockToggle('chest-20250228T1030Z-000')"
           >
             Toggle Lyrics
@@ -310,7 +312,7 @@
               <h1>'Chest' Update</h1>
               <h2>With new but <em>non-final</em> lyrics</h2>
               <h3>2025-03-02T11:30Z</h3>
-              <h4 class="postID"></h4>
+              <h4 style="display: none" aria-hidden="true" class="postID"></h4>
             </hgroup>
             <audio preload="none" controls="">
               <source
@@ -324,6 +326,8 @@
             </audio>
             <button
               type="button"
+              class="block-toggle"
+              aria-hidden="true"
               onclick="blockToggle('chest-20250228T1030Z-001')"
             >
               Toggle Lyrics
@@ -360,7 +364,7 @@
           <h1>Persistence</h1>
           <h2>Maintenance and Growth</h2>
           <h3>2025-02-27T07:00Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>Keeping the momentum. Feeling proud. Continue.</p>
       </section>
@@ -370,7 +374,7 @@
           <h1>'Structure of Reality'</h1>
           <h2>Maintenance and Growth</h2>
           <h3>2025-02-25T13:30Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>Who do I want to continue to be, who do I want to become. Devote.</p>
       </section>
@@ -380,7 +384,7 @@
           <h1>Music and Code</h1>
           <h2>Self-Referential Post - Woohoo!</h2>
           <h3>2025-02-24T21:00Z</h3>
-          <h4 class="postID"></h4>
+          <h4 style="display: none" aria-hidden="true" class="postID"></h4>
         </hgroup>
         <p>
           Making this page and Listening to
diff --git a/res/asset-js-audio.js b/res/asset-js-audio.js
index a60c593..3484d1d 100644
--- a/res/asset-js-audio.js
+++ b/res/asset-js-audio.js
@@ -14,16 +14,29 @@ function onlyPlayOneIn(container) {
   );
 }
 
-document.addEventListener("DOMContentLoaded", function () {
-  onlyPlayOneIn(document.body);
-});
+function renderJSButtons() {
+  // If JS is disabled this won't run and therefore JS-powered buttons won't be displayed
+  let blockToggle = document.getElementsByClassName("block-toggle");
+  for (let i = 0; i < blockToggle.length; i++) {
+    blockToggle[i].style.display = "block";
+    // Accessibility is important!!!
+    blockToggle[i].ariaHidden = "false";
+  }
+}
 
 function blockToggle(id) {
   var blockID = document.getElementById(id);
 
   if (blockID.style.display === "block") {
     blockID.style.display = "none";
+    blockID.ariaHidden = "true";
   } else {
     blockID.style.display = "block";
+    blockID.ariaHidden = "false";
   }
 }
+
+document.addEventListener("DOMContentLoaded", function () {
+  onlyPlayOneIn(document.body);
+  renderJSButtons();
+});
diff --git a/res/asset-js-now.js b/res/asset-js-now.js
index 9067238..b6bd104 100644
--- a/res/asset-js-now.js
+++ b/res/asset-js-now.js
@@ -2,8 +2,12 @@ function nowPostID() {
   // Thread Parents
   let IDs = document.getElementsByClassName("now");
 
+  // If JS cannot run, the H4 must not be rendered for sake of screen-readers
   for (let i = 0; i < IDs.length; i++) {
-    IDs[i].getElementsByTagName("h4")[0].innerHTML = "#" + IDs[i].id;
+    let IDsH4 = IDs[i].getElementsByTagName("h4");
+    IDsH4[0].innerHTML = "#" + IDs[i].id;
+    IDsH4[0].style.display = "block";
+    IDsH4[0].ariaHidden = "false";
   }
 
   // Thread Children
@@ -11,14 +15,25 @@ function nowPostID() {
 
   for (let i = 0; i < IDs.length; i++) {
     for (let k = 0; k < IDs[i].getElementsByTagName("li").length; k++) {
-      IDs[i]
+      let IDsH4 = IDs[i]
         .getElementsByTagName("li")
-        [k].getElementsByTagName("h4")[0].innerHTML =
-        "#" + IDs[i].getElementsByTagName("li")[k].id;
+        [k].getElementsByTagName("h4");
+      IDsH4[0].innerHTML = "#" + IDs[i].getElementsByTagName("li")[k].id;
+      IDsH4[0].style.display = "block";
+      IDsH4[0].ariaHidden = "false";
     }
   }
 }
 
+function initialiseLyrics() {
+  // If JS is disabled this won't run and therefore JS-powered lyrics will just display normally
+  let hideLyrics = document.getElementsByClassName("lyrics");
+  for (let i = 0; i < hideLyrics.length; i++) {
+    hideLyrics[i].style.display = "none";
+  }
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   nowPostID(document.body);
+  initialiseLyrics();
 });