Issue #3223332 by mherchel, Gauravmahlawat, imalabya, andrewmacpherson: Olivero primary search button should be initialized with aria-expanded="false" by JS

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

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);

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);