fix(a11y): focus selector for tabs

Co-authored-by: Daniele T. <Fupete@users.noreply.github.com>
italia · Nov 13, 2023 · ef4d561 · ef4d561
1 parent 8489cda
commit ef4d561
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/scss/custom/_tab.scss b/src/scss/custom/_tab.scss
@@ -65,6 +65,9 @@
       border-right: 2px solid transparent;
       white-space: normal;
       position: relative;
+      &:focus:not(.focus--mouse) {
+        box-shadow: inset 0 0px 0 2px $focus-outline-color !important;
+      }
       &:hover {
         border-bottom: none;
       }
@@ -114,8 +117,8 @@
       border-bottom-color: transparent;
     }
 
-    &:focus {
-      border-bottom-color: transparent;
+    &:focus:not(.focus--mouse) {
+      box-shadow: inset 0 1px 0 2px $focus-outline-color !important;
     }
 
     &.disabled {
@@ -327,6 +330,9 @@
     .nav-link {
       border-bottom: none;
       border-top: 2px solid transparent;
+      &:focus:not(.focus--mouse) {
+        box-shadow: inset 0 -1px 0 2px $focus-outline-color !important;
+      }
     }
     .nav-link.active,
     .nav-item.show .nav-link {
@@ -354,6 +360,9 @@
         border-bottom: none;
         border-right: none;
         border-left: 2px solid transparent;
+        &:focus:not(.focus--mouse) {
+          box-shadow: inset 0px 0px 0 2px $focus-outline-color !important;
+        }
         &:hover {
           border-bottom: none;
         }