From 7a9f4f001ebbd1931b2d6134c133a0bc9487d547 Mon Sep 17 00:00:00 2001
From: stevescruz <steve.silverio.cruz@gmail.com>
Date: Thu, 24 Sep 2020 20:27:59 -0400
Subject: [PATCH] Fix: Accessibility issue for CategoryListItem component's
 Anchor on focus NOTE: this commit helps fix #33

-Anchor now has a white outline to guarantee compliance with a11y (accessibility)
guidelines.
-Moved the margin from the inner content (Tech) to the outer content (Anchor).
-Altered the transition CSS property in Tech to explicitly define that the transition
will only happen to the background color. This prevents a transition from triggering on
a non desirable circunstance.

-According to the WCAG 2.1 guideline 2.4.7 the Focus must be Visible.
-Why? Because it helps people with motor impairments and people with
attention limitation or short term memory limitations understand visually
determine the component on which keyboard operations will interact at any
point in time.
---
 .../src/components/CategoryListItem/styled.js   | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CategoryListItem/styled.js b/frontend/src/components/CategoryListItem/styled.js
index fa24548..0981678 100644
--- a/frontend/src/components/CategoryListItem/styled.js
+++ b/frontend/src/components/CategoryListItem/styled.js
@@ -7,7 +7,6 @@ export const Tech = styled.div`
     width: 300px;
     height: 300px;
     background-color: var(--gray);
-    margin: 50px;
     border-radius: 10px;
     cursor: pointer;
     display: flex;
@@ -19,10 +18,9 @@ export const Tech = styled.div`
     ${media.lessThan('medium')`
         height: 8em;
         width: 20em;
-        margin: 1.4em;
     `}
 
-    transition: 0.25s;
+    transition: background-color 0.25s;
 
     &:hover {
         background-color: var(--dark-gray);
@@ -39,5 +37,18 @@ export const TechName = styled.h2`
 `;
 
 export const Anchor = styled(Link)`
+    color: transparent;
     text-decoration: none;
+    margin: 50px;
+    display: inline-block;
+
+    ${media.lessThan('medium')`
+        margin: 1.4em;
+    `}
+
+    transition: outline-color 0.25s;
+
+    &:focus {
+        outline: 1px solid var(--white);
+    }
 `;