More accessible

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;
+
+    &: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;
+
+    &:hover, &:focus, &:focus-visible {
+      text-decoration-color: var(--link-color);
     }
+
+
+  }
+}
+
+

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"}
+                    href={"https://twitter.com/cobular_"}
                     target="_blank"
                     rel="noreferrer"
+                    tabIndex={0}
                   >
                     @cobular_
                   </a>
@@ -56,6 +56,7 @@ export function AboutMe() {
                   href={"https://github.com/JakeCover"}
                   target="_blank"
                   rel="noreferrer"
+                  tabIndex={0}
                 >
                   JakeCover
                 </a>
@@ -66,6 +67,7 @@ export function AboutMe() {
                   href={"https://t.me/cobular"}
                   target="_blank"
                   rel="noreferrer"
+                  tabIndex={0}
                 >
                   @cobular
                 </a>

src/components/ProjectGrid.scss

@@ -164,12 +164,16 @@ $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 {
+    &:hover {
       box-shadow: 0 2px 5px var(--grid-element-shadow);
     }
 
+    &:focus {
+      border: 2px solid lightblue;
+    }
+  }
+
   h2 {
     font-family: "Fira Code", monospace;
     font-weight: 400;
@@ -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);
+}

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"}

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;
 }