From 3bb4f1e24e099b9c431f95dc1283d8620c3ccffb Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Fri, 6 Dec 2024 09:24:54 +0100 Subject: [PATCH] refactor(a11y): globally disable color-contrast tests (#2251) Currently we are disabling color-contrast Playwright rules redundantely in multiple places. I changed it to just disable it in one single global config and also refined a follow up ticket #2250 to address the contrast issues. --- .../src/components/OnyxAvatar/OnyxAvatar.ct.tsx | 4 ---- .../src/components/OnyxBadge/OnyxBadge.ct.tsx | 2 -- .../src/components/OnyxButton/OnyxButton.ct.tsx | 2 -- .../OnyxDataGridRenderer.ct.tsx | 6 +----- .../src/components/OnyxEmpty/OnyxEmpty.ct.tsx | 2 -- .../src/components/OnyxInput/OnyxInput.ct.tsx | 12 ------------ .../src/components/OnyxLink/OnyxLink.ct.tsx | 2 -- .../src/components/OnyxNavBar/OnyxNavBar.ct.tsx | 2 -- .../OnyxColorSchemeDialog.ct.tsx | 2 -- .../OnyxColorSchemeMenuItem.ct.tsx | 2 -- .../modules/OnyxFlyoutMenu/OnyxFlyoutMenu.ct.tsx | 10 +--------- .../modules/OnyxNavButton/OnyxNavButton.ct.tsx | 3 --- .../modules/OnyxNavItem/OnyxNavItem.ct.tsx | 4 +--- .../modules/OnyxTimer/OnyxTimer.ct.tsx | 2 -- .../modules/OnyxUserMenu/OnyxUserMenu.ct.tsx | 2 -- .../OnyxPagination/OnyxPagination.ct.tsx | 4 ---- .../src/components/OnyxSelect/OnyxSelect.ct.tsx | 4 ---- .../OnyxSelectInput/OnyxSelectInput.ct.tsx | 4 ---- .../OnyxSelectOption/OnyxSelectOption.ct.tsx | 5 +---- .../components/OnyxStepper/OnyxStepper.ct.tsx | 16 ---------------- .../src/components/OnyxTable/OnyxTable.ct.tsx | 12 ------------ .../src/components/OnyxTabs/OnyxTabs.ct.tsx | 11 +---------- .../src/components/OnyxTag/OnyxTag.ct.tsx | 5 ----- .../components/OnyxTextarea/OnyxTextarea.ct.tsx | 6 ------ .../src/components/OnyxToast/OnyxToast.ct.tsx | 5 +---- .../OnyxToastMessage/OnyxToastMessage.ct.tsx | 4 ---- .../ComponentShowcase/ComponentShowcase.ct.tsx | 5 +---- .../EditGridElementDialog.ct.tsx | 7 +------ .../GridPlayground/GridBadge/GridBadge.ct.tsx | 2 -- .../GridPlayground/GridPlayground.ct.tsx | 5 +---- packages/sit-onyx/src/playwright/a11y.ts | 13 +++++++++---- packages/sit-onyx/src/playwright/screenshots.tsx | 15 ++++++++++----- 32 files changed, 28 insertions(+), 152 deletions(-) diff --git a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx index 5a44e196a3..4c626e15b3 100644 --- a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx @@ -25,8 +25,6 @@ test.describe("Screenshot tests", () => { name: "Avatar", columns: ["default", "custom"], rows: AVATAR_SIZES, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Avatar (custom content)", columns: ["default", "truncation"], rows: AVATAR_SIZES, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( {column === "truncation" ? "+999999" : "+42"} diff --git a/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.ct.tsx b/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.ct.tsx index 07b7a843b3..2cad980060 100644 --- a/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.ct.tsx @@ -9,8 +9,6 @@ test.describe("Screenshot tests", () => { name: `Badge`, columns: DENSITIES, rows: ONYX_COLORS, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( Badge diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.ct.tsx b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.ct.tsx index b43286c870..752cc61294 100644 --- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.ct.tsx @@ -16,8 +16,6 @@ test.describe("Screenshot tests", () => { if (row === "focus-visible") await page.keyboard.press("Tab"); if (row === "active") await page.mouse.down(); }, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], } satisfies Partial; for (const mode of BUTTON_MODES) { diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.ct.tsx b/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.ct.tsx index 3e64f06229..f11808c702 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.ct.tsx @@ -4,15 +4,12 @@ import { executeMatrixScreenshotTest } from "../../../playwright/screenshots"; import DefaultTestWrapper from "./playwright/DefaultTestWrapper.ct.vue"; import GroupedDataTestWrapper from "./playwright/GroupedDataTestWrapper.ct.vue"; -// TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 -const disabledAccessibilityRules = ["color-contrast"]; - test.describe("Screenshot tests", () => { executeMatrixScreenshotTest({ name: "Data grid renderer", columns: DENSITIES, rows: ["default"], - disabledAccessibilityRules, + component: (column) => , }); }); @@ -22,7 +19,6 @@ test.describe("Screenshot tests (grouped data)", () => { name: "Data grid renderer (grouped data)", columns: ["default"], rows: ["default", "row-hover", "column-hover"], - disabledAccessibilityRules, component: (column) => , beforeScreenshot: async (component, page, column, row) => { if (row === "row-hover") { diff --git a/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.ct.tsx b/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.ct.tsx index b77d12622c..9338e4eb76 100644 --- a/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.ct.tsx @@ -9,8 +9,6 @@ test.describe("Screenshot tests", () => { name: "Empty", columns: DENSITIES, rows: ["default", "custom-icon", "multiline"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( {row === "multiline" ? "Very long text that will be wrapped" : "Example empty text"} diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx index c20183a539..9e53945da8 100644 --- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx @@ -37,8 +37,6 @@ test.describe("Screenshot tests", () => { name: "Input (required/optional, message/counter)", columns: ["default", "long-text", "hideLabel"], rows: ["required", "optional", "message", "counter"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -67,8 +65,6 @@ test.describe("Screenshot tests", () => { name: "Input (labelTooltip/messageTooltip)", columns: ["default", "long-text"], rows: ["labelTooltip", "messageTooltip"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very very long label that should be truncated" : "Test label"; @@ -105,8 +101,6 @@ test.describe("Screenshot tests", () => { name: "Input (message replacement on invalid)", columns: ["default", "long-text", "with-counter"], rows: ["messageTooltip", "error", "errorTooltip"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const showLongMessage = column !== "default"; const label = column === "long-text" ? "Test label that should be truncated" : "Test label"; @@ -156,8 +150,6 @@ test.describe("Screenshot tests", () => { name: "Input (required/optional) with label tooltip", columns: ["default", "long-text"], rows: ["required", "optional"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -227,8 +219,6 @@ test.describe("Screenshot tests", () => { name: "Input (success)", columns: ["default", "autofill"], rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => ( { name: "Input readonly/default with highlighted text", columns: ["default", "readonly"], rows: ["default"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, _row) => { return ( { name: "Link", columns: ["default", "external"], rows: ["default", "hover", "focus-visible"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( { name: `Navigation bar (${breakpoint})`, columns: ["default"], rows: ["default", "back", "context", "context-back"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], disablePadding: true, component: (column, row) => ( { name: "Color scheme dialog", columns: ["default", "active"], rows: ["default", "hover", "mobile"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( ), diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx index daa46a4d66..77362528e4 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx @@ -8,8 +8,6 @@ test.describe("Screenshot tests", () => { name: "Color scheme menu item", columns: ["default"], rows: ["default", "hover"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => (
    diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.ct.tsx index e8cdd513fb..7ef289b247 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.ct.tsx @@ -1,15 +1,7 @@ import { menuButtonTesting } from "@sit-onyx/headless/playwright"; import { expect, test } from "../../../../playwright/a11y"; -import { type MatrixScreenshotTestOptions } from "../../../../playwright/screenshots"; import TestWrapperCt from "./TestWrapper.ct.vue"; -/** - * TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - */ -const disabledAccessibilityRules: MatrixScreenshotTestOptions["disabledAccessibilityRules"] = [ - "color-contrast", -]; - test("check accessibility", async ({ page, mount, makeAxeBuilder }) => { await mount(TestWrapperCt, { props: { label: "Choose application language" }, @@ -22,7 +14,7 @@ test("check accessibility", async ({ page, mount, makeAxeBuilder }) => { menuItems: page.getByRole("menuitem"), }); - const results = await makeAxeBuilder().disableRules(disabledAccessibilityRules).analyze(); + const results = await makeAxeBuilder().analyze(); expect(results.violations).toEqual([]); }); diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.ct.tsx index 39882bae39..0282e83c82 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.ct.tsx @@ -14,12 +14,9 @@ import OnyxNavButton from "./OnyxNavButton.vue"; * This component represents only the child (menuitem) of the overall menu. * "aria-required-parent" test is disabled because it requires a child with role="menuitem" * to have a parent with role="menu". - * - * TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 */ const disabledAccessibilityRules: MatrixScreenshotTestOptions["disabledAccessibilityRules"] = [ "aria-required-parent", - "color-contrast", ]; test.describe("Screenshot tests", () => { diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.ct.tsx index 6b1902eeaa..30b3199412 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.ct.tsx @@ -11,10 +11,8 @@ test.describe("Screenshot tests", () => { * This component represents only the child (menuitem) of the overall menu. * "aria-required-parent" test is disabled because it requires a child with role="menuitem" * to have a parent with role="menu". - * - * TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 */ - disabledAccessibilityRules: ["aria-required-parent", "color-contrast"], + disabledAccessibilityRules: ["aria-required-parent"], component: (column, row) => (
      { name: "Timer", columns: ["default", "with-label"], rows: ["seconds", "minutes", "hours"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const endTimes: Record = { seconds: getEndDate(30 * 1000), diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.ct.tsx index ba15603eb1..56cf4edd49 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.ct.tsx @@ -24,8 +24,6 @@ test.describe("Screenshot tests", () => { name: "User menu", columns: ["default", "description", "footer"], rows: ["default", "hover", "focus-visible"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( { name: "Pagination", columns: DENSITIES, rows: ["default", "min", "max", "large", "disabled", "open"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { let currentPage = 2; let pages = 6; @@ -47,8 +45,6 @@ test.describe("screenshot tests (buttons)", () => { name: "Pagination (buttons)", columns: ["select", "previous", "next"], rows: ["default", "hover", "active", "focus-visible"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => , beforeScreenshot: async (component, page, column, row) => { let button = page.getByRole("button", { diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx index 2438744154..159e5d5275 100644 --- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx @@ -14,8 +14,6 @@ import OnyxSelect from "./OnyxSelect.vue"; import { type OnyxSelectProps, type SelectOption, SELECT_ALIGNMENTS } from "./types"; const DISABLED_ACCESSIBILITY_RULES = [ - // TODO: color-contrast: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - "color-contrast", // the scrollable region are the options but they should not be focusable because // the focus should remain on the parent element "scrollable-region-focusable", @@ -304,8 +302,6 @@ test.describe("Invalidity handling screenshots", () => { name: "Select (message replacement on invalid)", columns: ["default", "long-text"], rows: ["messageTooltip", "error", "errorTooltip"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const showLongMessage = column !== "default"; const label = diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx index d012bc39e4..5d7b9afaf7 100644 --- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx @@ -30,8 +30,6 @@ test.describe("Screenshot tests", () => { name: "SelectInput (other)", columns: ["default", "hideLabel"], rows: ["required", "optional", "message"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "SelectInput (readonly, disabled, loading)", columns: ["readonly", "disabled", "loading"], rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( { name: `Select option (${state})`, columns: ["default", "selected"], rows: ["default", "hover", "focus-visible"], - // TODO: color-contrast: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 // aria-required-parent is ignored here because this component is only a single option which is internally always // used together with a parent so we disable the failing rule here - disabledAccessibilityRules: ["aria-required-parent", "color-contrast"], + disabledAccessibilityRules: ["aria-required-parent"], component: (column, row) => ( { name: `Stepper (${state})`, columns: DENSITIES, rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => { return ; }, @@ -32,8 +30,6 @@ test.describe("Screenshot tests", () => { name: "Stepper (required/optional)", columns: ["default", "long-text", "hideLabel"], rows: ["required", "optional", "message"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -59,8 +55,6 @@ test.describe("Screenshot tests", () => { name: "Stepper (labelTooltip/messageTooltip)", columns: ["default", "long-text"], rows: ["labelTooltip", "messageTooltip"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very very long label that should be truncated" : "Test label"; @@ -95,8 +89,6 @@ test.describe("Screenshot tests", () => { name: "Stepper (message replacement on invalid)", columns: ["default", "long-text"], rows: ["messageTooltip", "error", "errorTooltip"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const showLongMessage = column !== "default"; const label = column === "long-text" ? "Test label that should be truncated" : "Test label"; @@ -144,8 +136,6 @@ test.describe("Screenshot tests", () => { name: "Stepper (required/optional) with label tooltip", columns: ["default", "long-text"], rows: ["required", "optional"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -174,8 +164,6 @@ test.describe("Screenshot tests", () => { name: "Stepper (readonly, disabled, loading)", columns: ["readonly", "disabled", "loading"], rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( { name: "Stepper (invalid)", columns: ["default", "autofill"], rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => ( { name: "Stepper (skeleton)", columns: DENSITIES, rows: ["default", "hideLabel"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Table", columns: ["with-header", "without-header"], rows: ["default", "striped", "vertical-borders", "striped-vertical-borders"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Table (densities)", columns: DENSITIES, rows: ["default", "focus-visible", "columnGroups"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Table (hover styles)", columns: ["default", "striped"], rows: ["row-hover", "column-hover"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column) => ( {tableHead} @@ -101,8 +95,6 @@ test.describe("Screenshot tests (scrolling)", () => { name: "Table (scrolling)", columns: ["default", "horizontal-scroll"], rows: ["default", "vertical-scroll"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Table (empty variations)", columns: ["default", "no-header"], rows: ["default", "custom-empty"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( {column === "default" ? tableHead : undefined} @@ -167,8 +157,6 @@ test.describe("Screenshot tests (hover)", () => { name: "Table (empty blocks hover)", columns: ["row-hover", "column-hover"], rows: ["default", "empty-body"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (_column, row) => ( {tableHead} diff --git a/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx b/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx index d7048400d5..aaa943e0c1 100644 --- a/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.ct.tsx @@ -14,8 +14,6 @@ for (const type of ["default", "stretched"] as const) { name: `Tabs (${type})`, columns: DENSITIES, rows: ["default", "hover", "active", "focus-visible", "skeleton"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { return ( { return ( { name: "Tabs (overflow)", columns: ["default"], rows: ["default", "focus-first", "focus-in-between", "focus-last"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => { return ( @@ -155,10 +149,7 @@ test("should pass accessibility tests", async ({ mount, makeAxeBuilder, page }) const component = await mount(); // ACT - const accessibilityScanResults = await makeAxeBuilder() - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - .disableRules(["color-contrast"]) - .analyze(); + const accessibilityScanResults = await makeAxeBuilder().analyze(); // ASSERT expect(accessibilityScanResults.violations).toEqual([]); diff --git a/packages/sit-onyx/src/components/OnyxTag/OnyxTag.ct.tsx b/packages/sit-onyx/src/components/OnyxTag/OnyxTag.ct.tsx index 2ed4bc3516..9ef1d0b016 100644 --- a/packages/sit-onyx/src/components/OnyxTag/OnyxTag.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxTag/OnyxTag.ct.tsx @@ -5,14 +5,10 @@ import { ONYX_COLORS } from "../../types/colors"; import OnyxTag from "./OnyxTag.vue"; test.describe("Screenshot tests", () => { - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - const disabledAccessibilityRules = ["color-contrast"]; - executeMatrixScreenshotTest({ name: "Tag", columns: DENSITIES, rows: ONYX_COLORS, - disabledAccessibilityRules, component: (column, row) => , }); @@ -20,7 +16,6 @@ test.describe("Screenshot tests", () => { name: "Tag (with icon)", columns: DENSITIES, rows: ONYX_COLORS, - disabledAccessibilityRules, component: (column, row) => ( ), diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx index d9c4aca5c0..a9633b6a85 100644 --- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx @@ -33,8 +33,6 @@ test.describe("Screenshot tests", () => { name: "Textarea (required/optional, message/counter)", columns: ["default", "long-text", "hideLabel"], rows: ["required", "optional", "message", "counter"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -102,8 +100,6 @@ test.describe("Screenshot tests", () => { name: "Textarea (success)", columns: ["default"], rows: ["default", "hover", "focus"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: () => ( { name: "Textarea (labelTooltip/messageTooltip)", columns: ["default", "long-text"], rows: ["labelTooltip", "messageTooltip"], - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; @@ -278,7 +273,6 @@ test.describe("Screenshot tests", () => { name: "Textarea (required/optional) with label tooltip", columns: ["default", "long-text"], rows: ["required", "optional"], - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => { const label = column === "long-text" ? "Very long label that should be truncated" : "Test label"; diff --git a/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx b/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx index 8423026c57..19266d4b16 100644 --- a/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx @@ -13,10 +13,7 @@ Object.entries(ONYX_BREAKPOINTS).forEach(([breakpoint, width]) => { await expect(page).toHaveScreenshot(`breakpoint-${breakpoint}.png`); // ACT - const accessibilityScanResults = await makeAxeBuilder() - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - .disableRules(["color-contrast"]) - .analyze(); + const accessibilityScanResults = await makeAxeBuilder().analyze(); // ASSERT expect(accessibilityScanResults.violations).toEqual([]); diff --git a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.ct.tsx b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.ct.tsx index fab956b062..e8851c294b 100644 --- a/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.ct.tsx @@ -20,8 +20,6 @@ test.describe("Screenshot tests", () => { name: `Toast message (${mode})`, columns: DENSITIES, rows: TOAST_COLORS, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { name: "Toast message (description)", columns: DENSITIES, rows: TOAST_COLORS, - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => ( { const dialog = page.getByRole("dialog", { name: "Column configuration" }); // ACT - const accessibilityScanResults = await makeAxeBuilder() - .disableRules( - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - ["color-contrast"], - ) - .analyze(); + const accessibilityScanResults = await makeAxeBuilder().analyze(); // ASSERT expect(accessibilityScanResults.violations).toEqual([]); diff --git a/packages/sit-onyx/src/components/examples/GridPlayground/GridBadge/GridBadge.ct.tsx b/packages/sit-onyx/src/components/examples/GridPlayground/GridBadge/GridBadge.ct.tsx index e5a19f94fd..1f9e6dfcde 100644 --- a/packages/sit-onyx/src/components/examples/GridPlayground/GridBadge/GridBadge.ct.tsx +++ b/packages/sit-onyx/src/components/examples/GridPlayground/GridBadge/GridBadge.ct.tsx @@ -7,8 +7,6 @@ test.describe("screenshot tests", () => { name: "Grid badge", columns: ["default"], rows: ["info", "warning", "danger"], - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - disabledAccessibilityRules: ["color-contrast"], component: (column, row) => , beforeScreenshot: async (component) => { await expect(component.getByLabel("Label")).toBeAttached(); diff --git a/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx b/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx index 1b70963151..7bc480b7a7 100644 --- a/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx +++ b/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx @@ -18,10 +18,7 @@ test("screenshot and accessibility test", async ({ mount, makeAxeBuilder, page } await expect(page).toHaveScreenshot("default.png"); // ACT - const accessibilityScanResults = await makeAxeBuilder() - // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - .disableRules(["color-contrast"]) - .analyze(); + const accessibilityScanResults = await makeAxeBuilder().analyze(); // ASSERT expect(accessibilityScanResults.violations).toEqual([]); diff --git a/packages/sit-onyx/src/playwright/a11y.ts b/packages/sit-onyx/src/playwright/a11y.ts index 6ef189d705..ca1a745dd7 100644 --- a/packages/sit-onyx/src/playwright/a11y.ts +++ b/packages/sit-onyx/src/playwright/a11y.ts @@ -8,6 +8,14 @@ type AxeFixture = { makeAxeBuilder: () => AxeBuilder; }; +/** + * Playwright axe accessibility rules that should be disabled by default. + * + * TODO: re-enable color-contrast rule when color contrasts issues are fixed in: + * https://github.com/SchwarzIT/onyx/issues/2250 + */ +export const DEFAULT_DISABLED_AXE_RULES = ["color-contrast"]; + /** * Extends Playwright's base test by providing `makeAxeBuilder` * This new `test` can be used in multiple test files, and each of them will get @@ -15,13 +23,10 @@ type AxeFixture = { * * @see https://playwright.dev/docs/accessibility-testing#using-a-test-fixture-for-common-axe-configuration */ - -// TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410 - export const test: ReturnType> = base.extend({ makeAxeBuilder: async ({ page }, use) => { const makeAxeBuilder = () => { - return new AxeBuilder({ page }).withTags(a11yTags).disableRules("color-contrast"); + return new AxeBuilder({ page }).withTags(a11yTags).disableRules(DEFAULT_DISABLED_AXE_RULES); }; await use(makeAxeBuilder); diff --git a/packages/sit-onyx/src/playwright/screenshots.tsx b/packages/sit-onyx/src/playwright/screenshots.tsx index 1f99adeb81..39fdeed42e 100644 --- a/packages/sit-onyx/src/playwright/screenshots.tsx +++ b/packages/sit-onyx/src/playwright/screenshots.tsx @@ -1,7 +1,7 @@ import type { MountResultJsx } from "@playwright/experimental-ct-vue"; import type { Locator, Page } from "@playwright/test"; import type { JSX } from "vue/jsx-runtime"; -import { expect, test } from "../playwright/a11y"; +import { DEFAULT_DISABLED_AXE_RULES, expect, test } from "../playwright/a11y"; import ScreenshotMatrix from "./ScreenshotMatrix.vue"; export type MatrixScreenshotTestOptions< @@ -82,10 +82,15 @@ export const executeMatrixScreenshotTest = async