fix(menu): prevent mobile dropdown click from auto-focusing search
This commit is contained in:
@@ -22,7 +22,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
syncAriaHidden();
|
syncAriaHidden();
|
||||||
mobileQuery.addEventListener('change', syncAriaHidden);
|
mobileQuery.addEventListener('change', syncAriaHidden);
|
||||||
|
|
||||||
function toggleMenu() {
|
function toggleMenu(options = {}) {
|
||||||
|
const { focusOnOpen = true } = options;
|
||||||
|
|
||||||
// Toggle the hamburger menu
|
// Toggle the hamburger menu
|
||||||
menu.querySelector('svg').classList.toggle('open');
|
menu.querySelector('svg').classList.toggle('open');
|
||||||
|
|
||||||
@@ -41,8 +43,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
// Move focus into sidebar when opening, restore when closing
|
// Move focus into sidebar when opening, restore when closing
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
const firstFocusable = sidebarContainer.querySelector('a, button, input, [tabindex="0"]');
|
if (focusOnOpen) {
|
||||||
if (firstFocusable) firstFocusable.focus();
|
const firstFocusable = sidebarContainer.querySelector('a, button, input, [tabindex="0"]');
|
||||||
|
if (firstFocusable) firstFocusable.focus();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
menu.focus();
|
menu.focus();
|
||||||
}
|
}
|
||||||
@@ -50,7 +54,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
menu.addEventListener('click', (e) => {
|
menu.addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
toggleMenu();
|
// Pointer-initiated clicks on mobile should not force focus into the search input,
|
||||||
|
// which opens the software keyboard immediately.
|
||||||
|
toggleMenu({ focusOnOpen: e.detail === 0 });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close menu on Escape key (mobile only)
|
// Close menu on Escape key (mobile only)
|
||||||
|
|||||||
2
docs/hugo_stats.json
generated
2
docs/hugo_stats.json
generated
@@ -482,7 +482,6 @@
|
|||||||
"hx:ltr:pl-6",
|
"hx:ltr:pl-6",
|
||||||
"hx:ltr:pl-8",
|
"hx:ltr:pl-8",
|
||||||
"hx:ltr:pr-0",
|
"hx:ltr:pr-0",
|
||||||
"hx:ltr:pr-1",
|
|
||||||
"hx:ltr:pr-2",
|
"hx:ltr:pr-2",
|
||||||
"hx:ltr:pr-4",
|
"hx:ltr:pr-4",
|
||||||
"hx:ltr:pr-8",
|
"hx:ltr:pr-8",
|
||||||
@@ -641,7 +640,6 @@
|
|||||||
"hx:rtl:mr-3",
|
"hx:rtl:mr-3",
|
||||||
"hx:rtl:mr-auto",
|
"hx:rtl:mr-auto",
|
||||||
"hx:rtl:pl-0",
|
"hx:rtl:pl-0",
|
||||||
"hx:rtl:pl-1",
|
|
||||||
"hx:rtl:pl-2",
|
"hx:rtl:pl-2",
|
||||||
"hx:rtl:pl-4",
|
"hx:rtl:pl-4",
|
||||||
"hx:rtl:pl-8",
|
"hx:rtl:pl-8",
|
||||||
|
|||||||
21
tests/mobile-menu-focus.spec.ts
Normal file
21
tests/mobile-menu-focus.spec.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { test, expect } from "@playwright/test";
|
||||||
|
|
||||||
|
test("clicking mobile hamburger does not focus the sidebar search input", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.setViewportSize({ width: 375, height: 812 });
|
||||||
|
await page.goto("/", { waitUntil: "load" });
|
||||||
|
|
||||||
|
const menuButton = page.locator(".hextra-hamburger-menu");
|
||||||
|
await expect(menuButton).toBeVisible();
|
||||||
|
|
||||||
|
const sidebarSearchInput = page
|
||||||
|
.locator(".hextra-sidebar-container .hextra-search-input")
|
||||||
|
.first();
|
||||||
|
await expect(sidebarSearchInput).toBeVisible();
|
||||||
|
|
||||||
|
await menuButton.click();
|
||||||
|
|
||||||
|
await expect(menuButton).toHaveAttribute("aria-expanded", "true");
|
||||||
|
await expect(sidebarSearchInput).not.toBeFocused();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user