@stackoverflow/stacks 2.0.8 → 2.1.0-rc.0

package/lib/components/input-message/input-message.a11y.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 const states = [
@@ -28,8 +28,7 @@ const states = [
 
 describe("input-message", () => {
     states.forEach((state) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: `s-input-message ${
                 state.class ? `state-${state.class}` : ""
             }`,

package/lib/components/input-message/input-message.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const states = [
@@ -29,8 +29,7 @@ const states = [
 
 describe("input-message", () => {
     states.forEach((state) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-input-message ${
                 state.class ? `state-${state.class}` : ""
             }`,

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
@@ -34,8 +34,7 @@ const otherModifiers = ["creditcard", "search"];
 
     describe(type, () => {
         // Base styles w/ value, modifiers
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: `s-${type}`,
             modifiers: {
                 primary: [...sizes, ...otherModifiers],
@@ -59,8 +58,7 @@ const otherModifiers = ["creditcard", "search"];
         customAttributes.forEach((attributes) => {
             const attrString = Object.keys(attributes).sort().join("-");
 
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: `s-${type} ${attrString}`,
                 tag: type,
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,8 +86,7 @@ const otherModifiers = ["creditcard", "search"];
 
         // w/ state classes
         states.forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: `s-${type} state-${state}`,
                 tag: type,
                 attributes:

package/lib/components/input_textarea/input_textarea.less

@@ -1,13 +1,10 @@
 .s-input,
 .s-textarea {
     --_in-bc: var(--bc-darker);
-    --_in-bc-focus: var(--theme-secondary-400);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);
-    --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_in-c: unset;
     --_in-fc: var(--fc-dark);
-    --_in-fc-focus: var(--black);
     --_in-fs: var(--fs-body1);
     --_in-o: unset;
     --_in-px: 0.7em;
@@ -52,7 +49,6 @@
         --_in-bg: var(--black-150);
         --_in-bc: var(--bc-light);
         --_in-fc: var(--black-300);
-        --_in-fc-focus: var(--_in-fc);
     }
 
     .validation-states(
@@ -106,11 +102,8 @@
     }
 
     // INTERACTION
-    &:focus{
-        border-color: var(--_in-bc-focus);
-        box-shadow: var(--_in-bs-focus);
-        color: var(--_in-fc-focus);
-        outline: 0;
+    &:focus {
+        .focus-styles();
     }
 
     @scrollbar-styles();
@@ -134,17 +127,6 @@
         padding-right: var(--su32);
     });
 
-    &:focus-within {
-        .highcontrast-mode({
-            --_in-bc-focus: var(--black);
-        });
-
-        border-color: var(--_in-bc-focus);
-        box-shadow: var(--_in-bs-focus);
-        color: var(--_in-fc-focus);
-        outline: 0;
-    }
-
     &&__md {
         --_in-py: 0.5em;
     }

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -31,8 +31,7 @@ const otherModifiers = ["creditcard", "search"];
 
     describe(type, () => {
         // Base styles w/ value, modifiers
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-${type}`,
             modifiers: {
                 primary: [...sizes, ...otherModifiers],
@@ -65,8 +64,7 @@ const otherModifiers = ["creditcard", "search"];
                     };
                 }
             }
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: `s-${type} ${attrString}`,
                 tag: type,
                 attributes: attr,
@@ -77,8 +75,7 @@ const otherModifiers = ["creditcard", "search"];
 
         // w/ state classes; .is-readonly
         states.forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: `s-${type} state-${state}`,
                 tag: type,
                 attributes:

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,8 +28,7 @@ const getChildren = (status?: any) => {
 };
 
 describe("label", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-label`,
         modifiers: {
             primary: ["sm", "md", "lg", "xl"],

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,8 +37,7 @@ describe("label", () => {
     [true, false].forEach((isDisabled) => {
         const text = isDisabled ? "Disabled label" : "Example label";
 
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-label`,
             modifiers: {
                 primary: ["sm", "md", "lg", "xl"],

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

@@ -1,10 +1,9 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("link", () => {
     // TODO check for visited styling
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-link",
         modifiers: {
             primary: [

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

@@ -1,11 +1,10 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("link", () => {
     // TODO check for visited styling
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-link",
         modifiers: {
             primary: [

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

@@ -1,4 +1,4 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 const getChild = (child?: string): string => {
@@ -33,8 +33,7 @@ const getChild = (child?: string): string => {
     `;
 };
 describe("link preview", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-link-preview",
         children: {
             default: getChild(),

package/lib/components/link-preview/link-preview.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const getChild = (child?: string): string => {
@@ -33,9 +33,9 @@ const getChild = (child?: string): string => {
         </div>
     `;
 };
+
 describe("link preview", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-link-preview",
         children: {
             default: getChild(),

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

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("menu", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-menu`,
         children: {
             default: `

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

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("menu", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-menu`,
         children: {
             default: `

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

@@ -1,11 +1,10 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
 
 describe("modal", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-modal`,
         variants: ["danger"],
         modifiers: {

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

@@ -1,11 +1,10 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
 
 describe("modal", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-modal`,
         variants: ["danger"],
         modifiers: {

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { WCAGNonTextContrast } from "../../test/assertions";
 import "../../index";
 
@@ -55,8 +55,7 @@ const getChildren = (includeTitles = false): string =>
         .join("");
 
 describe("navigation", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-navigation",
         variants: ["vertical", "muted"],
         modifiers: {

package/lib/components/navigation/navigation.less

@@ -91,7 +91,9 @@
             color: var(--_na-item-fc-hover);
         }
 
-        @focus-styles();
+        &:focus-visible {
+            .focus-styles(true);
+        }
 
         background-color: var(--_na-item-bg);
         color: var(--_na-item-fc);

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

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 const items = [
@@ -54,8 +54,7 @@ const getChildren = (includeTitles = false): string =>
         .join("");
 
 describe("navigation", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-navigation",
         variants: ["muted"],
         modifiers: {
@@ -76,8 +75,7 @@ describe("navigation", () => {
         `,
     });
 
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-navigation",
         variants: ["vertical"],
         tag: "ul",
@@ -94,7 +92,6 @@ describe("navigation", () => {
             </nav>
         `,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });

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

@@ -1,9 +1,8 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("notice", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-notice",
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

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

@@ -1,10 +1,9 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
 import "../../index";
 
 describe("notice", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-notice",
         variants: ["info", "success", "warning", "danger"],
         modifiers: {

package/lib/components/page-title/page-title.a11y.test.ts

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("page title", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-page-title",
         children: {
             default: `

package/lib/components/page-title/page-title.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -47,8 +47,7 @@ const getChildren = ({
 `;
 
 describe("page title", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-page-title",
         children: {
             default: getChildren({ showEverything: false }),

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

@@ -1,10 +1,9 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { WCAGNonTextContrast } from "../../test/assertions";
 import "../../index";
 
 describe("pagination", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-pagination",
         children: {
             default: `

package/lib/components/pagination/pagination.less

@@ -3,6 +3,8 @@
         --_pa-item-bg: transparent;
         --_pa-item-bc: var(--bc-darker);
         --_pa-item-fc: var(--fc-medium);
+        --_pa-item-bg-focus: var(--black-400);
+        --_pa-item-fc-focus: var(--white);
         --_pa-item-bg-hover: var(--black-225);
         --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
@@ -15,6 +17,7 @@
             --_pa-item-bg: var(--theme-primary);
             --_pa-item-bc: transparent;
             --_pa-item-fc: var(--white);
+            --_pa-item-bg-focus: var(--theme-primary-400);
         }
         &.s-pagination--item__clear {
             --_pa-item-bg: transparent;
@@ -36,6 +39,12 @@
             color: var(--_pa-item-fc-hover);
         }
 
+        &:focus-visible {
+            background-color: var(--_pa-item-bg-focus);
+            color: var(--_pa-item-fc-focus);
+            .focus-styles(true, true);
+        }
+
         background-color: var(--_pa-item-bg);
         border: 1px solid var(--_pa-item-bc);
         color: var(--_pa-item-fc);

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

@@ -1,10 +1,9 @@
 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("pagination", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-pagination",
         children: {
             default: `

package/lib/components/progress-bar/progress-bar.a11y.test.ts

@@ -3,7 +3,7 @@ import {
     IconAchievementsSm,
     IconCheckmarkSm,
 } from "@stackoverflow/stacks-icons/icons";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -97,8 +97,7 @@ const getChildren = (type: string) => {
 };
 describe("progress-bar", () => {
     // Base
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["brand", "info"],
         children: {
@@ -108,8 +107,7 @@ describe("progress-bar", () => {
     });
 
     // Badge
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["badge"],
         modifiers: {
@@ -120,15 +118,13 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
             includeNullModifier: false,
         },
     });
 
     // Circular
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["circular"],
         modifiers: {
@@ -142,15 +138,13 @@ describe("progress-bar", () => {
             style: "--s-progress-value: .75",
         },
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
             includeNullModifier: false,
         },
     });
 
     // Privilege
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["privilege"],
         children: {
@@ -158,14 +152,12 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });
 
     // Segmented
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["segmented"],
         children: {
@@ -173,14 +165,12 @@ describe("progress-bar", () => {
         },
         template,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
     });
 
     // Stepped
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
         variants: ["stepped"],
         children: {
@@ -192,7 +182,6 @@ describe("progress-bar", () => {
             </div>
         `,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
         },
         // TODO add skipped test ids

package/lib/components/progress-bar/progress-bar.less

@@ -170,7 +170,7 @@
 
                         &--stop {
                             background: var(--theme-secondary-400);
-                            box-shadow: 0 0 0 var(--su-static6) var(--focus-ring);
+                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
                         }
                     }
                 }