diff --git a/src/components/Nav/MobileMenu/MobileMenuClient.tsx b/src/components/Nav/MobileMenu/MobileMenuClient.tsx index 33d9b9b0d4d..44db390bb4b 100644 --- a/src/components/Nav/MobileMenu/MobileMenuClient.tsx +++ b/src/components/Nav/MobileMenu/MobileMenuClient.tsx @@ -10,6 +10,7 @@ import { cn } from "@/lib/utils/cn" import HamburgerButton from "./HamburgerButton" import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate" +import { useTranslation } from "@/hooks/useTranslation" type MobileMenuClientProps = { className?: string @@ -22,6 +23,7 @@ const MobileMenuClient = ({ side, children, }: MobileMenuClientProps) => { + const { t } = useTranslation("common") const [open, setOpen] = useCloseOnNavigate() const triggerRef = React.useRef(null) @@ -41,6 +43,8 @@ const MobileMenuClient = ({ className="flex flex-col" onOpenChange={setOpen} triggerRef={triggerRef} + aria-label={t("site-title")} + data-testid="mobile-menu-dialog" > {children} diff --git a/src/components/ui/persistent-panel.tsx b/src/components/ui/persistent-panel.tsx index dffdd8c8796..59b48611a4e 100644 --- a/src/components/ui/persistent-panel.tsx +++ b/src/components/ui/persistent-panel.tsx @@ -12,6 +12,10 @@ interface PersistentPanelProps { onOpenChange?: (open: boolean) => void /** Ref to the trigger element - focus returns here on close */ triggerRef?: React.RefObject + /** Accessible label for the dialog */ + "aria-label"?: string + /** Test ID for the dialog */ + "data-testid"?: string } /** @@ -34,6 +38,8 @@ const PersistentPanel = ({ children, onOpenChange, triggerRef, + "aria-label": ariaLabel, + "data-testid": dataTestId, }: PersistentPanelProps) => { // Track if component should be in DOM (lazy mount, stays mounted after first open) const [isMounted, setIsMounted] = React.useState(false) @@ -161,6 +167,8 @@ const PersistentPanel = ({ className={contentClasses} role="dialog" aria-modal="true" + aria-label={ariaLabel} + data-testid={dataTestId} > {children} diff --git a/tests/e2e/pages/BasePage.ts b/tests/e2e/pages/BasePage.ts index 41b5f392a80..b0fb8e87da2 100644 --- a/tests/e2e/pages/BasePage.ts +++ b/tests/e2e/pages/BasePage.ts @@ -26,7 +26,7 @@ export class BasePage { this.mobileMenuButton = this.primaryNav.getByRole("button", { name: /toggle menu button/i, }) - this.mobileSidebar = page.getByRole("dialog", { name: /ethereum.org/i }) + this.mobileSidebar = page.getByRole("dialog") } /** @@ -118,6 +118,8 @@ export class BasePage { */ async openLanguagePickerMobile(): Promise { await this.mobileMenuButton.click() + // Wait for the dialog to be visible before trying to find elements inside it + await expect(this.mobileSidebar).toBeVisible() await this.mobileSidebar.getByTestId("mobile-menu-language-picker").click() } diff --git a/tests/e2e/pages/FindWalletPage.ts b/tests/e2e/pages/FindWalletPage.ts index cc4ce5da183..b17a2a5b1db 100644 --- a/tests/e2e/pages/FindWalletPage.ts +++ b/tests/e2e/pages/FindWalletPage.ts @@ -134,11 +134,12 @@ export class FindWalletPage extends BasePage { const desktopCheckbox = desktopLabelParent.locator("button") await desktopCheckbox.click() + const itemContainer = desktopLabelParent.locator("..") + const osOptionLabels = itemContainer.locator("label span.select-none") + await expect(osOptionLabels.first()).toBeVisible() + // Get OS options - const osOptions = await desktopLabelParent - .locator("..") - .locator("label span.select-none") - .allTextContents() + const osOptions = await osOptionLabels.allTextContents() return { initialCount, osOptions } } @@ -168,11 +169,12 @@ export class FindWalletPage extends BasePage { const mobileCheckbox = mobileLabelParent.locator("button") await mobileCheckbox.click() + const itemContainer = mobileLabelParent.locator("..") + const osOptionLabels = itemContainer.locator("label span.select-none") + await expect(osOptionLabels.first()).toBeVisible() + // Get OS options - const osOptions = await mobileLabelParent - .locator("..") - .locator("label span.select-none") - .allTextContents() + const osOptions = await osOptionLabels.allTextContents() // Close filters await this.mobileFiltersSubmitButton.click() @@ -219,9 +221,9 @@ export class FindWalletPage extends BasePage { * Verify the row counter displays the provided expected count */ async verifyRowCounterEquals(expectedCount: number) { - const counterText = await this.rowCounter.textContent() - - expect(counterText).toBe(`Showing all wallets (${expectedCount})`) + await expect(this.rowCounter).toHaveText( + `Showing all wallets (${expectedCount})` + ) } /** diff --git a/tests/e2e/start.spec.ts b/tests/e2e/start.spec.ts index 1753ae3b450..77287a60831 100644 --- a/tests/e2e/start.spec.ts +++ b/tests/e2e/start.spec.ts @@ -19,7 +19,7 @@ test.describe("Start Page", () => { const walletModal = page.getByRole("dialog") await expect(walletModal.getByText("Connect a Wallet")).toBeVisible() await expect(walletModal.getByText("MetaMask")).toBeVisible() - await expect(walletModal.getByText("Coinbase Wallet")).toBeVisible() + await expect(walletModal.getByText("Coinbase")).toBeVisible() await expect(walletModal.getByText("Rainbow")).toBeVisible() }) })