Fix all focus > focus-visible

thelia · May 31, 2024 · 6b286b7 · 6b286b7
1 parent 46203e0
commit 6b286b7
Show file tree

Hide file tree

Showing 19 changed files with 38 additions and 33 deletions.
diff --git a/assets/css/mobileDrawer.css b/assets/css/mobileDrawer.css
@@ -34,4 +34,8 @@
   &-show {
     @apply translate-y-0;
   }
+
+  @screen md {
+    display: none;
+  }
 }
diff --git a/components/Atoms/Form/checkbox.css b/components/Atoms/Form/checkbox.css
@@ -18,7 +18,7 @@
     height: 0;
     width: 0;
 
-    &:focus {
+    &:focus-visible{
       & ~ .checkmark {
         outline: var(--checkbox-focus) solid 1px;
         outline-offset: 1px;

diff --git a/components/Atoms/Form/toggle.css b/components/Atoms/Form/toggle.css
@@ -44,7 +44,7 @@
       }
     }
   }
-  input:focus {
+  input:focus-visible{
     & ~ .ToggleButton-wrapper {
       outline: var(--checkbox-focus) solid 1px;
       outline-offset: 1px;

diff --git a/components/Molecules/Breadcrumb/breadcrumb.css b/components/Molecules/Breadcrumb/breadcrumb.css
@@ -26,7 +26,7 @@
         color: var(--grey);
       }
 
-      &:focus {
+      &:focus-visible{
         background-color: var(--theme-light);
       }
     }
@@ -42,7 +42,7 @@
     text-decoration: none;
     margin-top: rem-convert(2px);
 
-    &:focus {
+    &:focus-visible{
       background-color: var(--grey-lightest);
       border: solid 1px var(--theme-medium);
     }

diff --git a/components/Molecules/Button/button.css b/components/Molecules/Button/button.css
@@ -50,7 +50,7 @@
       background: var(--grey-dark);
     }
   }
-  &:focus {
+  &:focus-visible, &:has(:focus-visible) {
     outline: var(--theme-medium) solid 2px;
   }
   &:disabled {
@@ -71,7 +71,7 @@
         color: var(--white);
       }
     }
-    &:focus {
+    &:focus-visible, &:has(:focus-visible){
       background: var(--white);
       border: transparent solid 1px;
       &:hover {
@@ -122,7 +122,7 @@
     &:hover:not(:focus):not(:disabled) {
       background: var(--error-light);
     }
-    &:focus {
+    &:focus-visible, &:has(:focus-visible){
       outline: var(--error-dark) solid 2px;
     }
     &:disabled {

diff --git a/components/Molecules/Dropdown/dropdown.css b/components/Molecules/Dropdown/dropdown.css
@@ -11,12 +11,12 @@
       background-color: var(--theme-light);
     }
 
-    &:focus + .Dropdown-list {
+    &:focus+ .Dropdown-list {
       opacity: 1;
       animation-name: none;
     }
 
-    &:focus + .Dropdown-list .Dropdown-option {
+    &:focus+ .Dropdown-list .Dropdown-option {
       cursor: pointer;
     }
   }
@@ -74,7 +74,7 @@
     outline: none;
 
     &:hover,
-    &:focus {
+    &:focus-visible{
       background-color: var(--theme-light);
     }
   }

diff --git a/components/Molecules/Fields/FieldInput/fieldInput.css b/components/Molecules/Fields/FieldInput/fieldInput.css
@@ -37,7 +37,7 @@
       background-color: var(--theme-lightest);
     }
 
-    &:focus {
+    &:focus-visible{
       outline-offset: 2px;
       outline: 1px solid var(--theme);
     }
@@ -87,7 +87,7 @@
         background-color: var(--error-lightest);
       }
 
-      &:focus {
+      &:focus-visible{
         outline: 1px solid var(--error-dark);
       }
     }

diff --git a/components/Molecules/Fields/FieldNumber/fieldNumber.css b/components/Molecules/Fields/FieldNumber/fieldNumber.css
@@ -17,7 +17,7 @@
       background-color: var(--theme-lightest);
     }
 
-    &:focus {
+    &:focus-visible{
       outline-offset: 2px;
       outline: 1px solid var(--theme);
     }
@@ -41,7 +41,7 @@
         background-color: var(--error-lightest);
       }
 
-      &:focus {
+      &:focus-visible{
         outline: 1px solid var(--error-dark);
       }
     }

diff --git a/components/Molecules/Fields/FieldSelect/fieldSelect.css b/components/Molecules/Fields/FieldSelect/fieldSelect.css
@@ -38,7 +38,7 @@
       background-color: var(--theme-lightest);
     }
 
-    &:focus {
+    &:focus-visible{
       outline-offset: 2px;
       outline: 1px solid var(--theme);
     }
@@ -74,7 +74,7 @@
         background-color: var(--error-lightest);
       }
 
-      &:focus {
+      &:focus-visible{
         outline: 1px solid var(--error-dark);
       }
     }

diff --git a/components/Molecules/Filters/FilterList/filterList.css b/components/Molecules/Filters/FilterList/filterList.css
@@ -4,7 +4,7 @@
   outline: 0;
   border-radius: 4px;
 
-  &:focus {
+  &:focus-visible{
     outline: 1px solid var(--theme);
   }
 

diff --git a/components/Molecules/Filters/FilterSelect/filterSelect.css b/components/Molecules/Filters/FilterSelect/filterSelect.css
@@ -8,16 +8,16 @@
     outline: none;
     border: 1px solid var(--grey-lighter);
 
-    &:focus + .FilterSelect-list {
+    &:focus-visible+ .FilterSelect-list {
       opacity: 1;
       animation-name: none;
     }
 
-    &:focus + .FilterSelect-list .FilterSelect-option {
+    &:focus-visible+ .FilterSelect-list .FilterSelect-option {
       cursor: pointer;
     }
 
-    &:focus .FilterSelect-icon {
+    &:focus-visible.FilterSelect-icon {
       transform: translateY(-50%) rotate(180deg);
     }
   }
@@ -85,7 +85,7 @@
     outline: none;
 
     &:hover,
-    &:focus {
+    &:focus-visible{
       background-color: var(--grey-lightest);
     }
   }

diff --git a/components/Molecules/HeaderButton/headerButton.css b/components/Molecules/HeaderButton/headerButton.css
@@ -40,7 +40,8 @@
     --header-button-bg: var(--header-button-bg-hover);
   }
 
-  &:focus {
+  &:focus-visible{
+    outline: none;
     box-shadow: 0 0 0 1px var(--theme) inset;
   }
 

diff --git a/components/Molecules/Link/link.css b/components/Molecules/Link/link.css
@@ -11,7 +11,7 @@
     color: var(--grey);
   }
 
-  &:focus {
+  &:focus-visible{
     background-color: var(--grey-lightest);
   }
 

diff --git a/components/Molecules/Pagination/pagination.css b/components/Molecules/Pagination/pagination.css
@@ -20,7 +20,7 @@
       color: var(--grey);
     }
 
-    &:focus {
+    &:focus-visible{
       outline: var(--theme-medium) solid 2px;
     }
 

diff --git a/components/Molecules/SearchBar/searchBar.css b/components/Molecules/SearchBar/searchBar.css
@@ -18,7 +18,7 @@
     flex-grow: 1;
     @apply paragraph-2;
     color: var(--black);
-    &:focus {
+    &:focus-visible{
       outline: none;
     }
     &::placeholder {

diff --git a/components/Molecules/Shortcut/Shortcut.css b/components/Molecules/Shortcut/Shortcut.css
@@ -19,7 +19,7 @@
     background-color: var(--grey-lightest);
   }
 
-  &:focus {
+  &:focus-visible{
     outline: var(--theme-medium) solid 1px;
     border-bottom: 0;
   }

diff --git a/components/Molecules/Tab/tab.css b/components/Molecules/Tab/tab.css
@@ -14,7 +14,7 @@
     color: var(--white);
   }
 
-  &:hover:focus {
+  &:hover:focus-visible{
     color: var(--grey-dark);
   }
 
@@ -32,7 +32,7 @@
     outline-color: var(--grey-dark);
   }
 
-  &:focus {
+  &:focus-visible{
     outline: var(--theme-medium) solid 2px;
   }
 

diff --git a/components/Molecules/Tag/Tag.css b/components/Molecules/Tag/Tag.css
@@ -29,7 +29,7 @@
     color: var(--black);
     border: 0.5px solid var(--validated);
 
-    &:focus {
+    &:focus-visible{
       border: 1px solid var(--validated);
     }
 
@@ -43,7 +43,7 @@
     color: var(--error-light);
     border-color: var(--error);
 
-    &:focus {
+    &:focus-visible{
       border: 1px solid var(--error-dark);
     }
   }
@@ -53,7 +53,7 @@
     color: var(--theme-dark);
     border-color: var(--theme);
 
-    &:focus {
+    &:focus-visible{
       border: 1px solid var(--theme-dark);
     }
   }

diff --git a/components/Organisms/ProductCard/ProductCard.css b/components/Organisms/ProductCard/ProductCard.css
@@ -497,7 +497,7 @@
     svg {
       max-width: 35px;
     }
-    &:focus {
+    &:focus-visible{
       outline: none;
     }
 
@@ -706,7 +706,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible{
     .ProductCard-img {
       img {
         transform: scale(1.075);