@stackoverflow/stacks 2.0.4 → 2.0.6

package/lib/components/anchor/anchor.less

@@ -26,9 +26,9 @@
     }
 
     &&__grayscale {
-        --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-500);
-        --_an-a-fc-visited: var(--black-600);
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-600);
+        --_an-a-fc-visited: var(--black-400);
     }
 
     &&__inherit {

package/lib/components/link/link.less

@@ -67,8 +67,8 @@ a,
 
         &__grayscale {
             --_li-fc: var(--black-500);
-            --_li-fc-hover: var(--black-400);
-            --_li-fc-visited: var(--black-600);
+            --_li-fc-hover: var(--black-600);
+            --_li-fc-visited: var(--black-400);
         }
 
         &__inherit {

package/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>
+        `,
+    });
+});

package/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();

package/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>
+        `,
+    });
+});

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/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.4",
+    "version": "2.0.6",
     "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": "^3.2.2",
         "@rollup/plugin-commonjs": "^25.0.7",
-        "@rollup/plugin-replace": "^5.0.4",
-        "@stackoverflow/stacks-editor": "^0.9.0",
+        "@rollup/plugin-replace": "^5.0.5",
+        "@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/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.3",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
+        "@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",