@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.3

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"];
@@ -325,10 +329,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": "2.0.0-rc.1",
+    "version": "2.0.0-rc.3",
     "files": [
         "dist",
         "lib"
@@ -39,7 +39,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@hotwired/stimulus": "^3.2.1",
+        "@hotwired/stimulus": "^3.2.2",
         "@popperjs/core": "^2.11.8"
     },
     "devDependencies": {
@@ -54,39 +54,39 @@
         "@testing-library/user-event": "^14.4.3",
         "@types/cssbeautify": "^0.3.2",
         "@types/less": "^3.0.3",
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
-        "@typescript-eslint/parser": "^6.4.0",
+        "@typescript-eslint/eslint-plugin": "^6.5.0",
+        "@typescript-eslint/parser": "^6.6.0",
         "@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",
-        "concurrently": "^8.2.0",
+        "concurrently": "^8.2.1",
         "css-loader": "^6.8.1",
         "cssbeautify": "^0.3.1",
         "cssnano": "^6.0.1",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.45.0",
-        "eslint-config-prettier": "^8.9.0",
+        "eslint": "^8.48.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.1",
+        "prettier": "^3.0.3",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^15.10.2",
+        "stylelint": "^15.10.3",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",
-        "typescript": "^5.1.6",
+        "typescript": "^5.2.2",
         "vitest": "^0.33.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",