Issue #3226785 by mherchel, Gauravmahlawat, thejimbirch, andy-blum, schillerm:... (5c01c200) · Commits · project / drupal

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js

+39 −5

Changes for core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroSearchFormTest.js: 39 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ const headerNavSelector = '#header-nav';
		const searchButtonSelector = 'button.block-search-wide__button';
		const searchFormSelector = '.search-form.search-block-form';
		const searchWideSelector = '.block-search-wide__wrapper';
		const searchWideInputSelector = '#edit-keys--2';
		const searchNarrowSelector = '.block-search-narrow';

		module.exports = {
		@@ -32,24 +33,57 @@ module.exports = {
		.waitForElementVisible(searchButtonSelector)
		.assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'false')
		.click(searchButtonSelector)
		.waitForElementVisible(`${searchWideSelector}`)
		.waitForElementVisible(`${searchWideSelector} ${searchFormSelector}`)
		.waitForElementVisible(searchWideInputSelector)
		.assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'true')
		.assert.attributeContains(
		`${searchWideSelector} ${searchFormSelector} input[name=keys]`,
		searchWideInputSelector,
		'placeholder',
		'Search by keyword or phrase.',
		)
		.assert.attributeContains(
		`${searchWideSelector} ${searchFormSelector} input[name=keys]`,
		searchWideInputSelector,
		'title',
		'Enter the terms you wish to search for.',
		)
		.assert.elementPresent('button.search-form__submit')
		// Assert wide search form closes when element moves to body.
		.click('body')
		.waitForElementNotVisible(`${searchWideSelector}`)
		.waitForElementNotVisible(searchWideSelector)
		.assert.attributeEquals(searchButtonSelector, 'aria-expanded', 'false');
		},
		'Test focus management': (browser) => {
		browser
		.drupalRelativeURL('/')
		.waitForElementVisible(searchButtonSelector)
		.click(searchButtonSelector)
		.waitForElementVisible(searchWideInputSelector)
		.pause(400) // Wait for transitionend event to fire.
		// Assert that focus is moved to wide search text input.
		.execute(
		// eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
		function (searchWideInputSelector) {
		return document.activeElement.matches(searchWideInputSelector);
		},
		[searchWideInputSelector],
		(result) => {
		browser.assert.ok(
		result.value,
		'Assert that focus moves to wide search form on open.',
		);
		},
		)
		// Assert that search form is still visible when focus is on disclosure button.
		.keys(browser.Keys.SHIFT)
		.keys(browser.Keys.TAB)
		.pause(50)
		.isVisible(searchWideSelector)
		// Assert that search form is NOT visible when focus moves back to menu item.
		.keys(browser.Keys.TAB)
		.pause(50)
		.waitForElementNotVisible(searchWideSelector)
		// Release all keys.
		.keys(browser.Keys.NULL);
		},
		'search narrow form is accessible': (browser) => {
		browser
		.resizeWindow(1000, 800)

core/themes/olivero/js/search.es6.js

+15 −15

Changes for core/themes/olivero/js/search.es6.js: 15 added lines, 15 removed lines.
Original line number	Diff line number	Diff line
		@@ -28,7 +28,8 @@
		function handleFocus() {
		if (searchIsVisible()) {
		searchWideWrapper.querySelector('input[type="search"]').focus();
		} else {
		} else if (searchWideWrapper.contains(document.activeElement)) {
		// Return focus to button only if focus was inside of the search wrapper.
		searchWideButton.focus();
		}
		}
		@@ -61,21 +62,8 @@
		}
		});

		document.addEventListener('click', (e) => {
		if (
		e.target.matches(
		'[data-drupal-selector="block-search-wide-button"], [data-drupal-selector="block-search-wide-button"] *',
		)
		) {
		searchWideButton.addEventListener('click', () => {
		toggleSearchVisibility(!searchIsVisible());
		} else if (
		searchIsVisible() &&
		!e.target.matches(
		'[data-drupal-selector="block-search-wide-wrapper"], [data-drupal-selector="block-search-wide-wrapper"] *',
		)
		) {
		toggleSearchVisibility(false);
		}
		});

		/**
		@@ -98,4 +86,16 @@
		}
		},
		};

		/**
		* Close the wide search container if focus moves from either the container
		* or its toggle button.
		*/
		document
		.querySelector('[data-drupal-selector="search-block-form-2"]')
		.addEventListener('focusout', (e) => {
		if (!e.currentTarget.contains(e.relatedTarget)) {
		toggleSearchVisibility(false);
		}
		});
		})(Drupal);

core/themes/olivero/js/search.js

+7 −6

Changes for core/themes/olivero/js/search.js: 7 added lines, 6 removed lines.
Original line number	Diff line number	Diff line
		@@ -18,7 +18,7 @@
		function handleFocus() {
		if (searchIsVisible()) {
		searchWideWrapper.querySelector('input[type="search"]').focus();
		} else {
		} else if (searchWideWrapper.contains(document.activeElement)) {
		searchWideButton.focus();
		}
		}
		@@ -43,12 +43,8 @@
		toggleSearchVisibility(false);
		}
		});
		document.addEventListener('click', function (e) {
		if (e.target.matches('[data-drupal-selector="block-search-wide-button"], [data-drupal-selector="block-search-wide-button"] *')) {
		searchWideButton.addEventListener('click', function () {
		toggleSearchVisibility(!searchIsVisible());
		} else if (searchIsVisible() && !e.target.matches('[data-drupal-selector="block-search-wide-wrapper"], [data-drupal-selector="block-search-wide-wrapper"] *')) {
		toggleSearchVisibility(false);
		}
		});
		Drupal.behaviors.searchWide = {
		attach: function attach(context) {
		@@ -59,4 +55,9 @@
		}
		}
		};
		document.querySelector('[data-drupal-selector="search-block-form-2"]').addEventListener('focusout', function (e) {
		if (!e.currentTarget.contains(e.relatedTarget)) {
		toggleSearchVisibility(false);
		}
		});
		})(Drupal);
		No newline at end of file