Add basic axe check so Ladle doesn't come with a11y issues when used …

…for testing. (tajo#147)

.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.

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",

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,
+  });
+});

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) => {