Skip to content

Commit

Permalink
fix: make a11y test work under firefox
Browse files Browse the repository at this point in the history 
Signed-off-by: Raphael Arce <[email protected]>
  • Loading branch information
@raphael-arce
raphael-arce committed Mar 1, 2024
1 parent 297cb42 commit 9533eb7
Showing 1 changed file with 71 additions and 59 deletions.
130 changes: 71 additions & 59 deletions tests/a11y.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { expect, test } from "@playwright/test";
import { expect, firefox, Page, test } from "@playwright/test";

function getTab(browserName: string) {
if (browserName === "webkit") {
Expand All @@ -8,108 +8,120 @@ function getTab(browserName: string) {
return "Tab";
}

test.describe("Chromium and Webkit only", () => {
test.skip(
({ browserName }) => browserName === "firefox",
"This test is only for Chromium and Webkit browsers, as using the tab key to change focus does not work in Firefox.",
);
async function getPageWithUserPrefs(page: Page, browserName: string) {
if (browserName === "firefox") {
const browser = await firefox.launch({
// this is necessary to make so firefox allows to navigate between focusable elements with the tab key
firefoxUserPrefs: { "accessibility.tabfocus": 7 },
});

return browser.newPage();
}

return page;
}

test.describe("Chromium and Webkit only", () => {
test("App should be usable with keyboard", async ({ page, browserName }) => {
await page.goto("http://localhost:5173/");
const customPage = await getPageWithUserPrefs(page, browserName);

await customPage.goto("http://localhost:5173/");

const tab = getTab(browserName);

await page.keyboard.press(tab); // move focus to language select
await page.keyboard.press(tab); // move focus to book appointment
await page.keyboard.press(tab); // move focus to next button
await customPage.keyboard.press(tab); // move focus to language select
await customPage.keyboard.press(tab); // move focus to book appointment
await customPage.keyboard.press(tab); // move focus to next button

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q1 = page.getByText("Meldest Du Dich zum ersten");
const q1 = customPage.getByText("Meldest Du Dich zum ersten");

await expect(q1).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q2 = page.getByText("Bist Du verheiratet?");
const q2 = customPage.getByText("Bist Du verheiratet?");
await expect(q2).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q3 = page.getByText("Hast Du Kinder unter 18 Jahren?");
const q3 = customPage.getByText("Hast Du Kinder unter 18 Jahren?");
await expect(q3).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q4 = page.getByText("Hast Du die deutsche Staatsangehörigkeit?");
const q4 = customPage.getByText(
"Hast Du die deutsche Staatsangehörigkeit?",
);
await expect(q4).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q5 = page.getByText("Kommst Du aus einem EU-Land?");
const q5 = customPage.getByText("Kommst Du aus einem EU-Land?");
await expect(q5).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q6 = page.getByText("Bist Du unter 16 Jahre alt?");
const q6 = customPage.getByText("Bist Du unter 16 Jahre alt?");
await expect(q6).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q7 = page.getByText("Bist Du Geflüchtete:r?");
const q7 = customPage.getByText("Bist Du Geflüchtete:r?");
await expect(q7).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const q8 = page.getByText("Bleibst Du in einer anderen Wohnung gemeldet?");
const q8 = customPage.getByText(
"Bleibst Du in einer anderen Wohnung gemeldet?",
);
await expect(q8).toBeVisible();

await page.keyboard.press(tab); // move focus to info button
await page.keyboard.press(tab); // move focus to radio buttons
await page.keyboard.press("ArrowDown"); // chose no
await customPage.keyboard.press(tab); // move focus to info button
await customPage.keyboard.press(tab); // move focus to radio buttons
await customPage.keyboard.press("ArrowDown"); // chose no

await page.keyboard.press("Enter"); // click next button
await customPage.keyboard.press("Enter"); // click next button

const overview = page.getByRole("heading", {
const overview = customPage.getByRole("heading", {
name: "Deine Dokumenten-Checkliste",
});
const registrationForm = page
const registrationForm = customPage
.locator("div")
.filter({ hasText: /^Anmeldeformular$/ });
const movingInConfirmation = page
.locator("div")
.filter({
hasText: /^Einzugsbestätigung des Wohnungsgebers\/Vermieters$/,
});
const germanIdOrPassport = page
const movingInConfirmation = customPage.locator("div").filter({
hasText: /^Einzugsbestätigung des Wohnungsgebers\/Vermieters$/,
});
const germanIdOrPassport = customPage
.locator("div")
.filter({ hasText: /^Reisepass oder Passersatzpapiere$/ });

Expand Down

0 comments on commit 9533eb7

Please sign in to comment.