WCAG 1.4.11: Adjust link focus color, so it has enough contrast

navikt · Apr 27, 2022 · 44e8e0a · 44e8e0a
1 parent 70a5ab2
commit 44e8e0a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/styles/link.less b/src/styles/link.less
@@ -0,0 +1,20 @@
+@import './variables';
+
+.link {
+  .link();
+}
+
+.link() {
+  color: @primaryPurple;
+  font-family: 'Source Sans Pro', Arial, sans-serif;
+
+  &:focus {
+    outline: none;
+    color: #fff;
+    background: @blueDarken;
+  }
+
+  &:hover {
+    text-decoration-line: none;
+  }
+}
diff --git a/src/styles/styles.less b/src/styles/styles.less
@@ -4,7 +4,6 @@
 @import "../../node_modules/nav-frontend-paneler-style/src/index";
 @import "../../node_modules/nav-frontend-skjema-style/src/index";
 @import "../../node_modules/nav-frontend-grid-style/src/index";
-@import "../../node_modules/@navikt/arbeidsplassen-core/less/link/link";
 @import "../../node_modules/@navikt/arbeidsplassen-core/less/skjema/mixins";
 @import "../../node_modules/@navikt/arbeidsplassen-core/less/panel/panel";
 @import "../../node_modules/@navikt/arbeidsplassen-core/less/alertstripe/alertstripe";
@@ -14,6 +13,7 @@
 @import "./header";
 @import "./skiplink";
 @import "./button";
+@import "./link";
 
 html, body {
   height: 100%;

diff --git a/src/views/ad/adText/AdText.less b/src/views/ad/adText/AdText.less
@@ -1,6 +1,5 @@
 @import (reference) "../../../styles/variables";
-@import "../../../../node_modules/@navikt/arbeidsplassen-core/less/link/mixins";
-
+@import (reference) "../../../styles/link";
 
 .AdText {
   background: #fff;

diff --git a/src/views/ad/employerDetails/EmployerDetails.less b/src/views/ad/employerDetails/EmployerDetails.less
@@ -1,5 +1,5 @@
 @import (reference) "../../../styles/variables";
-@import "../../../../node_modules/@navikt/arbeidsplassen-core/less/link/mixins";
+@import (reference) "../../../styles/link";
 
 .EmployerDetails__h2 {
   margin: 4rem 0 1rem;