diff --git a/src/content/market/favorites-drawer.ts b/src/content/market/favorites-drawer.ts index ded88c5..d2eff63 100644 --- a/src/content/market/favorites-drawer.ts +++ b/src/content/market/favorites-drawer.ts @@ -65,6 +65,7 @@ export function createFavoritesDrawer( drawer.setAttribute("aria-modal", "false"); drawer.setAttribute("aria-hidden", "true"); applyDrawerStyles(drawer); + drawer.style.display = "none"; (document.body ?? document.documentElement).append(tab, drawer); @@ -257,6 +258,7 @@ export function createFavoritesDrawer( } isOpen = true; drawer.hidden = false; + drawer.style.display = "flex"; drawer.setAttribute("aria-hidden", "false"); tab.setAttribute("aria-expanded", "true"); renderDrawer(); @@ -276,6 +278,7 @@ export function createFavoritesDrawer( } isOpen = false; drawer.hidden = true; + drawer.style.display = "none"; drawer.setAttribute("aria-hidden", "true"); tab.setAttribute("aria-expanded", "false"); if (tab.isConnected) { diff --git a/tests/favorites-drawer.test.ts b/tests/favorites-drawer.test.ts index 9eb6e82..780b164 100644 --- a/tests/favorites-drawer.test.ts +++ b/tests/favorites-drawer.test.ts @@ -139,6 +139,7 @@ describe("favorites-drawer", () => { expect(readTab().textContent).not.toMatch(/\d/); expect(readTab().style.color).not.toMatch(/b42318|dc2626|ef4444|red/i); expect(readDrawer().hidden).toBe(true); + expect(readDrawer().style.display).toBe("none"); expect(readDrawer().style.position).toBe("fixed"); expect(readDrawer().style.right).toBe("56px"); expect(readDrawer().style.width).toBe("380px"); @@ -151,6 +152,7 @@ describe("favorites-drawer", () => { readTab().click(); expect(readDrawer().hidden).toBe(false); + expect(readDrawer().style.display).toBe("flex"); expect(readTab().getAttribute("aria-expanded")).toBe("true"); expect(document.activeElement).toBe( document.querySelector('[data-sces-favorites-drawer="close"]') @@ -158,11 +160,14 @@ describe("favorites-drawer", () => { click('[data-sces-favorites-drawer="close"]'); expect(readDrawer().hidden).toBe(true); + expect(readDrawer().style.display).toBe("none"); expect(document.activeElement).toBe(readTab()); readTab().click(); + expect(readDrawer().style.display).toBe("flex"); document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })); expect(readDrawer().hidden).toBe(true); + expect(readDrawer().style.display).toBe("none"); expect(document.activeElement).toBe(readTab()); });