feat: removed tabindex from button + tidied inner page styles

zendesk · Mar 14, 2022 · 7f95d4f · 7f95d4f
1 parent ca91727
commit 7f95d4f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/script.js b/script.js
@@ -40,7 +40,6 @@ function buildClearSearchButton() {
   const button = document.createElement("button");
   button.setAttribute("type", "button");
   button.setAttribute("aria-controls", searchInput.id);
-  button.setAttribute("tabindex", "-1");
   button.classList.add("clear-button");
   const icon = `<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' role='img' viewBox='0 0 12 12' aria-label='${window.searchClearButtonLabel}'><path stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M3 9l6-6m0 6L3 3'/></svg>`;
   button.innerHTML = icon;

diff --git a/style.css b/style.css
@@ -1135,14 +1135,14 @@ ul {
   padding: 0 15px;
 }
 
-.search .clear-button:hover, .search .clear-button:focus {
+.search .clear-button:hover {
   background-color: $brand_color;
   color: #fff;
 }
 
 .search .clear-button:focus {
+  outline: 0;
   box-shadow: 0 0 0 3px $brand_color;
-  outline: none;
 }
 
 .search-has-value .clear-button {
@@ -1291,6 +1291,7 @@ ul {
 .sub-nav {
   align-items: baseline;
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 15px 30px;
   justify-content: space-between;
@@ -1299,7 +1300,7 @@ ul {
 
 @media (min-width: 768px) {
   .sub-nav {
-    align-items: baseline;
+    flex-direction: row;
   }
 }
 
@@ -1308,7 +1309,14 @@ ul {
 }
 
 .sub-nav .search-container {
-  flex: 0 1 300px;
+  max-width: 300px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .sub-nav .search-container {
+    flex: 0 1 300px;
+  }
 }
 
 .sub-nav input[type="search"]::after {

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -77,15 +77,13 @@ $padding-right: 20px;
     justify-content: center;
     padding: 0 15px;
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $brand-color;
       color: #fff;
     }
 
     &:focus {
-      box-shadow: 0 0 0 3px $brand_color;
-      outline: none;
+      @include focus-ring;
     }
 
   }

diff --git a/styles/_sub-nav.scss b/styles/_sub-nav.scss
@@ -1,18 +1,15 @@
 .sub-nav {
-  @include tablet {
-    align-items: baseline;
-    // flex-direction: row;
-  }
-
   align-items: baseline;
   display: flex;
-  // flex-direction: column;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 15px 30px;
   justify-content: space-between;
   margin-bottom: 55px;
-  // min-height: 50px;
-  // padding-bottom: 15px;
+
+  @include tablet {
+    flex-direction: row;
+  }
 
   // Inner pages breadcrumbs
   .breadcrumbs {
@@ -21,14 +18,15 @@
 
   // Inner pages search field
   .search-container {
-    flex: 0 1 300px;
-  }
+    max-width: 300px;
+    width: 100%;
 
-  input[type="search"] {
     @include tablet {
-      // min-width: 300px;
+      flex: 0 1 300px;
     }
+  }
 
+  input[type="search"] {
     &::after { 
       font-size: $font-size-base; 
     }