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.

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) => (
       <OnyxAvatar
         label="John Doe"
@@ -43,8 +41,6 @@ test.describe("Screenshot tests", () => {
     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) => (
       <OnyxAvatar label="Custom content" size={row}>
         {column === "truncation" ? "+999999" : "+42"}

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) => (
       <OnyxBadge density={column} color={row}>
         Badge

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<MatrixScreenshotTestOptions>;
 
   for (const mode of BUTTON_MODES) {

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) => <DefaultTestWrapper density={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) => <GroupedDataTestWrapper density={column} />,
     beforeScreenshot: async (component, page, column, row) => {
       if (row === "row-hover") {

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) => (
       <OnyxEmpty density={column} style={{ width: row === "multiline" ? "12rem" : undefined }}>
         {row === "multiline" ? "Very long text that will be wrapped" : "Example empty text"}

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: () => (
       <OnyxInput
         style="width: 12rem"
@@ -260,8 +250,6 @@ test.describe("Screenshot tests", () => {
     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 (
         <OnyxInput

packages/sit-onyx/src/components/OnyxLink/OnyxLink.ct.tsx

@@ -7,8 +7,6 @@ test.describe("Screenshot tests", () => {
     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) => (
       <OnyxLink
         href={column === "external" ? "https://onyx.schwarz" : "#"}

packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx

@@ -54,8 +54,6 @@ test.describe("Screenshot tests", () => {
       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) => (
         <OnyxNavBar

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.ct.tsx

@@ -8,8 +8,6 @@ test.describe("Screenshot tests", () => {
     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) => (
       <OnyxColorSchemeDialog modelValue={column === "active" ? "auto" : undefined} open />
     ),

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: () => (
       <ul style={{ listStyle: "none", padding: 0 }} role="menu">
         <OnyxColorSchemeMenuItem modelValue="auto" />

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([]);
 });
 

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", () => {

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) => (
       <ul style={{ listStyle: "none", padding: 0 }} role="menu">
         <OnyxNavItem

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.ct.tsx

@@ -20,8 +20,6 @@ test.describe("Screenshot tests", () => {
     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<typeof row, Date> = {
         seconds: getEndDate(30 * 1000),

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) => (
       <OnyxUserMenu
         username="Jane Doe"

packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.ct.tsx

@@ -11,8 +11,6 @@ test.describe("screenshot tests", () => {
     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: () => <OnyxPagination pages={42} modelValue={2} />,
     beforeScreenshot: async (component, page, column, row) => {
       let button = page.getByRole("button", {

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 =

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) => (
       <OnyxSelectInput
         style="width: 16rem"
@@ -48,8 +46,6 @@ test.describe("Screenshot tests", () => {
     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) => (
       <OnyxSelectInput
         style="width: 16rem"

packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.ct.tsx

@@ -7,8 +7,6 @@ const disabledRules = [
   // 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
   "aria-required-parent",
-  // TODO: color-contrast: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
-  "color-contrast",
   // TODO: as part of https://github.com/SchwarzIT/onyx/issues/1026,
   // the following disabled rule should be removed.
   "nested-interactive",
@@ -20,10 +18,9 @@ test.describe("Single select screenshot tests", () => {
       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) => (
         <OnyxSelectOption
           aria-selected={column === "selected"}

packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx

@@ -11,8 +11,6 @@ test.describe("Screenshot tests", () => {
       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 <OnyxStepper label="Test label" density={column} style="width: 12rem;" />;
       },
@@ -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) => (
       <OnyxStepper
         style="width: 12rem"
@@ -196,8 +184,6 @@ test.describe("Screenshot tests", () => {
     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: () => (
       <OnyxStepper
         style="width: 12rem"
@@ -225,8 +211,6 @@ test.describe("Screenshot tests", () => {
     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) => (
       <OnyxStepper
         style="width: 12rem"