From c96121dac07e6da972ffb6ff2eba8486bd6f07b3 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Tue, 17 Aug 2021 15:19:37 +0300
Subject: [PATCH] Issue #3223332 by mherchel, Gauravmahlawat, imalabya,
 andrewmacpherson: Olivero primary search button should be initialized with
 aria-expanded="false" by JS

---
 .../Tests/Olivero/oliveroSearchFormTest.js    |  8 ++++++-
 core/themes/olivero/js/search.es6.js          | 21 +++++++++++++++++++
 core/themes/olivero/js/search.js              |  9 ++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js b/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js
index 0632b20a0534..63366c1f7e42 100644
--- a/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js
+++ b/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js
@@ -29,9 +29,12 @@ module.exports = {
     browser
       .resizeWindow(1400, 800)
       .drupalRelativeURL('/')
+      .waitForElementVisible(searchButtonSelector)
+      .assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'false')
       .click(searchButtonSelector)
       .waitForElementVisible(`${searchWideSelector}`)
       .waitForElementVisible(`${searchWideSelector} ${searchFormSelector}`)
+      .assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'true')
       .assert.attributeContains(
         `${searchWideSelector} ${searchFormSelector} input[name=keys]`,
         'placeholder',
@@ -42,7 +45,10 @@ module.exports = {
         'title',
         'Enter the terms you wish to search for.',
       )
-      .assert.elementPresent('button.search-form__submit');
+      .assert.elementPresent('button.search-form__submit')
+      .click('body')
+      .waitForElementNotVisible(`${searchWideSelector}`)
+      .assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'false');
   },
   'search narrow form is accessible': (browser) => {
     browser
diff --git a/core/themes/olivero/js/search.es6.js b/core/themes/olivero/js/search.es6.js
index 0a5c41afaebd..d542770a90bc 100644
--- a/core/themes/olivero/js/search.es6.js
+++ b/core/themes/olivero/js/search.es6.js
@@ -77,4 +77,25 @@
       toggleSearchVisibility(false);
     }
   });
+
+  /**
+   * Initializes the search wide button.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *  Adds aria-expanded attribute to the search wide button.
+   */
+  Drupal.behaviors.searchWide = {
+    attach(context) {
+      const searchWideButton = once(
+        'search-wide',
+        '[data-drupal-selector="block-search-wide-button"]',
+        context,
+      ).shift();
+      if (searchWideButton) {
+        searchWideButton.setAttribute('aria-expanded', 'false');
+      }
+    },
+  };
 })(Drupal);
diff --git a/core/themes/olivero/js/search.js b/core/themes/olivero/js/search.js
index 0ebc753c4551..97bb6aac400d 100644
--- a/core/themes/olivero/js/search.js
+++ b/core/themes/olivero/js/search.js
@@ -50,4 +50,13 @@
       toggleSearchVisibility(false);
     }
   });
+  Drupal.behaviors.searchWide = {
+    attach: function attach(context) {
+      var searchWideButton = once('search-wide', '[data-drupal-selector="block-search-wide-button"]', context).shift();
+
+      if (searchWideButton) {
+        searchWideButton.setAttribute('aria-expanded', 'false');
+      }
+    }
+  };
 })(Drupal);
\ No newline at end of file