From f9a4965e8a7940f9aa41df2c2c8418d37f9f0d35 Mon Sep 17 00:00:00 2001
From: Vojtech Miksu <vojtech@miksu.cz>
Date: Sat, 28 May 2022 16:06:46 -0700
Subject: [PATCH] Add basic axe check so Ladle doesn't come with a11y issues
 when used for testing. (#147)

---
 .changeset/dull-meals-decide.md               |  5 +++++
 e2e/addons/package.json                       |  1 +
 e2e/addons/tests/axe.spec.ts                  | 13 ++++++++++++
 .../ladle/lib/app/src/sidebar/tree-view.tsx   |  3 +--
 pnpm-lock.yaml                                | 21 +++++++++++++++++++
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/dull-meals-decide.md
 create mode 100644 e2e/addons/tests/axe.spec.ts

diff --git a/.changeset/dull-meals-decide.md b/.changeset/dull-meals-decide.md
new file mode 100644
index 00000000..3033bd9f
--- /dev/null
+++ b/.changeset/dull-meals-decide.md
@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Add generic Axe check for (mostly) empty Ladle instance to make sure that projects running axe don't have a problem with Ladle.
diff --git a/e2e/addons/package.json b/e2e/addons/package.json
index ca0debfe..55ee611d 100644
--- a/e2e/addons/package.json
+++ b/e2e/addons/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@ladle/react": "workspace:*",
     "@playwright/test": "1.19.2",
+    "axe-playwright": "^1.1.11",
     "http-server": "^14.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
diff --git a/e2e/addons/tests/axe.spec.ts b/e2e/addons/tests/axe.spec.ts
new file mode 100644
index 00000000..e571dd9b
--- /dev/null
+++ b/e2e/addons/tests/axe.spec.ts
@@ -0,0 +1,13 @@
+import { test } from "@playwright/test";
+import { injectAxe, checkA11y, configureAxe } from "axe-playwright";
+
+test("empty label doesn't violate axe run", async ({ page }) => {
+  await page.goto("http://localhost:61100/?story=hello--world");
+  await page.waitForSelector("[data-storyloaded]");
+  await injectAxe(page);
+  await configureAxe(page);
+  await checkA11y(page, null, {
+    detailedReport: true,
+    axeOptions: undefined,
+  });
+});
diff --git a/packages/ladle/lib/app/src/sidebar/tree-view.tsx b/packages/ladle/lib/app/src/sidebar/tree-view.tsx
index df0f4b7d..6e2a85e4 100644
--- a/packages/ladle/lib/app/src/sidebar/tree-view.tsx
+++ b/packages/ladle/lib/app/src/sidebar/tree-view.tsx
@@ -170,7 +170,7 @@ const NavigationSection: React.FC<{
                 ? undefined
                 : (element) => (treeItemRefs.current[treeProps.id] = element)
             }
-            role={treeProps.isLinkable ? "none" : "treeitem"}
+            role="treeitem"
             key={treeProps.id}
             className={cx({
               "ladle-linkable": treeProps.isLinkable,
@@ -186,7 +186,6 @@ const NavigationSection: React.FC<{
                   ref={(element) =>
                     (treeItemRefs.current[treeProps.id] = element)
                   }
-                  role="treeitem"
                   href={getHref({ story: treeProps.id })}
                   onKeyDown={(e) => onKeyDownFn(e, treeProps)}
                   onClick={(e) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb4c25a6..260f605c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,7 @@ importers:
     specifiers:
       "@ladle/react": workspace:*
       "@playwright/test": 1.19.2
+      axe-playwright: ^1.1.11
       http-server: ^14.1.0
       react: ^18.1.0
       react-dom: ^18.1.0
@@ -54,6 +55,7 @@ importers:
     dependencies:
       "@ladle/react": link:../../packages/ladle
       "@playwright/test": 1.19.2
+      axe-playwright: 1.1.11
       http-server: 14.1.0
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
@@ -6087,6 +6089,17 @@ packages:
     engines: { node: ">=4" }
     dev: false
 
+  /axe-playwright/1.1.11:
+    resolution:
+      {
+        integrity: sha512-YHmUouvF/dFNxoFFwbCjPFmEPwoJSzPgZsD0KZs3xjsR03Rf2mAh771ugre950MaBYuiyxYDlurH5BOEJBK34Q==,
+      }
+    peerDependencies:
+      playwright-core: ">1.0.0"
+    dependencies:
+      axe-core: 4.4.1
+    dev: false
+
   /axios/0.21.4_debug@4.3.2:
     resolution:
       {
@@ -7616,6 +7629,11 @@ packages:
       {
         integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==,
       }
+    peerDependencies:
+      supports-color: "*"
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -10204,6 +10222,7 @@ packages:
       url-join: 4.0.1
     transitivePeerDependencies:
       - debug
+      - supports-color
     dev: false
 
   /https-proxy-agent/5.0.0:
@@ -13098,6 +13117,8 @@ packages:
       async: 2.6.4
       debug: 3.2.7
       mkdirp: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /postcss-calc/8.2.4_postcss@8.4.13: