p19-bug-fixes
This commit is contained in:
231
e2e/tests/capabilities/accessibility/contrast.spec.ts
Normal file
231
e2e/tests/capabilities/accessibility/contrast.spec.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import {
|
||||
assertContrast,
|
||||
checkContrast,
|
||||
getComputedColors,
|
||||
WCAG_CONTRAST,
|
||||
} from "../../fixtures/accessibility";
|
||||
import { SELECTORS } from "../../fixtures/selectors";
|
||||
import { expect, test } from "../../fixtures/test";
|
||||
import { THEMES, Theme } from "../../fixtures/themes";
|
||||
|
||||
test.describe("Color Contrast Across Themes", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
for (const theme of THEMES) {
|
||||
test(`hero text has sufficient contrast in ${theme} theme @smoke`, async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForHero,
|
||||
}) => {
|
||||
// Set theme
|
||||
await setTheme(theme);
|
||||
|
||||
const hero = await waitForHero();
|
||||
|
||||
// Check headline contrast
|
||||
const headline = hero.locator(SELECTORS.hero.headline);
|
||||
await assertContrast(page, headline, WCAG_CONTRAST.largeText);
|
||||
|
||||
// Check summary contrast
|
||||
const summary = hero.locator(SELECTORS.hero.summary);
|
||||
await assertContrast(page, summary, WCAG_CONTRAST.normalText);
|
||||
});
|
||||
|
||||
test(`feed card text has sufficient contrast in ${theme} theme`, async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForFeed,
|
||||
}) => {
|
||||
// Set theme
|
||||
await setTheme(theme);
|
||||
|
||||
const feed = await waitForFeed();
|
||||
const firstArticle = feed.locator(SELECTORS.feed.articles).first();
|
||||
|
||||
// Check headline contrast
|
||||
const headline = firstArticle.locator("h3");
|
||||
await assertContrast(page, headline, WCAG_CONTRAST.largeText);
|
||||
|
||||
// Check summary contrast
|
||||
const summary = firstArticle.locator(SELECTORS.feed.articleSummary);
|
||||
await assertContrast(page, summary, WCAG_CONTRAST.normalText);
|
||||
});
|
||||
|
||||
test(`modal text has sufficient contrast in ${theme} theme`, async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForHero,
|
||||
}) => {
|
||||
// Set theme
|
||||
await setTheme(theme);
|
||||
|
||||
// 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 headline contrast
|
||||
const headline = modal.locator(SELECTORS.summaryModal.headline);
|
||||
await assertContrast(page, headline, WCAG_CONTRAST.largeText);
|
||||
|
||||
// Check body text contrast
|
||||
const bodyText = modal.locator(SELECTORS.summaryModal.summaryBody);
|
||||
await assertContrast(page, bodyText, WCAG_CONTRAST.normalText);
|
||||
|
||||
// Check TL;DR list contrast
|
||||
const tldrList = modal.locator(SELECTORS.summaryModal.tldrList);
|
||||
await assertContrast(page, tldrList, WCAG_CONTRAST.normalText);
|
||||
});
|
||||
|
||||
test(`link colors have sufficient contrast in ${theme} theme`, async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForFeed,
|
||||
}) => {
|
||||
// Set theme
|
||||
await setTheme(theme);
|
||||
|
||||
const feed = await waitForFeed();
|
||||
const firstArticle = feed.locator(SELECTORS.feed.articles).first();
|
||||
|
||||
// Check source link contrast
|
||||
const sourceLink = firstArticle.locator(SELECTORS.feed.articleSource);
|
||||
const hasSourceLink = (await sourceLink.count()) > 0;
|
||||
|
||||
if (hasSourceLink) {
|
||||
await assertContrast(page, sourceLink, WCAG_CONTRAST.normalText);
|
||||
}
|
||||
});
|
||||
|
||||
test(`button text has sufficient contrast in ${theme} theme`, async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForHero,
|
||||
}) => {
|
||||
// Set theme
|
||||
await setTheme(theme);
|
||||
|
||||
const hero = await waitForHero();
|
||||
|
||||
// Check read button contrast
|
||||
const readButton = hero.locator(SELECTORS.hero.readButton);
|
||||
await assertContrast(page, readButton, WCAG_CONTRAST.normalText);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test.describe("Interactive State Contrast", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
test("hover state maintains sufficient contrast", async ({
|
||||
page,
|
||||
waitForFeed,
|
||||
}) => {
|
||||
const feed = await waitForFeed();
|
||||
const firstArticle = feed.locator(SELECTORS.feed.articles).first();
|
||||
const readButton = firstArticle.locator(SELECTORS.feed.articleReadButton);
|
||||
|
||||
// Get normal state colors
|
||||
const normalColors = await getComputedColors(page, readButton);
|
||||
|
||||
// Hover over button
|
||||
await readButton.hover();
|
||||
await page.waitForTimeout(300); // Wait for transition
|
||||
|
||||
// Get hover state colors
|
||||
const hoverColors = await getComputedColors(page, readButton);
|
||||
|
||||
// Both states should have sufficient contrast
|
||||
const normalRatio = checkContrast(
|
||||
normalColors.color,
|
||||
normalColors.backgroundColor,
|
||||
);
|
||||
const hoverRatio = checkContrast(
|
||||
hoverColors.color,
|
||||
hoverColors.backgroundColor,
|
||||
);
|
||||
|
||||
expect(normalRatio).toBeGreaterThanOrEqual(WCAG_CONTRAST.normalText);
|
||||
expect(hoverRatio).toBeGreaterThanOrEqual(WCAG_CONTRAST.normalText);
|
||||
});
|
||||
|
||||
test("focus state maintains sufficient contrast @smoke", async ({
|
||||
page,
|
||||
waitForFeed,
|
||||
}) => {
|
||||
const feed = await waitForFeed();
|
||||
const firstArticle = feed.locator(SELECTORS.feed.articles).first();
|
||||
const readButton = firstArticle.locator(SELECTORS.feed.articleReadButton);
|
||||
|
||||
// Get normal state colors
|
||||
const normalColors = await getComputedColors(page, readButton);
|
||||
|
||||
// Focus the button
|
||||
await readButton.focus();
|
||||
|
||||
// Get focus state colors
|
||||
const focusColors = await getComputedColors(page, readButton);
|
||||
|
||||
// Both states should have sufficient contrast
|
||||
const normalRatio = checkContrast(
|
||||
normalColors.color,
|
||||
normalColors.backgroundColor,
|
||||
);
|
||||
const focusRatio = checkContrast(
|
||||
focusColors.color,
|
||||
focusColors.backgroundColor,
|
||||
);
|
||||
|
||||
expect(normalRatio).toBeGreaterThanOrEqual(WCAG_CONTRAST.normalText);
|
||||
expect(focusRatio).toBeGreaterThanOrEqual(WCAG_CONTRAST.normalText);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("High Contrast Theme", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
test("contrast theme provides enhanced visibility @smoke", async ({
|
||||
page,
|
||||
setTheme,
|
||||
waitForHero,
|
||||
waitForFeed,
|
||||
}) => {
|
||||
// Set high contrast theme
|
||||
await setTheme("contrast");
|
||||
|
||||
// Check hero
|
||||
const hero = await waitForHero();
|
||||
const headline = hero.locator(SELECTORS.hero.headline);
|
||||
const headlineColors = await getComputedColors(page, headline);
|
||||
const headlineRatio = checkContrast(
|
||||
headlineColors.color,
|
||||
headlineColors.backgroundColor,
|
||||
);
|
||||
|
||||
// High contrast should provide very strong contrast (7:1 or better)
|
||||
expect(headlineRatio).toBeGreaterThanOrEqual(7);
|
||||
|
||||
// Check feed
|
||||
const feed = await waitForFeed();
|
||||
const firstArticle = feed.locator(SELECTORS.feed.articles).first();
|
||||
const articleHeadline = firstArticle.locator("h3");
|
||||
const articleColors = await getComputedColors(page, articleHeadline);
|
||||
const articleRatio = checkContrast(
|
||||
articleColors.color,
|
||||
articleColors.backgroundColor,
|
||||
);
|
||||
|
||||
expect(articleRatio).toBeGreaterThanOrEqual(7);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user