refactor: Improve link accessibility in header

bcgov · Jun 30, 2020 · c9de941 · c9de941
1 parent 3bf2a8b
commit c9de941
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 283 deletions.
diff --git a/app/components/Layout/Header.tsx b/app/components/Layout/Header.tsx
@@ -24,9 +24,7 @@ const HeaderLayout = ({isLoggedIn = false, isRegistered = false}) => (
               {isRegistered ? (
                 <Col>
                   <Link href="/">
-                    <a>
-                      <Button variant="outline-light">Dashboard</Button>
-                    </a>
+                    <a className="btn btn-outline-light">Dashboard</a>
                   </Link>
                 </Col>
               ) : null}
@@ -35,11 +33,12 @@ const HeaderLayout = ({isLoggedIn = false, isRegistered = false}) => (
                   <Form.Row>
                     {isRegistered && (
                       <Col>
-                        <Form action="/user/profile" method="get">
-                          <Button type="submit" variant="outline-light">
-                            Profile
-                          </Button>
-                        </Form>
+                        <a
+                          href="/user/profile"
+                          className="btn btn-outline-light"
+                        >
+                          Profile
+                        </a>
                       </Col>
                     )}
                     <Col>
@@ -114,21 +113,6 @@ const HeaderLayout = ({isLoggedIn = false, isRegistered = false}) => (
           align-items: center;
           justify-content: flex-end;
         }
-        .btn {
-          font-weight: bolder;
-        }
-        .link {
-          color: white;
-          text-decoration: none;
-        }
-        a:link,
-        a:visited {
-          color: white;
-        }
-        a:hover,
-        a:active {
-          color: white;
-        }
 
         /*
             These are sample media queries only. Media queries are quite subjective