Improved header element accessibility when at mobile sizes

[bookstack] / resources / sass / _header.scss

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index f371e0410bfdf3f3aa2d58e5d8ec56a31d72e4d4..e06dcde6f5c4032b04c4e5b0d2dc222be516768b 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -191,6 +191,11 @@ header .search-box {
       @include lightDark(color, #000, #fff);
       text-decoration: none;
     }
+    &:focus {
+      @include lightDark(background-color, #eee, #333);
+      outline-color: var(--color-primary);
+      color: var(--color-primary);
+    }
   }
   header .dropdown-container {
     display: block;
@@ -225,7 +230,7 @@ header .search-box {
   &:first-child {
     border-inline-end: 1px solid #DDD;
   }
-  &.active {
+  &[aria-selected="true"] {
     border-bottom-color: currentColor;
   }
 }