@stackoverflow/stacks 2.0.5 → 2.0.7

package/lib/components/modal/modal.test.ts

@@ -0,0 +1,155 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen, waitFor } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../../index";
+
+const user = userEvent.setup();
+
+const createModal = ({
+    hidden = true,
+    initialFocusEl,
+}: { hidden?: boolean; initialFocusEl?: ReturnType<typeof html> } = {}) => html`
+    <div data-controller="s-modal">
+        <button
+            class="s-btn"
+            data-action="s-modal#show"
+            data-testid="trigger">
+            Show Modal
+        </button>
+
+        <aside
+            class="s-modal"
+            id="modal-base"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="modal-base-title"
+            aria-describedby="modal-base-description"
+            aria-hidden="${hidden}"
+            data-s-modal-target="modal"
+            data-testid="modal">
+            <div class="s-modal--dialog" role="document">
+                <h1 class="s-modal--header" id="modal-base-title">Title</h1>
+
+                <p class="s-modal--body">
+                    <span id="modal-base-description">Description</span>
+                    <form>
+                        <input type="text" data-testid="first-focusable-element" />
+                        ${initialFocusEl}
+                    </form>
+                </p>
+
+                <div class="d-flex gx8 s-modal--footer">
+                    <button class="flex--item s-btn s-btn__primary" type="button">Save changes</button>
+                    <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
+                </div>
+
+                <button
+                    class="s-btn s-btn__muted s-modal--close"
+                    type="button"
+                    aria-label="Close"
+                    data-action="s-modal#hide"
+                    data-testid="close-btn">
+                    Close
+                </button>
+            </div>
+        </aside>
+    </div>
+`;
+
+describe("modal", () => {
+    it("should make the modal visible when toggle button is clicked", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+
+        expect(modal).not.to.be.visible;
+
+        await user.click(trigger);
+
+        expect(modal).to.be.visible;
+    });
+
+    it("should hide the modal when the close button is clicked", async () => {
+        await fixture(createModal({ hidden: false }));
+
+        const modal = await screen.findByTestId("modal");
+        const closeBtn = await screen.findByTestId("close-btn");
+
+        expect(modal).to.be.visible;
+
+        await user.click(closeBtn);
+
+        await waitFor(() => expect(modal).not.to.be.visible);
+    });
+
+    it('should focus on the first element with `data-s-modal-target"initialFocus"` when modal is shown', async () => {
+        await fixture(
+            createModal({
+                initialFocusEl: html`<input
+                    type="text"
+                    data-testid="initialFocus"
+                    data-s-modal-target="initialFocus"
+                />`,
+            })
+        );
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const initialFocusEl = await screen.findByTestId("initialFocus");
+
+        expect(modal).not.to.be.visible;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        await waitFor(() => expect(initialFocusEl).to.have.focus);
+    });
+
+    it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const focusableEl = await screen.findByTestId(
+            "first-focusable-element"
+        );
+
+        expect(modal).not.to.be.visible;
+        expect(focusableEl).not.to.have.focus;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        await waitFor(() => expect(focusableEl).to.have.focus);
+    });
+
+    it("should not change set focus when an element within the modal is already focused", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const firstFocusableEl = await screen.findByTestId(
+            "first-focusable-element"
+        );
+        const closeButton = await screen.findByTestId("close-btn");
+
+        expect(modal).not.to.be.visible;
+        expect(firstFocusableEl).not.to.have.focus;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        // manually focus on an element within the modal
+        closeButton.focus();
+
+        // wait for s-modal:shown css transition to complete
+        await new Promise((resolve) =>
+            modal.addEventListener("s-modal:shown", resolve)
+        );
+
+        // check that focus stayed on the manually focused element and
+        // has not changed to the first focusable element
+        expect(closeButton).to.have.focus;
+    });
+});

package/lib/components/modal/modal.ts

@@ -3,8 +3,8 @@ import * as Stacks from "../../stacks";
 export class ModalController extends Stacks.StacksController {
     static targets = ["modal", "initialFocus"];
 
-    private modalTarget!: HTMLElement;
-    private initialFocusTargets!: HTMLElement[];
+    declare readonly modalTarget: HTMLElement;
+    declare readonly initialFocusTargets: HTMLElement[];
 
     private _boundClickFn!: (event: MouseEvent) => void;
     private _boundKeypressFn!: (event: KeyboardEvent) => void;
@@ -228,7 +228,11 @@ export class ModalController extends Stacks.StacksController {
                 const initialFocus =
                     this.firstVisible(this.initialFocusTargets) ??
                     this.firstVisible(this.getAllTabbables());
-                initialFocus?.focus();
+
+                // Only set focus if focus is not already set on an element within the modal
+                if (!this.modalTarget.contains(document.activeElement)) {
+                    initialFocus?.focus();
+                }
             },
             { once: true }
         );

package/lib/components/navigation/navigation.a11y.test.ts

@@ -1,5 +1,6 @@
 import { html } from "@open-wc/testing";
 import { runComponentTests } from "../../test/test-utils";
+import { WCAGNonTextContrast } from "../../test/assertions";
 import "../../index";
 
 const items = [
@@ -74,5 +75,8 @@ describe("navigation", () => {
                 ${component}
             </nav>
         `,
+        additionalAssertions: [WCAGNonTextContrast],
+        // TODO: fix non-text-contrast SC for s-navigation__muted
+        skippedTestids: [/s-navigation-(light|dark)-muted/],
     });
 });

package/lib/components/pagination/pagination.a11y.test.ts

@@ -1,4 +1,5 @@
 import { runComponentTests } from "../../test/test-utils";
+import { WCAGNonTextContrast } from "../../test/assertions";
 import "../../index";
 
 describe("pagination", () => {
@@ -16,5 +17,6 @@ describe("pagination", () => {
                 <a class="s-pagination--item" href="#">Next</a>
             `,
         },
+        additionalAssertions: [WCAGNonTextContrast],
     });
 });

package/lib/components/table/table.ts

@@ -12,8 +12,8 @@ export enum SortOrder {
 }
 
 export class TableController extends Stacks.StacksController {
-    declare columnTarget: HTMLTableCellElement;
-    declare columnTargets: HTMLTableCellElement[];
+    declare readonly columnTarget: HTMLTableCellElement;
+    declare readonly columnTargets: HTMLTableCellElement[];
 
     static targets = ["column"];
 

package/lib/components/uploader/uploader.ts

@@ -8,9 +8,10 @@ interface FilePreview {
 
 export class UploaderController extends Stacks.StacksController {
     static targets = ["input", "previews", "uploader"];
-    private inputTarget!: HTMLInputElement;
-    private previewsTarget!: HTMLElement;
-    private uploaderTarget!: HTMLElement;
+
+    declare readonly inputTarget: HTMLInputElement;
+    declare readonly previewsTarget: HTMLElement;
+    declare readonly uploaderTarget: HTMLElement;
 
     private boundDragEnter!: () => void;
     private boundDragLeave!: () => void;

package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -296,12 +296,12 @@ body .themed {
     --black-500: hsl(210, 8%, 25%);
     --black-600: hsl(210, 8%, 5%);
     --black: hsl(0, 0%, 0%);
-    --orange-100: hsl(23, 85%, 97%);
-    --orange-200: hsl(27, 85%, 87%);
-    --orange-300: hsl(27, 85%, 72%);
-    --orange-400: hsl(27, 80%, 52%);
-    --orange-500: hsl(27, 80%, 43%);
-    --orange-600: hsl(27, 80%, 29%);
+    --orange-100: hsl(23, 87%, 97%);
+    --orange-200: hsl(27, 87%, 87%);
+    --orange-300: hsl(27, 87%, 72%);
+    --orange-400: hsl(27, 89%, 48%);
+    --orange-500: hsl(27, 87%, 41%);
+    --orange-600: hsl(27, 87%, 27%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 91%);
     --blue-300: hsl(210, 78%, 76%);

package/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -84,12 +84,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --black-500: hsl(210, 8%, 25%);
     --black-600: hsl(210, 8%, 5%);
     --black: hsl(0, 0%, 0%);
-    --orange-100: hsl(23, 85%, 97%);
-    --orange-200: hsl(27, 85%, 87%);
-    --orange-300: hsl(27, 85%, 72%);
-    --orange-400: hsl(27, 80%, 52%);
-    --orange-500: hsl(27, 80%, 43%);
-    --orange-600: hsl(27, 80%, 29%);
+    --orange-100: hsl(23, 87%, 97%);
+    --orange-200: hsl(27, 87%, 87%);
+    --orange-300: hsl(27, 87%, 72%);
+    --orange-400: hsl(27, 89%, 48%);
+    --orange-500: hsl(27, 87%, 41%);
+    --orange-600: hsl(27, 87%, 27%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 91%);
     --blue-300: hsl(210, 78%, 76%);
@@ -463,10 +463,10 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --black: hsl(0, 0%, 0%);
     --orange-100: hsl(23, 87%, 97%);
     --orange-200: hsl(23, 87%, 97%);
-    --orange-300: hsl(27, 90%, 55%);
-    --orange-400: hsl(27, 90%, 55%);
-    --orange-500: hsl(27, 80%, 28%);
-    --orange-600: hsl(27, 80%, 28%);
+    --orange-300: hsl(27, 89%, 48%);
+    --orange-400: hsl(27, 87%, 29%);
+    --orange-500: hsl(27, 87%, 21%);
+    --orange-600: hsl(27, 87%, 21%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 96%);
     --blue-300: hsl(210, 70%, 48%);

package/lib/exports/color-sets.less

@@ -86,12 +86,12 @@
 
 // Orange
 .set-orange() {
-    100: hsl(23, 85%, 97%);
-    200: hsl(27, 85%, 87%);
-    300: hsl(27, 85%, 72%);
-    400: hsl(27, 80%, 52%);
-    500: hsl(27, 80%, 43%);
-    600: hsl(27, 80%, 29%);
+    100: hsl(23, 87%, 97%);
+    200: hsl(27, 87%, 87%);
+    300: hsl(27, 87%, 72%);
+    400: hsl(27, 89%, 48%);
+    500: hsl(27, 87%, 41%);
+    600: hsl(27, 87%, 27%);
 }
 .set-orange-dark() {
     100: hsl(27, 55%, 20%);
@@ -104,10 +104,10 @@
 .set-orange-hc() {
     100: hsl(23, 87%, 97%);
     200: hsl(23, 87%, 97%);
-    300: hsl(27, 90%, 55%);
-    400: hsl(27, 90%, 55%);
-    500: hsl(27, 80%, 28%);
-    600: hsl(27, 80%, 28%);
+    300: hsl(27, 89%, 48%);
+    400: hsl(27, 87%, 29%);
+    500: hsl(27, 87%, 21%);
+    600: hsl(27, 87%, 21%);
 }
 .set-orange-hc-dark() {
     100: hsl(27, 30%, 19%);

package/lib/test/assertions.ts

@@ -0,0 +1,29 @@
+import { expect } from "@open-wc/testing";
+import Color from "colorjs.io";
+import type { AdditionalAssertion } from "./test-utils";
+
+// TODO: evaluate if we can do this check against all the components
+// automatically instead of having to add the assertion manually
+export const WCAGNonTextContrast: AdditionalAssertion = {
+    description:
+        "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
+    assertion: (node) => {
+        const selectedNode = node.querySelector(".is-selected") as HTMLElement;
+        const selectedNodeStyles = window.getComputedStyle(selectedNode);
+        const bodyStyles = window.getComputedStyle(document.body);
+        const bgBodyColor = new Color(
+            bodyStyles.getPropertyValue("background-color")
+        );
+        const bgSelectedNodeColor = new Color(
+            selectedNodeStyles.getPropertyValue("background-color")
+        );
+
+        // we are specificng WCAG21 because of colorjs.io API
+        // WCAG21 and WCAG22 algoirthms are the same
+        const WCAGcontrast = bgSelectedNodeColor.contrast(
+            bgBodyColor,
+            "WCAG21"
+        );
+        expect(WCAGcontrast).to.be.at.least(3);
+    },
+};

package/lib/test/test-utils.ts

@@ -22,6 +22,10 @@ export const defaultOptions = {
 
 type Themes = ["light" | "dark" | "highcontrast" | ""];
 type TestTypes = "visual" | "a11y";
+export type AdditionalAssertion = {
+    description: string;
+    assertion: (node: HTMLElement) => Promise<void> | void;
+};
 
 type TestOptions = {
     /**
@@ -92,6 +96,10 @@ type ComponentTestArgs = {
      * Type of test to run
      */
     type: TestTypes;
+    /**
+     * Additional assertions to run against the test element
+     */
+    additionalAssertions: AdditionalAssertion[];
 };
 
 interface ComponentTestsArgs extends ComponentTestVariationArgs {
@@ -132,6 +140,10 @@ interface ComponentTestsArgs extends ComponentTestVariationArgs {
      * Type of test to run
      */
     type: TestTypes;
+    /**
+     * Additional assertions to run against the test element
+     */
+    additionalAssertions?: AdditionalAssertion[];
 }
 
 type ComponentTestModifiers = {
@@ -299,6 +311,7 @@ const runComponentTest = ({
     testid,
     theme,
     type,
+    additionalAssertions,
 }: ComponentTestArgs) => {
     const getDescription = (type: TestTypes) => {
         switch (type) {
@@ -344,6 +357,14 @@ const runComponentTest = ({
             await visualDiff(el, testid);
         }
     });
+
+    additionalAssertions.forEach((assertion) => {
+        it(`${type}: ${testid} ${assertion.description}`, async () => {
+            await fixture(element);
+            const el = screen.getByTestId(testid);
+            await assertion.assertion(el);
+        });
+    });
 };
 
 /**
@@ -361,6 +382,7 @@ const runComponentTests = ({
     tag,
     template,
     type,
+    additionalAssertions = [],
 }: ComponentTestsArgs) => {
     getComponentTestVariations({
         baseClass,
@@ -428,6 +450,7 @@ const runComponentTests = ({
                 testid: testidModified,
                 theme,
                 type,
+                additionalAssertions,
             });
         });
     });

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.5",
+    "version": "2.0.7",
     "files": [
         "dist",
         "lib"
@@ -45,23 +45,25 @@
     "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
         "@highlightjs/cdn-assets": "^11.9.0",
-        "@open-wc/testing": "^3.2.0",
+        "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.9.0",
+        "@stackoverflow/stacks-editor": "^0.9.1",
         "@stackoverflow/stacks-icons": "^6.0.0",
         "@testing-library/dom": "^9.3.3",
         "@testing-library/user-event": "^14.5.1",
-        "@types/cssbeautify": "^0.3.4",
+        "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.5",
-        "@typescript-eslint/eslint-plugin": "^6.9.0",
-        "@typescript-eslint/parser": "^6.9.0",
-        "@web/dev-server-esbuild": "^0.4.3",
-        "@web/dev-server-rollup": "^0.5.4",
-        "@web/test-runner": "^0.17.2",
-        "@web/test-runner-playwright": "^0.10.2",
-        "@web/test-runner-visual-regression": "^0.8.2",
+        "@types/mocha": "^10.0.4",
+        "@typescript-eslint/eslint-plugin": "^6.10.0",
+        "@typescript-eslint/parser": "^6.9.1",
+        "@web/dev-server-esbuild": "^1.0.0",
+        "@web/dev-server-rollup": "^0.6.0",
+        "@web/test-runner": "^0.18.0",
+        "@web/test-runner-playwright": "^0.11.0",
+        "@web/test-runner-visual-regression": "^0.9.0",
         "apca-check": "^0.1.0",
+        "colorjs.io": "^0.4.5",
         "concurrently": "^8.2.2",
         "css-loader": "^6.8.1",
         "cssbeautify": "^0.3.1",
@@ -69,7 +71,7 @@
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.52.0",
+        "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.1",
@@ -79,7 +81,7 @@
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.3",
-        "prettier": "^3.0.3",
+        "prettier": "^3.1.0",
         "rollup-plugin-postcss": "^4.0.2",
         "stylelint": "^15.11.0",
         "stylelint-config-recommended": "^13.0.0",