Header: Fix issues with search toggle in header

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 **Bugfixes**
 
-- 🔗 Tables: Add `scope: col` to `th` cells
+- 👤 Header: Fix accessibility issue with search toggle
+- 🧂 Tables: Add `scope: col` to `th` cells
 - 🎯 Targeted content: Fix validation issues with HTML
 - 🔗 Pagination links: Remove redundant `navigation` role
 

engine/app/components/citizens_advice_components/header.html.haml

@@ -9,12 +9,16 @@
       .cads-grid-col-md-2.cads-header__logo-row
         = logo
         - if search_form.present?
-          = tag.button(class: "cads-header__search-reveal js-cads-search-reveal cads-icon_search",
-            title: t(".open_search"),
+          = tag.button(class: "cads-header__search-reveal js-cads-search-reveal",
+            type: "button",
+            "aria-label": t(".open_search"),
             "aria-expanded": "false",
+            "aria-controls": "header-search-form",
             "data-testid": "expand-button",
             "data-descriptive-label-show": t(".open_search"),
-            "data-descriptive-label-hide": t(".close_search"))
+            "data-descriptive-label-hide": t(".close_search")) do
+            = render CitizensAdviceComponents::Icons::Search.new
+            = render CitizensAdviceComponents::Icons::Close.new
 
       .cads-grid-col-md-10.cads-header__search-row
         %ul.cads-header__links.js-cads-copy-into-nav
@@ -25,7 +29,7 @@
             %li.cads-header__links-item= account_link
 
         - if search_form.present?
-          .cads-header__search-form
+          #header-search-form.cads-header__search-form
             = form_tag(search_form.search_action_url,
               method: :get,
               role: "search",
@@ -38,4 +42,5 @@
                 title: t("citizens_advice_components.search.submit_title"),
                 "data-testid": "search-button",
                 class: "cads-search__button") do
+                = render CitizensAdviceComponents::Icons::Search.new
                 %span.cads-search__button-label= t("citizens_advice_components.search.submit_label")

engine/spec/components/citizens_advice_components/header_spec.rb

@@ -156,7 +156,7 @@
     end
 
     it "renders search toggle" do
-      expect(component.at("button[title='Open search']")).to be_present
+      expect(component.at("button[aria-label='Open search']")).to be_present
     end
 
     context "when welsh language" do
@@ -167,7 +167,7 @@
       end
 
       it "has translated search label" do
-        expect(component.at("button[title='Ymchwiliad agored']")).to be_present
+        expect(component.at("button[aria-label='Ymchwiliad agored']")).to be_present
       end
     end
   end

scss/6-components/_header.scss

@@ -2,7 +2,7 @@
 // Header
 // ============================================================================
 
-/** @define header */
+/** @define header; weak */
 .cads-header {
   background-color: $cads-header__background-colour;
   padding: $cads-spacing-4 0;
@@ -41,14 +41,21 @@
   &__search-reveal {
     @include cads-button-defaults();
 
-    display: none;
+    display: none; // Hide by default
+    width: $cads-interactive-target-size;
+    height: $cads-interactive-target-size;
     margin: 0;
-    padding: 11px 12px 11px 12px;
+    padding: 0;
     color: $cads-language__primary-button-colour;
     background: transparent;
     border: solid $cads-border-width-medium
       $cads-language__primary-button-colour;
 
+    .cads-icon {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
     &:hover,
     &:active {
       color: $cads-language__primary-button-hover-colour;
@@ -114,7 +121,18 @@
 
     .cads-header__search-reveal {
       display: inline-block;
-      width: $cads-interactive-target-size;
+
+      .cads-icon {
+        height: 18px;
+      }
+
+      .cads-icon--search {
+        display: inline-block;
+      }
+
+      .cads-icon--close {
+        display: none;
+      }
     }
 
     .cads-header__links {
@@ -147,6 +165,16 @@
   .cads-header__search-row {
     display: block;
   }
+
+  .cads-header__search-reveal {
+    .cads-icon--search {
+      display: none;
+    }
+
+    .cads-icon--close {
+      display: inline-block;
+    }
+  }
 }
 
 /* stylelint-disable no-descending-specificity */

scss/6-components/_search.scss

@@ -2,7 +2,7 @@
 // Search
 // ============================================================================
 
-/** @define search */
+/** @define search; weak */
 .cads-search {
   position: relative;
   white-space: nowrap;
@@ -53,22 +53,17 @@
 }
 
 ///
-// Modifier:
+// Modifier: Icon only
 ///
 .cads-search--icon-only {
-  @include cads-media-breakpoint-only(sm) {
-    .cads-search__button {
-      &::before {
-        display: inline;
-        content: '\004b';
-        font-family: 'cads';
-        font-weight: normal;
-      }
+  .cads-icon--search {
+    display: none;
+  }
 
-      &::after {
-        display: none;
-        content: '';
-      }
+  @include cads-media-breakpoint-only(sm) {
+    .cads-icon--search {
+      display: inline-block;
+      height: 20px;
     }
 
     .cads-search__button-label {

src/ts/header/header.test.ts

@@ -20,12 +20,12 @@ const minimalHeaderHtml = `<header class='cads-header' data-testid="header">
       <div class='cads-grid-col-md-5 cads-header__logo-row'>
         <a class='cads-logo' href='root_path'
           title='Citizens Advice homepage'></a>
-        <button aria-expanded="false" 
-          class="cads-header__search-reveal js-cads-search-reveal cads-icon_search" 
-          data-descriptive-label-hide="Close search" 
-          data-descriptive-label-show="Open search" 
-          data-testid="expand-button" 
-          title="Open search"></button>
+        <button type="button"
+          class="cads-header__search-reveal js-cads-search-reveal cads-icon_search"
+          data-descriptive-label-hide="Close search"
+          data-descriptive-label-show="Open search"
+          data-testid="expand-button"
+          aria-label="Open search"></button>
       </div>
       <div class='cads-grid-col-md-7 cads-header__search-row'>
         ${searchFormHtml}
@@ -39,18 +39,17 @@ test('allow toggling search', () => {
   initHeader();
 
   const headerEl = screen.getByTestId('header');
-  const controlButtonEl = screen.getByTitle('Open search');
+  const controlButtonEl = screen.getByTestId('expand-button');
 
   expect(headerEl).not.toHaveClass('cads-header--show-search');
+  expect(controlButtonEl).toHaveAttribute('aria-label', 'Open search');
   expect(controlButtonEl).toHaveAttribute('aria-expanded', 'false');
-  expect(controlButtonEl).toHaveClass('cads-icon_search');
 
   controlButtonEl.click();
 
   expect(headerEl).toHaveClass('cads-header--show-search');
-  expect(controlButtonEl.title).toBe('Close search');
+  expect(controlButtonEl).toHaveAttribute('aria-label', 'Close search');
   expect(controlButtonEl).toHaveAttribute('aria-expanded', 'true');
-  expect(controlButtonEl).toHaveClass('cads-icon_close');
 });
 
 test('only initialises when header is present', () => {

src/ts/header/header.ts

@@ -1,38 +1,44 @@
 const initHeader = (): void => {
-  const CLASS_NAMES = {
-    showSearch: 'cads-header--show-search',
-    iconSearch: 'cads-icon_search',
-    iconClose: 'cads-icon_close',
-  };
+  const SELECTOR = '.js-cads-search-reveal';
+  const SHOW_SEARCH_CLASS_NAME = 'cads-header--show-search';
 
   const header = document.querySelector('.cads-header');
 
   if (header) {
-    const controlButton = header.querySelector(
-      '.js-cads-search-reveal'
-    ) as HTMLButtonElement;
+    const controlButton = header.querySelector(SELECTOR) as HTMLButtonElement;
+
+    const setClosed = () => {
+      header.classList.remove(SHOW_SEARCH_CLASS_NAME);
+      controlButton.setAttribute('aria-expanded', 'false');
+
+      const showLabel = controlButton.getAttribute(
+        'data-descriptive-label-show'
+      );
+      if (showLabel) {
+        controlButton.setAttribute('aria-label', showLabel);
+      }
+    };
+
+    const setOpen = () => {
+      header.classList.add(SHOW_SEARCH_CLASS_NAME);
+      controlButton.setAttribute('aria-expanded', 'true');
+
+      const hideLabel = controlButton.getAttribute(
+        'data-descriptive-label-hide'
+      );
+      if (hideLabel) {
+        controlButton.setAttribute('aria-label', hideLabel);
+      }
+    };
+
+    // Set initial control state on init
+    setClosed();
 
     controlButton.addEventListener('click', () => {
-      if (header.classList.contains(CLASS_NAMES.showSearch)) {
-        header.classList.remove(CLASS_NAMES.showSearch);
-        controlButton.classList.remove(CLASS_NAMES.iconClose);
-        controlButton.classList.add(CLASS_NAMES.iconSearch);
-        controlButton.setAttribute('aria-expanded', 'false');
-
-        const title = controlButton.getAttribute('data-descriptive-label-show');
-        if (title) {
-          controlButton.title = title;
-        }
+      if (header.classList.contains(SHOW_SEARCH_CLASS_NAME)) {
+        setClosed();
       } else {
-        header.classList.add(CLASS_NAMES.showSearch);
-        controlButton.classList.remove(CLASS_NAMES.iconSearch);
-        controlButton.classList.add(CLASS_NAMES.iconClose);
-        controlButton.setAttribute('aria-expanded', 'true');
-
-        const title = controlButton.getAttribute('data-descriptive-label-hide');
-        if (title) {
-          controlButton.title = title;
-        }
+        setOpen();
       }
     });
   }

styleguide/examples/header/full_example.html

@@ -13,13 +13,38 @@
       <div class="cads-grid-col-md-2 cads-header__logo-row">
         <a title="Citizens Advice homepage" class="cads-logo" href="/"></a>
         <button
-          class="cads-header__search-reveal js-cads-search-reveal cads-icon_search"
-          title="Open search"
+          class="cads-header__search-reveal js-cads-search-reveal"
+          type="button"
+          aria-label="Open search"
           aria-expanded="false"
+          aria-controls="header-search-form"
           data-testid="expand-button"
           data-descriptive-label-show="Open search"
           data-descriptive-label-hide="Close search"
-        ></button>
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 16 16"
+            class="cads-icon cads-icon--small cads-icon--search"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M13.842 12.294 11.514 9.86a5.162 5.162 0 0 0-.74-6.354A5.139 5.139 0 0 0 2 7.145a5.146 5.146 0 0 0 2.712 4.542 5.135 5.135 0 0 0 5.282-.257l2.304 2.413a.53.53 0 0 0 .751 0l.795-.796a.529.529 0 0 0-.002-.753Zm-6.703-2.223a2.925 2.925 0 0 1-2.87-2.358 2.93 2.93 0 0 1 1.75-3.277 2.925 2.925 0 0 1 3.554 1.079 2.93 2.93 0 0 1-.364 3.698 2.908 2.908 0 0 1-2.07.862v-.004Z"
+            ></path>
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 16 16"
+            class="cads-icon cads-icon--small cads-icon--close"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M12.854 12.073a.5.5 0 0 0 0-.707L9.488 8l3.366-3.366a.5.5 0 0 0 0-.707l-.781-.78a.5.5 0 0 0-.707 0L8 6.511 4.634 3.146a.5.5 0 0 0-.707 0l-.78.781a.5.5 0 0 0 0 .707L6.511 8l-3.366 3.366a.5.5 0 0 0 0 .707l.781.78a.5.5 0 0 0 .707 0L8 9.489l3.366 3.366a.5.5 0 0 0 .707 0l.78-.781Z"
+            ></path>
+          </svg>
+        </button>
       </div>
       <div class="cads-grid-col-md-10 cads-header__search-row">
         <ul class="cads-header__links js-cads-copy-into-nav">
@@ -44,7 +69,7 @@
             </div>
           </li>
         </ul>
-        <div class="cads-header__search-form">
+        <div class="cads-header__search-form" id="header-search-form">
           <form
             role="search"
             class="cads-search cads-search--icon-only"
@@ -64,6 +89,17 @@
               data-testid="search-button"
               class="cads-search__button"
             >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewbox="0 0 16 16"
+                class="cads-icon cads-icon--small cads-icon--search"
+                focusable="false"
+                aria-hidden="true"
+              >
+                <path
+                  d="M13.842 12.294 11.514 9.86a5.162 5.162 0 0 0-.74-6.354A5.139 5.139 0 0 0 2 7.145a5.146 5.146 0 0 0 2.712 4.542 5.135 5.135 0 0 0 5.282-.257l2.304 2.413a.53.53 0 0 0 .751 0l.795-.796a.529.529 0 0 0-.002-.753Zm-6.703-2.223a2.925 2.925 0 0 1-2.87-2.358 2.93 2.93 0 0 1 1.75-3.277 2.925 2.925 0 0 1 3.554 1.079 2.93 2.93 0 0 1-.364 3.698 2.908 2.908 0 0 1-2.07.862v-.004Z"
+                ></path>
+              </svg>
               <span class="cads-search__button-label">Search</span>
             </button>
           </form>