test(modal): add a11y; visual tests (#1531)

* test(modal): add a11y; visual tests

* Set reduceMotion on playwrightLaunchers

* Update modal baseline images

* Update non-modal baseline images 🤷‍♂️

* Revert "Update non-modal baseline images 🤷‍♂️"

This reverts commit cad9ff2.

* Update baseline modal images

lib/components/modal/modal.a11y.test.ts

@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+describe("modal", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: `s-modal`,
+        variants: ["danger"],
+        modifiers: {
+            primary: ["celebration"],
+            secondary: ["full"],
+        },
+        children: {
+            default: `
+                <div class="s-modal--dialog" role="document">
+                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
+                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+                    <div class="d-flex gx8 s-modal--footer">
+                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
+                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
+                    </div>
+                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
+                        ${IconClearSm}
+                    </button>
+                </div>
+            `,
+        },
+        tag: "aside",
+        attributes: {
+            "id": "example-modal",
+            "tabindex": "-1",
+            "aria-hidden": "false",
+            "aria-labelledby": "modal-title",
+            "class": "ps-relative p32",
+        },
+        template: ({ component, testid }) => html`
+            <div class="m8 ws6" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

lib/components/modal/modal.less

@@ -9,6 +9,14 @@
     --_mo-header-fc: var(--fc-dark);
 
     // CONTEXTUAL STYLES
+    .dark-mode({
+        --_mo-dialog-bg: var(--black-225);
+    });
+
+    .highcontrast-dark-mode({
+        --_mo-dialog-bg: var(--black-200);
+    });
+
     &[aria-hidden="false"] {
         &,
         .s-modal--dialog {
@@ -60,10 +68,6 @@
     }
 
     & &--dialog {
-        .dark-mode({
-            --_mo-dialog-bg: var(--black-225);
-        });
-
         padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
 
         @scrollbar-styles();

lib/components/modal/modal.visual.test.ts

@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+describe("modal", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: `s-modal`,
+        variants: ["danger"],
+        modifiers: {
+            primary: ["celebration"],
+            secondary: ["full"],
+        },
+        children: {
+            default: `
+                <div class="s-modal--dialog" role="document">
+                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
+                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+                    <div class="d-flex gx8 s-modal--footer">
+                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
+                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
+                    </div>
+                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
+                        ${IconClearSm}
+                    </button>
+                </div>
+            `,
+        },
+        tag: "aside",
+        attributes: {
+            "id": "example-modal",
+            "tabindex": "-1",
+            "aria-hidden": "false",
+            "aria-labelledby": "modal-title",
+            "class": "ps-relative p32",
+        },
+        template: ({ component, testid }) => html`
+            <div class="m8 ws6" data-testid="${testid}">${component}</div>
+        `,
+    });
+});