From dcdc084a7e800ddc6242e8ed1ef22c7b4133187b Mon Sep 17 00:00:00 2001
From: Cobular <22972550+Cobular@users.noreply.github.com>
Date: Wed, 1 Sep 2021 13:17:40 -0700
Subject: [PATCH] More accessible

---
 src/components/AboutMe/AboutMe.scss | 40 +++++++++++++++++++++--------
 src/components/AboutMe/AboutMe.tsx  | 30 ++++++++++++----------
 src/components/ProjectGrid.scss     | 18 ++++++++-----
 src/components/ProjectGrid.tsx      | 14 ++++++----
 src/vars.scss                       |  5 ++--
 5 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/src/components/AboutMe/AboutMe.scss b/src/components/AboutMe/AboutMe.scss
index 7d4d690..adc8526 100644
--- a/src/components/AboutMe/AboutMe.scss
+++ b/src/components/AboutMe/AboutMe.scss
@@ -72,16 +72,36 @@
     }
   }
 
-}
+  button {
+    background: none!important;
+    border: none;
+    padding: 0!important;
+    color: var(--link-color);
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: 0.15em;
+    text-decoration-color:  rgba(0, 0, 0, 0);
+    transition: text-decoration 300ms;
 
-button {
-  background: none!important;
-  border: none;
-  padding: 0!important;
-  color: var(--link-color);
-  cursor: pointer;
-}
+    &:hover, &:focus, &:focus-visible {
+      text-decoration-color: var(--link-color);
+      border: none;
+    }
+  }
+
+  a {
+    color: var(--link-color);
+    text-decoration: underline;
+    text-decoration-thickness: 0.15em;
+    text-decoration-color:  rgba(0, 0, 0, 0);
+    transition: text-decoration 300ms;
 
-a {
-  color: var(--link-color);
+    &:hover, &:focus, &:focus-visible {
+      text-decoration-color: var(--link-color);
+    }
+
+
+  }
 }
+
+
diff --git a/src/components/AboutMe/AboutMe.tsx b/src/components/AboutMe/AboutMe.tsx
index e07a5b9..a0400ac 100644
--- a/src/components/AboutMe/AboutMe.tsx
+++ b/src/components/AboutMe/AboutMe.tsx
@@ -3,7 +3,6 @@ import { Tooltip } from "antd";
 import { Age } from "./Age";
 import { LastFmLi } from "./LastFmLi";
 
-
 export function AboutMe() {
   function EmailHandler() {
     const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
@@ -13,10 +12,10 @@ export function AboutMe() {
   return (
     <div id={"about-me-parent"}>
       <div id={"about-me"} className={"about-me-card"}>
-        <h1>Hi! I'm Jake!</h1>
+        <h1 aria-label={"Title"}>Hi! I'm Jake!</h1>
 
-        <div id={"info-parent"}>
-          <div id={"specific-info"}>
+        <div id={"info-parent"} aria-label={"About Me"}>
+          <div id={"specific-info"} aria-label={"Facts"}>
             <h2> A bit about me:</h2>
             <ul>
               <li>
@@ -32,7 +31,7 @@ export function AboutMe() {
               <LastFmLi />
             </ul>
           </div>
-          <div id={"fun-info"}>
+          <div id={"fun-info"} aria-label={"Contacts"}>
             <h2>Find Me:</h2>
             <ul>
               <li>
@@ -42,9 +41,10 @@ export function AboutMe() {
                 Twitter:{" "}
                 <Tooltip title={":("}>
                   <a
-                      href={"https://github.com/JakeCover"}
-                      target="_blank"
-                      rel="noreferrer"
+                    href={"https://twitter.com/cobular_"}
+                    target="_blank"
+                    rel="noreferrer"
+                    tabIndex={0}
                   >
                     @cobular_
                   </a>
@@ -53,9 +53,10 @@ export function AboutMe() {
               <li>
                 GitHub:{" "}
                 <a
-                    href={"https://github.com/JakeCover"}
-                    target="_blank"
-                    rel="noreferrer"
+                  href={"https://github.com/JakeCover"}
+                  target="_blank"
+                  rel="noreferrer"
+                  tabIndex={0}
                 >
                   JakeCover
                 </a>
@@ -63,9 +64,10 @@ export function AboutMe() {
               <li>
                 Telegram:{" "}
                 <a
-                    href={"https://t.me/cobular"}
-                    target="_blank"
-                    rel="noreferrer"
+                  href={"https://t.me/cobular"}
+                  target="_blank"
+                  rel="noreferrer"
+                  tabIndex={0}
                 >
                   @cobular
                 </a>
diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss
index 79d7b7a..e1126e5 100644
--- a/src/components/ProjectGrid.scss
+++ b/src/components/ProjectGrid.scss
@@ -164,10 +164,14 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
 
     box-shadow: 0 1px 2px var(--grid-element-shadow);
     transition: box-shadow 0.2s ease-in-out;
-  }
 
-  .GridElementInternal:hover {
-    box-shadow: 0 2px 5px var(--grid-element-shadow);
+    &:hover {
+      box-shadow: 0 2px 5px var(--grid-element-shadow);
+    }
+
+    &:focus {
+      border: 2px solid lightblue;
+    }
   }
 
   h2 {
@@ -288,11 +292,13 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
 
 .LinkIcon {
   position: absolute;
-  right: 12px;
-  top: 12px;
+  right: 16px;
+  top: 15px;
   font-size: 24px;
-  color: black;
 
   background: var(--chainlink-icon-background);
   border-radius: 5px;
 }
+svg {
+  fill: var(--chainlink-icon-color);
+}
diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx
index 6bb7195..929a578 100644
--- a/src/components/ProjectGrid.tsx
+++ b/src/components/ProjectGrid.tsx
@@ -41,7 +41,7 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
   if (link === undefined) {
     return (
       <div className={"OneWide GridElement"}>
-        <div className={"GridElementInternal"}>
+        <div className={"GridElementInternal"} role={"gridcell"}>
           <div className={"title"}>
             <h2>{title}</h2>
             {org && <h3>{org}</h3>}
@@ -54,12 +54,13 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
     );
   }
   return (
-    <div className={"OneWide GridElement"}>
+    <div className={"OneWide GridElement"} role={"gridcell"}>
       <a
         className={"Link GridElementInternal"}
         href={link}
         rel={"noreferrer"}
         target={"_blank"}
+        tabIndex={0}
       >
         <div className={"title"}>
           <h2>{title}</h2>
@@ -106,6 +107,7 @@ function SmallElementPic({
         href={link}
         target={"_blank"}
         rel={"noreferrer"}
+        tabIndex={0}
       >
         <div className={"image"}>
           <img src={image_url} alt={image_alt} />
@@ -151,6 +153,7 @@ function MediumElement({
       href={link}
       target={"_blank"}
       rel={"noreferrer"}
+      tabIndex={0}
     >
       <div className={"GridElementInternal"}>
         <div className={"image"}>
@@ -198,6 +201,7 @@ function LargeElementPic({
         href={link}
         target={"_blank"}
         rel={"noreferrer"}
+        tabIndex={0}
       >
         <div className={"image"}>
           <img src={image_url} alt={image_alt} />
@@ -233,15 +237,15 @@ export function ProjectGrid() {
 
   return (
     <div id={"project-grid-background"} style={{ paddingBottom: 20 }}>
-      <div id={"project-grid-parent"}>
-        <div id={"project-header"}>
+      <div id={"project-grid-parent"} aria-label={"My Projects"}>
+        <div id={"project-header"} aria-label={"Projects Header"}>
           <h2>&lt;/&gt; My Projects</h2>
           <p>
             A gallery of some of my most interesting projects. Look for{" "}
             <LinkOutlined />, click those projects for more information!
           </p>
         </div>
-        <div id={"project-grid"}>
+        <div id={"project-grid"} aria-label={"Projects Grid"}>
           <div className={"GridSizer"} />
           <SmallElement
             title={"ElaticMatch"}
diff --git a/src/vars.scss b/src/vars.scss
index e6df0cd..cca5629 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -1,8 +1,6 @@
 :root {
   --text: white;
   --background: #1f2022;
-  --header: #84B7DB;
-  --footer: var(--header);
   --about-me: #F1F1F1;
   --grid-background: var(--background);
   --grid-header-background: var(--background);
@@ -11,9 +9,10 @@
   --grid-element-border: #6f6f6f;
   --grid-element-shadow: rgba(255, 255, 255, 0.3);
   --grid-element-header: rgb(169 162 228 / 100%);
+  --grid-element-subheader: darkgrey;
   --chainlink-icon-background: rgba(43, 43, 43, 0.3);
+  --chainlink-icon-color: var(--grid-element-subheader);
   --link-color: var(--grid-element-header);
-  --grid-element-subheader: darkgrey;
 }