@stackoverflow/stacks 1.10.1 → 1.10.3

package/lib/components/check-group/check-group.visual.test.ts

@@ -0,0 +1,58 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+type CheckGroup = "checkbox" | "radio";
+const checkTypes: CheckGroup[] = ["checkbox", "radio"];
+
+// Account for horizontal variant
+[true, false].forEach((isHorizontal) => {
+    checkTypes.forEach((type) => {
+        describe("s-check-group", () => {
+            const checkEls: {
+                type: CheckGroup;
+                id: string;
+                state?: "checked" | "unchecked" | "indeterminate";
+            }[] = [
+                { type, id: `test-${type}1`, state: "checked" },
+                { type, id: `test-${type}2` },
+            ];
+            runComponentTests({
+                type: "visual",
+                tag: "fieldset",
+                baseClass: "s-check-group",
+                attributes: {
+                    class: isHorizontal ? "hs1 ws3 p8" : "hs2 ws2 p8",
+                },
+                variants: isHorizontal ? ["horizontal"] : [],
+                children: {
+                    default: `
+                        <legend class="s-label">${type} group</legend>
+                        ${checkEls
+                            .map(
+                                ({ type, state, id }, index) => `
+                            <div class="s-check-control">
+                                <input
+                                    class="s-${type}"
+                                    type="${type}"
+                                    id="${id}-${index}"
+                                    name=""
+                                    ${state === "checked" ? "checked" : ""}/>
+                                <label class="s-label" for="${id}-${index}">
+                                    ${type} label ${index}
+                                    <p class="s-input-message">Description</p>
+                                </label>
+                            </div>
+                        `
+                            )
+                            .join("")}
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    includeNullVariant: !isHorizontal,
+                    testidSuffix: type,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,39 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid, id }: any) =>
+    html` <div class="s-check-control" data-testid="${testid}">
+        ${component}
+        <label class="s-label" for="${id}">Label</label>
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    name: "test-name",
+                    id: "test-id",
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({
+                        component,
+                        testid,
+                        id: "test-id",
+                    }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,35 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center bg-black-100 hs1 ws1 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({ component, testid }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,34 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// account for parent with `.is-disabled` class
+[true, false].forEach((isDisabled) => {
+    describe("description", () => {
+        runComponentTests({
+            type: "a11y",
+            tag: "p",
+            baseClass: "s-description",
+            children: {
+                default: `Describes the site in the product, emails, integrations, and logs.`,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: isDisabled ? "is-disabled" : "",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    class="${isDisabled ? "is-disabled" : ""}"
+                    data-testid="${testid}"
+                >
+                    ${component}
+                </div>
+            `,
+            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+            skippedTestids: [
+                /^.*-is-disabled$/, // TODO: should these the disabled tests be excluded all together instead of skipped?
+                "s-description-dark",
+            ],
+        });
+    });
+});

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

@@ -0,0 +1,30 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// account for parent with `.is-disabled` class
+[true, false].forEach((isDisabled) => {
+    describe("description", () => {
+        runComponentTests({
+            type: "visual",
+            tag: "p",
+            baseClass: "s-description",
+            children: {
+                default: `Describes the site in the product, emails, integrations, and logs.`,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: isDisabled ? "is-disabled" : "",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8
+                    ${isDisabled ? "is-disabled" : ""}"
+                    data-testid="${testid}"
+                >
+                    ${component}
+                </div>
+            `,
+        });
+    });
+});

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

@@ -24,13 +24,26 @@ describe("link", () => {
         attributes: {
             href: "#",
         },
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
         skippedTestids: [
-            "s-link-dark", // TODO fix contrast issue
-            "s-link-dark-dropdown", // TODO fix contrast issue
-            "s-link-dark-danger", // TODO fix contrast issue
-            "s-link-dark-danger-dropdown", // TODO fix contrast issue
-            "s-link-dark-underlined", // TODO fix contrast issue
-            "s-link-dark-underlined-dropdown", // TODO fix contrast issue
+            "s-link-dark",
+            "s-link-dark-dropdown",
+            "s-link-dark-danger",
+            "s-link-dark-danger-dropdown",
+            "s-link-dark-underlined",
+            "s-link-dark-underlined-dropdown",
+            "s-link-dark-muted",
+            "s-link-dark-muted-dropdown",
+            "s-link-dark-visited",
+            "s-link-dark-visited-dropdown",
+            "s-link-light",
+            "s-link-light-danger",
+            "s-link-light-danger-dropdown",
+            "s-link-light-dropdown",
+            "s-link-light-muted",
+            "s-link-light-muted-dropdown",
+            "s-link-light-underlined",
+            "s-link-light-underlined-dropdown",
         ],
     });
 });

package/lib/components/toggle-switch/toggle-switch.a11y.test.ts

@@ -0,0 +1,76 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("toggle-switch", () => {
+    // Single toggle switch
+    [true, false].forEach((checked) => {
+        [true, false].forEach((disabled) => {
+            const idSuffix = `${checked ? "-checked" : ""}${
+                disabled ? "-disabled" : ""
+            }`;
+            const id = `toggle-switch${idSuffix}`;
+
+            runComponentTests({
+                type: "a11y",
+                baseClass: "s-toggle-switch",
+                modifiers: {
+                    global: idSuffix ? [idSuffix.substring(1)] : [], // for proper testid generation
+                },
+                tag: "input",
+                attributes: {
+                    id,
+                    type: "checkbox",
+                    ...(checked ? { checked: "" } : {}),
+                    ...(disabled ? { disabled: "" } : {}),
+                },
+                template: ({ component, testid }) => html`
+                    <div data-testid="${testid}">
+                        <label for="${id}">toggle</label>
+                        ${component}
+                    </div>
+                `,
+            });
+        });
+    });
+
+    // Multiple toggle switch variant
+    [true, false].forEach((offChecked) => {
+        runComponentTests({
+            type: "a11y",
+            baseClass: "s-toggle-switch",
+            variants: ["multiple"],
+            modifiers: {
+                global: offChecked ? ["off"] : [], // for proper testid generation
+            },
+            children: {
+                default: `
+                    <input type="radio" name="group" id="four" ${
+                        offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="four" class="s-toggle-switch--label-off">Off</label>
+                    <input type="radio" name="group" id="one" ${
+                        !offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="one">one</label>
+                    <input type="radio" name="group" id="two">
+                    <label for="two">two</label>
+                `,
+            },
+            options: {
+                ...defaultOptions,
+                includeNullVariant: false,
+            },
+            template: ({ component, testid }) => html`
+                <div data-testid="${testid}">${component}</div>
+            `,
+            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+            skippedTestids: [
+                "s-toggle-switch-dark-multiple",
+                "s-toggle-switch-light-multiple",
+                "s-toggle-switch-dark-multiple-off",
+                "s-toggle-switch-light-multiple-off",
+            ],
+        });
+    });
+});

package/lib/components/toggle-switch/toggle-switch.less

@@ -5,7 +5,8 @@
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
-    fieldset[disabled] & {
+    fieldset[disabled] &,
+    &[disabled] {
         &,
         & label {
             cursor: not-allowed;

package/lib/components/toggle-switch/toggle-switch.visual.test.ts

@@ -0,0 +1,74 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("toggle-switch", () => {
+    // Single toggle switch
+    [true, false].forEach((checked) => {
+        [true, false].forEach((disabled) => {
+            const testidSuffix = `${checked ? "checked" : "unchecked"}${
+                disabled ? "-disabled" : "-enabled"
+            }`;
+            const id = `toggle-switch-${testidSuffix}`;
+
+            runComponentTests({
+                type: "visual",
+                baseClass: "s-toggle-switch",
+                tag: "input",
+                attributes: {
+                    id,
+                    type: "checkbox",
+                    ...(checked ? { checked: "" } : {}),
+                    ...(disabled ? { disabled: "" } : {}),
+                },
+                options: {
+                    ...defaultOptions,
+                    includeNullModifier: false,
+                    testidSuffix,
+                },
+                template: ({ component, testid }) => html`
+                    <div data-testid="${testid}" class="p4 ws1">
+                        <label class="v-visible-sr" for="${id}">toggle</label>
+                        ${component}
+                    </div>
+                `,
+            });
+        });
+    });
+
+    // Multiple toggle switch variant
+    [true, false].forEach((offChecked) => {
+        runComponentTests({
+            type: "visual",
+            baseClass: "s-toggle-switch",
+            variants: ["multiple"],
+            children: {
+                default: `
+                    <input type="radio" name="group" id="off" ${
+                        offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="off" class="s-toggle-switch--label-off">Off</label>
+                    <input type="radio" name="group" id="one" ${
+                        !offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="one">Weekly</label>
+                    <input type="radio" name="group" id="two">
+                    <label for="two">Daily</label>
+                    <input type="radio" name="group" id="three">
+                    <label for="three">3 hrs</label>
+                `,
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+                includeNullVariant: false,
+                testidSuffix: offChecked ? "unchecked" : "checked",
+            },
+            template: ({ component, testid }) => html`
+                <div data-testid="${testid}" class="d-flex ai-center g8 p4 ws2">
+                    ${component}
+                </div>
+            `,
+        });
+    });
+});

package/lib/components/uploader/uploader.ts

@@ -136,6 +136,7 @@ export class UploaderController extends Stacks.StacksController {
 
         if (file.type.match("image/*") && file.data) {
             thumbElement = document.createElement("img");
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             thumbElement.src = file.data.toString();
             thumbElement.alt = file.name;
         } else {

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

@@ -0,0 +1,34 @@
+# axe-apca
+
+⚠️ *Once this package become more mature and stable it should be extracted in its own repo (e.g. StackExchange/axe-apca) and published as an npm package. This will allow to use the rule/checks in many contexts including our Core codebase.*
+
+This package contains custom axe rules and checks for [APCA](https://readtech.org/) Bronze and Silver+ [conformance levels](https://readtech.org/ARC/tests/visual-readability-contrast/?tn=criterion).
+
+## Usage
+
+### Installation
+
+⚠️ *The following command doesn't work because this package is not published on npm yet.*
+
+```bash
+npm install --save-dev axe-core axe-apca
+```
+
+### Setup
+
+```js
+import axe from "axe-core";
+import { registerAxeAPCA } from 'axe-apca';
+
+registerAxeAPCA('bronze'); // or registerAxeAPCA('silver');
+
+ // consider turning off default WCAG 2.1 AA color contrast rules when using APCA
+axe.configure({
+    rules: [{ id: "color-contrast", enabled: false }]
+})
+
+ axe.run(document, (err, results) => {
+    if (err) throw err;
+    console.log(results);
+});
+```

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

@@ -0,0 +1,3 @@
+import registerAxeAPCA from "./src/axe-apca";
+
+export default registerAxeAPCA;

package/lib/test/axe-apca/package.wip.json

@@ -0,0 +1,30 @@
+{
+    "name": "axe-apca",
+    "description": "Axe rules to check against APCA bronze and silver+ conformance levels.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/StackExchange/axe-apca.git"
+    },
+    "version": "0.0.0",
+    "main": "TODO",
+    "types": "TODO",
+    "scripts": {
+        "build": "TODO: transpile ts to js",
+        "test": "web-test-runner"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "apca-w3": "^0.1.9"
+    },
+    "peerDependencies": {
+        "axe-core": "^4.0.0"
+    },
+    "devDependencies": {
+        "@open-wc/testing": "^3.2.0",
+        "@web/dev-server-esbuild": "^0.4.1",
+        "@web/dev-server-rollup": "^0.5.2",
+        "@web/test-runner": "^0.16.1",
+        "@web/test-runner-playwright": "^0.10.1",
+        "typescript": "^5.1.6"
+    }
+}

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

@@ -0,0 +1,3 @@
+declare module "apca-w3" {
+    export function calcAPCA(textColor: string, bgColor: string): number;
+}

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

@@ -0,0 +1,155 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import axe from "axe-core";
+import type { AxeResults } from "axe-core";
+import registerAxeAPCA from "./axe-apca";
+
+const runAxe = async (el: HTMLElement): Promise<AxeResults> => {
+    return new Promise((resolve, reject) => {
+        axe.run(el, (err, results) => {
+            if (err) reject(err);
+            resolve(results);
+        });
+    });
+};
+
+describe("axe-apca", () => {
+    describe("bronze conformance level", () => {
+        beforeEach(() => {
+            registerAxeAPCA("bronze");
+        });
+
+        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-bronze")
+            );
+
+            await expect(apcaPasses.length).to.equal(1);
+
+            const passNode = apcaPasses[0].nodes[0];
+            expect(passNode.all[0].message).to.include(
+                "Element has sufficient APCA bronze 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-bronze")
+            );
+
+            await expect(apcaViolations.length).to.equal(1);
+
+            const violationNode = apcaViolations[0].nodes[0];
+            expect(violationNode.failureSummary).to.include(
+                "Element has insufficient APCA bronze 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-bronze")
+            );
+
+            await expect(apcaViolations[0].nodes.length).to.equal(3);
+        });
+    });
+
+    describe("silver conformance level", () => {
+        beforeEach(() => {
+            registerAxeAPCA("silver");
+        });
+
+        it("should check for APCA accessibility contrast violations", async () => {
+            const el: HTMLElement = await fixture(
+                html`<p
+                    style="background: white; color: black; font-size: 14px; font-weight: 400;"
+                >
+                    Some copy
+                </p>`
+            );
+
+            const results = await runAxe(el);
+
+            const apcaPasses = results.passes.filter((violation) =>
+                violation.id.includes("color-contrast-apca-silver")
+            );
+
+            await expect(apcaPasses.length).to.equal(1);
+
+            const passNode = apcaPasses[0].nodes[0];
+            expect(passNode.all[0].message).to.include(
+                "Element has sufficient APCA silver level lightness contrast"
+            );
+        });
+
+        it("should detect 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 apcaViolations = results.violations.filter((violation) =>
+                violation.id.includes("color-contrast-apca-silver")
+            );
+
+            await expect(apcaViolations.length).to.equal(1);
+
+            const violationNode = apcaViolations[0].nodes[0];
+            expect(violationNode.failureSummary).to.include(
+                "Element has insufficient APCA silver 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-silver")
+            );
+
+            await expect(apcaViolations[0].nodes.length).to.equal(3);
+        });
+    });
+});