Fix focus button (#1362)

* Fixed bug focus button * Remove focus-ring on hover * Bumped version
statisticsnorway · Nov 4, 2024 · aa644fc · aa644fc
1 parent bafcf39
commit aa644fc
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 27 deletions.
diff --git a/lib/bundle.css b/lib/bundle.css
@@ -217,12 +217,14 @@ a {
   cursor: pointer;
 }
 .ssb-btn:hover, .ssb-btn:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
   background: #00824d;
   color: #fff;
   text-decoration: underline;
 }
+.ssb-btn:focus {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+}
 .ssb-btn:active {
   background: #274247;
   border: 2px solid #274247;
@@ -335,15 +337,15 @@ a {
 .ssb-btn-tertiary .button-header .header-text {
   color: #162327;
 }
-.ssb-btn-tertiary .button-header:hover, .ssb-btn-tertiary .button-header:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
-}
 .ssb-btn-tertiary .button-header:hover .header-text, .ssb-btn-tertiary .button-header:focus .header-text {
   color: #00824d;
   text-decoration: underline;
   text-underline-position: under;
 }
+.ssb-btn-tertiary .button-header:focus {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+}
 .ssb-btn-tertiary .button-header.no-icon {
   text-decoration: underline;
   text-underline-position: under;
@@ -1240,8 +1242,6 @@ a {
   vertical-align: top;
 }
 .ssb-glossary .glossary-button:hover, .ssb-glossary .glossary-button:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
   background-position: left bottom;
 }
 .ssb-glossary .glossary-button:hover .glossary-logo, .ssb-glossary .glossary-button:focus .glossary-logo {
@@ -1250,6 +1250,10 @@ a {
 .ssb-glossary .glossary-button:hover .glossary-text-wrap, .ssb-glossary .glossary-button:focus .glossary-text-wrap {
   border-bottom: none;
 }
+.ssb-glossary .glossary-button:focus {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+}
 .ssb-glossary .glossary-popup {
   font-family: "Open Sans", sans-serif !important;
   font-stretch: normal;
@@ -2513,8 +2517,6 @@ a {
   margin-top: 4px;
 }
 .ssb-table-link:hover, .ssb-table-link:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
   text-decoration: none;
 }
 .ssb-table-link:hover .tl-icon, .ssb-table-link:focus .tl-icon {
@@ -2528,6 +2530,10 @@ a {
 .ssb-table-link:hover .tl-description, .ssb-table-link:focus .tl-description {
   color: #00824d;
 }
+.ssb-table-link:focus {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+}
 
 .ssb-tabs {
   display: flex;
@@ -2626,11 +2632,13 @@ a {
   cursor: pointer;
 }
 .ssb-tag:hover, .ssb-tag:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
   background: #00824d;
   color: #fff;
 }
+.ssb-tag:focus {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+}
 .ssb-tag:active {
   background: #274247;
   border: 2px solid #274247;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {
@@ -130,4 +130,4 @@
       "name": "Carina G. Nordseth"
     }
   ]
-}
+}
diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss
@@ -27,12 +27,15 @@
 
   &:hover,
   &:focus {
-    @include focus-ring;
     background: $ssb-green-4;
     color: $ssb-white;
     text-decoration: underline;
   }
 
+  &:focus {
+    @include focus-ring;
+  }
+
   &:active {
     background: $ssb-dark-5;
     border: 2px solid $ssb-dark-5;
@@ -133,4 +136,4 @@
     font-size: 18px;
     margin-right: 5px;
   }
-}
+}
diff --git a/src/components/ButtonTertiary/_buttonTertiary.scss b/src/components/ButtonTertiary/_buttonTertiary.scss
@@ -28,15 +28,17 @@
 
     &:hover,
     &:focus {
-      @include focus-ring;
-
       .header-text {
         color: $ssb-green-4;
         text-decoration: underline;
         text-underline-position: under;
       }
     }
 
+    &:focus {
+      @include focus-ring;
+    }
+
     &.no-icon {
       text-decoration: underline;
       text-underline-position: under;
@@ -116,4 +118,4 @@
       color: $ssb-white;
     }
   }
-}
+}
diff --git a/src/components/Glossary/_glossary.scss b/src/components/Glossary/_glossary.scss
@@ -25,7 +25,6 @@
 
     &:hover,
     &:focus {
-      @include focus-ring;
       background-position: left bottom;
 
       .glossary-logo {
@@ -36,6 +35,10 @@
         border-bottom: none;
       }
     }
+
+    &:focus {
+      @include focus-ring;
+    }
   }
 
   .glossary-popup {
@@ -112,4 +115,4 @@
       }
     }
   }
-}
+}
diff --git a/src/components/TableLink/_tableLink.scss b/src/components/TableLink/_tableLink.scss
@@ -37,7 +37,6 @@
 
   &:hover,
   &:focus {
-    @include focus-ring;
     text-decoration: none;
 
     .tl-icon {
@@ -53,4 +52,8 @@
       color: $ssb-green-4;
     }
   }
-}
+
+  &:focus {
+    @include focus-ring;
+  }
+}
diff --git a/src/components/Tag/_tag.scss b/src/components/Tag/_tag.scss
@@ -26,11 +26,14 @@
 
   &:hover,
   &:focus {
-    @include focus-ring;
     background: $ssb-green-4;
     color: $ssb-white;
   }
 
+  &:focus {
+    @include focus-ring;
+  }
+
   &:active {
     background: $ssb-dark-5;
     border: 2px solid $ssb-dark-5;
@@ -42,4 +45,4 @@
     font-size: 18px;
     margin-right: 5px;
   }
-}
+}