feat: make site fully accessible

Author: alexieyizhe

src/components/Footer.tsx

@@ -27,7 +27,12 @@ const Footer: FC = memo(() => {
           <Text>{label}</Text>
         </Link>
       ))}
-      <Link onClick={() => dispatch('section/toggle')}>
+      <Link
+        onClick={() => dispatch('section/toggle')}
+        onKeyUp={(e) => (e.key === 'Enter' ? dispatch('section/toggle') : null)}
+        role="button"
+        tabIndex={0}
+      >
         <Text>{displayedSection === 'about' ? 'my work' : 'about me'}</Text>
       </Link>
     </Container>

src/components/core/Link.tsx

@@ -19,12 +19,19 @@ const A = styled<LinkProps>('a')`
   transition: opacity 250ms;
   text-decoration: ${({ bare }) => (bare ? 'none' : 'underline')};
 
-  &:hover,
-  &:focus-visible {
-    text-decoration: none;
+  &:hover {
+    text-decoration: underline dotted;
     opacity: ${({ bare }) => (bare ? 0.8 : 1)};
   }
 
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid blue;
+  }
+
   ${screen.mobile} {
     font-size: 15px;
   }