feat (accessibility) : FOCUS styles (#6)

codexarama · May 19, 2021 · 8f7e317 · 8f7e317
1 parent 4c8f394
commit 8f7e317
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -37,7 +37,7 @@ nav {
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 2px white, 0 0 0 4px $primaire-bg;
+      box-shadow: 0 0 0 2px white, 0 0 0 4px $secondaire-bg;
     }
   }
 
@@ -60,7 +60,7 @@ nav {
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 2px white, 0 0 0 4px $primaire-bg;
+      box-shadow: 0 0 0 2px white, 0 0 0 4px $secondaire-a;
     }
   }
 
@@ -72,7 +72,7 @@ nav {
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 2px white, 0 0 0 4px $primaire-bg;
+      box-shadow: 0 0 0 2px white, 0 0 0 4px $secondaire-a;
     }
   }
 }

diff --git a/sass/layout/_filter.scss b/sass/layout/_filter.scss
@@ -5,7 +5,14 @@
   margin: 50px 0;
 
   &__title {
-    margin: 10px 10px 0 0;
+    padding: 10px 10px 0 0;
+    border-radius: 3px;
+    &:focus {
+      padding: 10px 10px 0 10px;
+      margin-left: -10px;
+      outline: none;
+      box-shadow: 0 0 0 2px white, 0 0 0 4px $secondaire-a;
+    }
   }
 
   &__box {

diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
@@ -17,6 +17,14 @@
     overflow: hidden;
     cursor: pointer;
 
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px white, 0 0 0 6px $primaire-bg;
+    }
+  }
+
+  &__link {
+
     & img,
     & video {
       width: 275px;