@stackoverflow/stacks 1.10.4 → 1.10.6

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

@@ -0,0 +1,22 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-pagination",
+        children: {
+            default: `
+                <a class="s-pagination--item" href="#">Prev</a>
+                <a class="s-pagination--item" href="#">1</a>
+                <span class="s-pagination--item is-selected" aria-current="page">2</span>
+                <a class="s-pagination--item" href="#">3</a>
+                <span class="s-pagination--item s-pagination--item__clear">…</span>
+                <a class="s-pagination--item" href="#">100</a>
+                <a class="s-pagination--item" href="#">Next</a>
+            `,
+        },
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: ["s-pagination-dark", "s-pagination-light"],
+    });
+});

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

@@ -0,0 +1,26 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-pagination",
+        children: {
+            default: `
+                <a class="s-pagination--item" href="#">Prev</a>
+                <a class="s-pagination--item" href="#">1</a>
+                <span class="s-pagination--item is-selected" aria-current="page">2</span>
+                <a class="s-pagination--item" href="#">3</a>
+                <span class="s-pagination--item s-pagination--item__clear">…</span>
+                <a class="s-pagination--item" href="#">100</a>
+                <a class="s-pagination--item" href="#">Next</a>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-inline-block p8" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -0,0 +1,15 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("spinner", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-spinner",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+    });
+});

package/lib/components/spinner/spinner.visual.test.ts

@@ -0,0 +1,43 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-inline-block p8" data-testid="${testid}">${component}</div>
+`;
+describe("spinner", () => {
+    // default, sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // applied font color
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            global: ["fc-theme-primary"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // .is-loading
+    runComponentTests({
+        type: "visual",
+        baseClass: "is-loading",
+        children: {
+            default: `Loading…`,
+        },
+        template,
+    });
+});

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

@@ -0,0 +1,23 @@
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+describe("tag", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [/s-tag/],
+    });
+});

package/lib/components/tag/tag.visual.test.ts

@@ -0,0 +1,46 @@
+import { html } from "@open-wc/testing";
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
+`;
+
+describe("tag", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        template,
+    });
+
+    // Size modifiers
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+            global: ["is-selected"],
+        },
+        children: {
+            default: `default`,
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+    });
+});

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

@@ -0,0 +1,35 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("toast > notice", () => {
+    // This is a test of notice component wrapped in a toast component
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            toast: `<span id="message">Test toast</span>`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div
+                class="s-toast ps-static t0 l0"
+                role="alertdialog"
+                aria-hidden="false"
+                aria-labelledby="message"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+        skippedTestids: [
+            /s-notice-dark.*-toast/,
+            "s-notice-light-success-important-toast",
+            "s-notice-light-warning-important-toast",
+        ],
+    });
+});

package/lib/components/toast/toast.visual.test.ts

@@ -11,16 +11,20 @@ describe("toast > notice", () => {
         modifiers: {
             primary: ["important"],
         },
-        attributes: {
-            ariaHidden: "false",
-        },
         children: {
-            toast: "Test toast",
+            toast: `<span id="message">Test toast</span>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
-                ${component}
+            <div class="d-inline-block p8" data-testid="${testid}">
+                <div
+                    class="s-toast ps-static t0 l0"
+                    role="alertdialog"
+                    aria-hidden="false"
+                    aria-labelledby="message"
+                >
+                    ${component}
+                </div>
             </div>
         `,
     });

package/lib/components/user-card/user-card.less

@@ -106,8 +106,8 @@
     }
 
     & &--type {
-        a {
-            color: inherit;
+        a:not(.s-link) {
+            color: inherit !important;
         }
 
         color: var(--_uc-type-fc);

package/lib/test/axe-apca/README.md

@@ -32,3 +32,22 @@ axe.configure({
     console.log(results);
 });
 ```
+
+### Using custom APCA thresholds
+
+To set custom thresholds for APCA checks, follow these steps:
+
+1. Use `custom` as the first argument when calling `registerAxeAPCA`.
+1. Provide a function as the second argument, optionally accepting `fontSize` and `fontWeight` arguments.
+
+
+```js
+const customConformanceThresholdFn = (fontSize, fontWeight) => {
+    const size = parseFloat(fontSize);
+    const weight = parseFloat(fontWeight);
+
+    return size >= 32 || weight > 700 ? 45 : 60;
+};
+
+registerAxeAPCA('custom', customConformanceThresholdFn);
+```

package/lib/test/axe-apca/src/axe-apca.test.ts

@@ -13,6 +13,82 @@ const runAxe = async (el: HTMLElement): Promise<AxeResults> => {
 };
 
 describe("axe-apca", () => {
+    describe("custom conformance level", () => {
+        beforeEach(() => {
+            const customConformanceThresholdFn = (
+                fontSize: string
+            ): number | null => {
+                return parseFloat(fontSize) >= 32 ? 45 : 60;
+            };
+
+            registerAxeAPCA("custom", customConformanceThresholdFn);
+        });
+
+        it("should check for APCA accessibility contrast violations", async () => {
+            const el: HTMLElement = await fixture(
+                html`<p
+                    style="background: white; color: black; font-size: 12px; font-weight: 400;"
+                >
+                    Some copy
+                </p>`
+            );
+
+            const results = await runAxe(el);
+
+            const apcaPasses = results.passes.filter((violation) =>
+                violation.id.includes("color-contrast-apca-custom")
+            );
+
+            await expect(apcaPasses.length).to.equal(1);
+
+            const passNode = apcaPasses[0].nodes[0];
+            expect(passNode.all[0].message).to.include(
+                "Element has sufficient APCA custom level lightness contrast"
+            );
+        });
+
+        it("should detect APCA accessibility contrast violations", async () => {
+            const el: HTMLElement = await fixture(
+                html`<p
+                    style="background: white; color: lightgray; font-size: 12px; font-weight: 400;"
+                >
+                    Some copy
+                </p>`
+            );
+
+            const results = await runAxe(el);
+
+            const apcaViolations = results.violations.filter((violation) =>
+                violation.id.includes("color-contrast-apca-custom")
+            );
+
+            await expect(apcaViolations.length).to.equal(1);
+
+            const violationNode = apcaViolations[0].nodes[0];
+            expect(violationNode.failureSummary).to.include(
+                "Element has insufficient APCA custom level contrast"
+            );
+        });
+
+        it("should check nested nodes", async () => {
+            const el: HTMLElement = await fixture(
+                html`<div style="background: black;">
+                    <h2>Some title</h2>
+                    <p>Some copy</p>
+                    <button style="background: black;">Some button</button>
+                </div>`
+            );
+
+            const results = await runAxe(el);
+
+            const apcaViolations = results.violations.filter((violation) =>
+                violation.id.includes("color-contrast-apca-custom")
+            );
+
+            await expect(apcaViolations[0].nodes.length).to.equal(3);
+        });
+    });
+
     describe("bronze conformance level", () => {
         beforeEach(() => {
             registerAxeAPCA("bronze");
@@ -44,7 +120,7 @@ describe("axe-apca", () => {
         it("should detect APCA accessibility contrast violations", async () => {
             const el: HTMLElement = await fixture(
                 html`<p
-                    style="background: white; color: lightgray; font-size: 12px; font-weight: 400;"
+                    style="background: white; color: gray; font-size: 12px; font-weight: 400;"
                 >
                     Some copy
                 </p>`

package/lib/test/axe-apca/src/axe-apca.ts

@@ -12,6 +12,13 @@ type Color = {
     toHexString: () => string;
 };
 
+type ConformanceLevel = "bronze" | "silver" | "custom";
+
+type ConformanceThresholdFn = (
+    fontSize: string,
+    fontWeight: string
+) => number | null;
+
 declare module "axe-core" {
     const commons: {
         color: {
@@ -89,10 +96,7 @@ const getAPCABronzeThreshold = (fontSize: string): number | null => {
 
 const generateColorContrastAPCAConformanceCheck = (
     conformanceLevel: string,
-    conformanceThresholdFn: (
-        fontSize: string,
-        fontWeight: string
-    ) => number | null
+    conformanceThresholdFn: ConformanceThresholdFn
 ): Check => ({
     id: `color-contrast-apca-${conformanceLevel}-conformance`,
     metadata: {
@@ -188,15 +192,19 @@ const colorContrastAPCABronzeConformanceCheck =
 const colorContrastAPCASilverRule = generateColorContrastAPCARule("silver");
 const colorContrastAPCABronzeRule = generateColorContrastAPCARule("bronze");
 
-const registerAxeAPCA = (conformanceLevel: "bronze" | "silver") => {
+const registerAxeAPCA = (
+    conformanceLevel: ConformanceLevel,
+    customConformanceThresholdFn?: ConformanceThresholdFn
+) => {
     axe.configure({
         rules: [generateColorContrastAPCARule(conformanceLevel)],
         checks: [
             generateColorContrastAPCAConformanceCheck(
                 conformanceLevel,
-                conformanceLevel === "bronze"
-                    ? getAPCABronzeThreshold
-                    : getAPCASilverPlusThreshold
+                customConformanceThresholdFn ||
+                    (conformanceLevel === "silver"
+                        ? getAPCASilverPlusThreshold
+                        : getAPCABronzeThreshold)
             ),
         ],
     });

package/lib/test/test-utils.ts

@@ -5,7 +5,11 @@ import type { TemplateResult } from "lit-html";
 import axe from "axe-core";
 import registerAxeAPCA from "./axe-apca";
 
-registerAxeAPCA("bronze");
+const customConformanceThresholdFn = (fontSize: string): number | null => {
+    return parseFloat(fontSize) >= 32 ? 45 : 60;
+};
+
+registerAxeAPCA("custom", customConformanceThresholdFn);
 
 const colorThemes = ["dark", "light"];
 const baseThemes = ["", "highcontrast"];
@@ -201,9 +205,7 @@ const buildTestElement = ({
         <${unsafe.tag}
             ${unsafe.attributes}
             data-testid="${testid}"
-        >
-            ${unsafe.children}
-        </${unsafe.tag}>
+        >${unsafe.children}</${unsafe.tag}>
     `;
 };
 
@@ -325,10 +327,10 @@ const runComponentTest = ({
             axe.configure({
                 rules: [
                     // for non-high contrast, we disable WCAG 2.1 AA (4.5:1)
-                    // and use APCA bronze level instead
+                    // and use a Stacks-specific APCA custom level instead
                     { id: "color-contrast", enabled: false },
                     {
-                        id: "color-contrast-apca-bronze",
+                        id: "color-contrast-apca-custom",
                         enabled: !highcontrast,
                     },
                     // for high contrast, we check against WCAG 2.1 AAA (7:1)

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "1.10.4",
+    "version": "1.10.6",
     "files": [
         "dist",
         "lib"
@@ -46,15 +46,15 @@
         "@open-wc/testing": "^3.2.0",
         "@rollup/plugin-commonjs": "^25.0.4",
         "@rollup/plugin-replace": "^5.0.2",
-        "@stackoverflow/stacks-editor": "^0.8.8",
+        "@stackoverflow/stacks-editor": "^0.8.9",
         "@stackoverflow/stacks-icons": "^5.5.0",
-        "@testing-library/dom": "^9.3.1",
-        "@testing-library/user-event": "^14.4.3",
-        "@typescript-eslint/eslint-plugin": "^6.4.1",
-        "@typescript-eslint/parser": "^6.4.1",
+        "@testing-library/dom": "^9.3.3",
+        "@testing-library/user-event": "^14.5.1",
+        "@typescript-eslint/eslint-plugin": "^6.7.3",
+        "@typescript-eslint/parser": "^6.7.2",
         "@web/dev-server-esbuild": "^0.4.1",
         "@web/dev-server-rollup": "^0.5.2",
-        "@web/test-runner": "^0.17.0",
+        "@web/test-runner": "^0.17.1",
         "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.2",
         "apca-w3": "^0.1.9",
@@ -64,17 +64,17 @@
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.48.0",
+        "eslint": "^8.50.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
-        "jquery": "^3.7.0",
+        "jquery": "^3.7.1",
         "less-loader": "^11.1.3",
         "list.js": "^2.3.1",
         "markdown-it": "^13.0.1",
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.3",
-        "prettier": "^3.0.2",
+        "prettier": "^3.0.3",
         "rollup-plugin-postcss": "^4.0.2",
         "stylelint": "^15.10.3",
         "stylelint-config-recommended": "^13.0.0",