Merge pull request #1218 from nla/ph-ctpl-291

CTPL-291: Make bookmark keyboard accessible & update colour to meet WCAG
nla · Feb 20, 2025 · 0cff385 · 0cff385
2 parents bc79182 + 14f7c95
commit 0cff385
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/app/assets/stylesheets/nla/_dark-mode.scss b/app/assets/stylesheets/nla/_dark-mode.scss
@@ -693,5 +693,16 @@
     }
   }
 
+  // Bookmark
+  .toggle-bookmark {
+    label {
+      color: $light-teal;
+    }
+
+    &:has(input[type=checkbox]:focus-visible) {
+      color: $black !important;
+      background-color: $light-teal;
+    }
+  }
 
 }
diff --git a/app/assets/stylesheets/nla/components/_bookmarks.scss b/app/assets/stylesheets/nla/components/_bookmarks.scss
@@ -2,11 +2,20 @@
   label {
     cursor: pointer;
     min-width: auto;
-    color: $mid-teal;
+    color: $warm-grey;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    border-radius: 0.5rem;
   }
-
+
+  &:has(input[type=checkbox]:focus-visible) {
+    color: $white !important;
+    background-color: $warm-grey;
+  }
+
   input[type=checkbox] {
-    display:none;
+    position: absolute;
+    opacity: 0;
   }
 
   input[type=checkbox] + span:before {