From 8e8e2e063a3d44be4cda712f36807579f97e6cd6 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <tabletmeowcat@gmail.com>
Date: Sat, 11 Nov 2023 12:27:11 -0600
Subject: [PATCH] Accessibility update

---
 src/app/page.tsx                              | 32 +++++++++---
 src/components/Floaty/Floaty.tsx              |  2 +-
 src/components/Page/Page.tsx                  |  3 +-
 src/components/ProjectList/ProjectList.tsx    |  9 +++-
 .../ScrollBackInd/ScrollBackInd.tsx           |  1 +
 src/components/net/LastFM/LastFM.tsx          |  8 +--
 src/styles/globals.css                        | 50 +++++++++++++++++++
 7 files changed, 89 insertions(+), 16 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 380d6e4..a6fc2a7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -199,15 +199,27 @@ export default function Home() {
         }`}
         id="top"
       >
-        <h1>
+        <h1 aria-label="About M T R dot Link">
           ABTMTR
           <wbr />
           .LINK
         </h1>
+        <Time time={time} date={date} />
+        <Floaty top>
+          <input
+            id="accessibility"
+            type="checkbox"
+            onClick={function (x) {
+              (x.target as HTMLInputElement).checked
+                ? document.body.parentElement?.classList.add("a11y")
+                : document.body.parentElement?.classList.remove("a11y");
+            }}
+          />
+          <label htmlFor="accessibility">Accessibility</label>
+        </Floaty>
         <Floaty>
           <LastFM player={player} />
         </Floaty>
-        <Time time={time} date={date} />
         <Floaty start>
           <p className="hv">Scroll down for more!</p>
         </Floaty>
@@ -215,7 +227,11 @@ export default function Home() {
       <Page scroll={body.current} color={Color3.fromHex("FFFFFF")} id="hi">
         <h1>Welcome 👋</h1>
         <p>
-          I'm <b>MeowcaTheoRange</b> <small>(miau-kuh-thee~oh-ray~nj)</small>.
+          I'm <b>MeowcaTheoRange</b>{" "}
+          <small aria-label="Pronounced: meow, cuh, the, oh, range">
+            (miau-kuh-thee~oh-ray~nj)
+          </small>
+          .
           <br />
           I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
         </p>
@@ -597,7 +613,7 @@ export default function Home() {
           .
         </p>
         <ProjectList projects={images} markdown />
-        <ProjectList projects={blog} markdown double />
+        <ProjectList projects={blog} markdown double tooLong />
       </Page>
       <Page
         scroll={body.current}
@@ -656,7 +672,7 @@ export default function Home() {
           <br />
           <small>Primary Negative</small>
         </ColourChip>
-        <p style={{ color: "#00BFFF" }}>
+        <p style={{ color: "#00c0FF" }} className="color-collapse-on-a11y">
           <b>Iszac Blue</b> is literally <strong>Rocco Orange</strong> but
           inverted. This colour is named after <strong>Iszac</strong>, an OC of
           mine that I came up with, for the setting of Ætherglow.
@@ -668,7 +684,7 @@ export default function Home() {
           If you were to use any of these colours to represnt me as a{" "}
           <strong>person</strong>, use this one.
         </p>
-        <p style={{ color: "#FF4000" }}>
+        <p style={{ color: "#FF4000" }} className="color-collapse-on-a11y">
           <b>Rocco Orange</b> is my favourite colour orange, but now more red.
           The name comes from my character <strong>Rocco</strong>, whose hair is
           this colour - though this colour has been applied to more characters
@@ -687,12 +703,12 @@ export default function Home() {
           <br />
           <small>Secondary Negative</small>
         </ColourChip>
-        <p style={{ color: "#8000FF" }}>
+        <p style={{ color: "#8000FF" }} className="color-collapse-on-a11y">
           <b>Grape Soda</b> represents my love for grape soda.
           <br />
           My favourite is Fanta Grape. :]
         </p>
-        <p style={{ color: "#80FF00" }}>
+        <p style={{ color: "#80FF00" }} className="color-collapse-on-a11y">
           <b>Avalonian Waste</b> is also literally <strong>Grape Soda</strong>{" "}
           but inverted. This represents some{" "}
           <a
diff --git a/src/components/Floaty/Floaty.tsx b/src/components/Floaty/Floaty.tsx
index ebd8ac6..19d46e1 100644
--- a/src/components/Floaty/Floaty.tsx
+++ b/src/components/Floaty/Floaty.tsx
@@ -19,7 +19,7 @@ export default function Floaty({
         start ? styles.FloatyStart : ""
       } ${keepFloat ? styles.FloatyKeep : ""} ${
         sticky ? styles.FloatySticky : ""
-      }`}
+      } FL-collapse-on-a11y`}
     >
       {children}
     </div>
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 2870194..5b59b01 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -40,11 +40,12 @@ export default function Page({
       ref={pageobj}
       className={`${styles.Page} ${preview ? styles.PagePreview : ""} ${
         footer ? styles.PageFooter : ""
-      } ${floaty ? styles.PageSpace : ""} block`}
+      } ${floaty ? styles.PageSpace : ""} block PG-collapse-on-a11y`}
       style={
         {
           "--backgroundColor": "#" + color?.darken(75).toHex(),
           "--color": "#" + color?.toHex(),
+          "--color-a11y": "#" + color?.lighten(75).toHex(),
           background: bg,
           backgroundColor: "#" + color?.darken(90).toHex(),
           color: "var(--color)",
diff --git a/src/components/ProjectList/ProjectList.tsx b/src/components/ProjectList/ProjectList.tsx
index 0b6f581..a3b8ad8 100644
--- a/src/components/ProjectList/ProjectList.tsx
+++ b/src/components/ProjectList/ProjectList.tsx
@@ -16,10 +16,12 @@ export default function ProjectList({
   projects,
   markdown = false,
   double = false,
+  tooLong = false,
 }: {
   projects: Project[];
   markdown?: boolean;
   double?: boolean;
+  tooLong?: boolean;
 }) {
   const router = useRouter();
   return (
@@ -31,7 +33,7 @@ export default function ProjectList({
       {projects.map((project, i) => (
         <a
           key={i}
-          className={`${styles.ProjectListProject} notInline`}
+          className={`${styles.ProjectListProject} notInline color-collapse-on-a11y`}
           href={project.url}
           target="_blank"
         >
@@ -49,7 +51,10 @@ export default function ProjectList({
             <p className={styles.ProjectListProjectDescriptionTitle}>
               {project.name}
             </p>
-            <p className={styles.ProjectListProjectDescriptionDescription}>
+            <p
+              className={styles.ProjectListProjectDescriptionDescription}
+              aria-hidden={tooLong}
+            >
               {markdown ? (
                 <ReactMarkdown
                   remarkPlugins={[remarkBreaks]}
diff --git a/src/components/ScrollBackInd/ScrollBackInd.tsx b/src/components/ScrollBackInd/ScrollBackInd.tsx
index ed2e0e0..9249b71 100644
--- a/src/components/ScrollBackInd/ScrollBackInd.tsx
+++ b/src/components/ScrollBackInd/ScrollBackInd.tsx
@@ -14,6 +14,7 @@ export default function ScrollBackInd<T>({
 }) {
   return (
     <button
+      aria-hidden="true"
       className={`${styles.ScrollBackInd} ${
         hide ? styles.ScrollBackIndHidden : ""
       }`}
diff --git a/src/components/net/LastFM/LastFM.tsx b/src/components/net/LastFM/LastFM.tsx
index 6b04f88..0f0744f 100644
--- a/src/components/net/LastFM/LastFM.tsx
+++ b/src/components/net/LastFM/LastFM.tsx
@@ -11,9 +11,9 @@ export default function LastFM({
       {player?.recenttracks.track[0]["@attr"]?.nowplaying === "true" ? (
         <p>Currently listening to</p>
       ) : (
-        <p className={styles.LastFMError}>Last listened to</p>
+        <p className="hv">Last listened to</p>
       )}
-      <div className={styles.LastFM}>
+      <div className={`${styles.LastFM} LFM-collapse-on-a11y`}>
         <div className={styles.LastFMMetadata}>
           <p className={styles.LastFMMetadataTitle}>
             {player?.recenttracks.track[0].name}
@@ -24,7 +24,7 @@ export default function LastFM({
           </p>
         </div>
         <img
-          className={styles.LastFMAlbumArt}
+          className={`${styles.LastFMAlbumArt} LFMA-collapse-on-a11y`}
           src={player?.recenttracks.track[0].image[2]["#text"]}
           alt=""
           width="96"
@@ -33,6 +33,6 @@ export default function LastFM({
       </div>
     </>
   ) : (
-    <p className={styles.LastFMError}>Hold on...</p>
+    <p className="hv">Hold on...</p>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4b1faf9..79b4c47 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -18,6 +18,50 @@ div.body {
   scroll-snap-type: y mandatory;
 }
 
+/* A11y */
+
+html.a11y div.body {
+  scroll-snap-type: unset;
+}
+
+html.a11y .hv {
+  opacity: 0.75 !important;
+}
+
+html.a11y .FL-collapse-on-a11y {
+  position: static !important;
+  text-align: start !important;
+  display: block !important;
+  margin: 2em 0 !important;
+  max-width: none !important;
+}
+
+html.a11y .FL-collapse-on-a11y {
+  position: static !important;
+  text-align: start !important;
+  display: block !important;
+  margin: 2em 0 !important;
+  max-width: none !important;
+}
+
+html.a11y .LFM-collapse-on-a11y {
+  grid-auto-flow: column !important;
+  grid-template-columns: 96px auto !important;
+}
+
+html.a11y .LFMA-collapse-on-a11y {
+  order: -1 !important;
+}
+
+html.a11y .PG-collapse-on-a11y {
+  min-height: 0 !important;
+  color: var(--color-a11y) !important;
+}
+
+html.a11y .color-collapse-on-a11y {
+  color: white !important;
+}
+
 /* Markup */
 
 .block > h1,
@@ -176,3 +220,9 @@ a.special:active::after {
     font-size: 16px;
   }
 }
+
+@media only screen and (max-height: 800px) {
+  :root {
+    font-size: 16px;
+  }
+}