131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
import {
|
|
getAccessibleName,
|
|
hasAccessibleName,
|
|
} from "../../fixtures/accessibility";
|
|
import { SELECTORS } from "../../fixtures/selectors";
|
|
import { expect, test } from "../../fixtures/test";
|
|
|
|
test.describe("Icon-Only Control Accessible Names @smoke", () => {
|
|
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
|
await gotoApp();
|
|
await waitForAppReady();
|
|
});
|
|
|
|
test("share buttons have accessible names", async ({ page, waitForHero }) => {
|
|
// Open modal to access share buttons
|
|
const hero = await waitForHero();
|
|
await hero.locator(SELECTORS.hero.readButton).click();
|
|
|
|
const modal = page.locator(SELECTORS.summaryModal.root);
|
|
await expect(modal).toBeVisible();
|
|
|
|
// Check X share button
|
|
const shareX = modal.locator(SELECTORS.summaryModal.shareX);
|
|
await expect(shareX).toHaveAttribute("aria-label", "Share on X");
|
|
expect(await hasAccessibleName(shareX)).toBe(true);
|
|
|
|
// Check WhatsApp share button
|
|
const shareWhatsApp = modal.locator(SELECTORS.summaryModal.shareWhatsApp);
|
|
await expect(shareWhatsApp).toHaveAttribute(
|
|
"aria-label",
|
|
"Share on WhatsApp",
|
|
);
|
|
expect(await hasAccessibleName(shareWhatsApp)).toBe(true);
|
|
|
|
// Check LinkedIn share button
|
|
const shareLinkedIn = modal.locator(SELECTORS.summaryModal.shareLinkedIn);
|
|
await expect(shareLinkedIn).toHaveAttribute(
|
|
"aria-label",
|
|
"Share on LinkedIn",
|
|
);
|
|
expect(await hasAccessibleName(shareLinkedIn)).toBe(true);
|
|
|
|
// Check copy link button
|
|
const shareCopy = modal.locator(SELECTORS.summaryModal.shareCopy);
|
|
await expect(shareCopy).toHaveAttribute("aria-label", "Copy article link");
|
|
expect(await hasAccessibleName(shareCopy)).toBe(true);
|
|
});
|
|
|
|
test("theme menu button has accessible name", async ({ page }) => {
|
|
const themeButton = page.locator(SELECTORS.header.themeMenuButton);
|
|
|
|
await expect(themeButton).toHaveAttribute("aria-label", "Open theme menu");
|
|
expect(await hasAccessibleName(themeButton)).toBe(true);
|
|
});
|
|
|
|
test("back to top button has accessible name", async ({ page }) => {
|
|
// Scroll down to make back-to-top visible
|
|
await page.evaluate(() => window.scrollTo(0, 500));
|
|
await page.waitForTimeout(500);
|
|
|
|
const backToTop = page.locator(SELECTORS.backToTop.root);
|
|
|
|
// Button may not be visible yet, but should have accessible name
|
|
const hasName = await hasAccessibleName(backToTop);
|
|
expect(hasName).toBe(true);
|
|
|
|
const name = await getAccessibleName(page, backToTop);
|
|
expect(name).toContain("top");
|
|
});
|
|
|
|
test("modal close button has accessible name", async ({
|
|
page,
|
|
waitForHero,
|
|
}) => {
|
|
// Open modal
|
|
const hero = await waitForHero();
|
|
await hero.locator(SELECTORS.hero.readButton).click();
|
|
|
|
const modal = page.locator(SELECTORS.summaryModal.root);
|
|
await expect(modal).toBeVisible();
|
|
|
|
// Check close button
|
|
const closeButton = modal.locator(SELECTORS.summaryModal.closeButton);
|
|
expect(await hasAccessibleName(closeButton)).toBe(true);
|
|
|
|
const name = await getAccessibleName(page, closeButton);
|
|
expect(name?.toLowerCase()).toContain("close");
|
|
});
|
|
|
|
test("policy modal close button has accessible name", async ({
|
|
page,
|
|
gotoApp,
|
|
}) => {
|
|
// Open policy modal
|
|
await gotoApp({ policy: "terms" });
|
|
await page.waitForTimeout(1000);
|
|
|
|
const modal = page.locator(SELECTORS.policyModal.root);
|
|
await expect(modal).toBeVisible();
|
|
|
|
// Check close button
|
|
const closeButton = modal.locator(SELECTORS.policyModal.closeButton);
|
|
expect(await hasAccessibleName(closeButton)).toBe(true);
|
|
|
|
const name = await getAccessibleName(page, closeButton);
|
|
expect(name?.toLowerCase()).toContain("close");
|
|
});
|
|
|
|
test("all interactive icons have aria-hidden on SVG", async ({
|
|
page,
|
|
waitForHero,
|
|
}) => {
|
|
// Open modal to access share buttons
|
|
const hero = await waitForHero();
|
|
await hero.locator(SELECTORS.hero.readButton).click();
|
|
|
|
const modal = page.locator(SELECTORS.summaryModal.root);
|
|
await expect(modal).toBeVisible();
|
|
|
|
// Check all SVGs in share buttons are aria-hidden
|
|
const svgs = modal.locator(".share-icon-btn svg");
|
|
const count = await svgs.count();
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const svg = svgs.nth(i);
|
|
const ariaHidden = await svg.getAttribute("aria-hidden");
|
|
expect(ariaHidden).toBe("true");
|
|
}
|
|
});
|
|
});
|