Skip to content

Commit

Permalink
Add basic axe check so Ladle doesn't come with a11y issues when used …
Browse files Browse the repository at this point in the history
…for testing. (tajo#147)
  • Loading branch information
tajo authored May 28, 2022
1 parent 52db7ee commit f9a4965
Showing 5 changed files with 41 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/dull-meals-decide.md
Original file line number Diff line number Diff line change
@@ -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.
1 change: 1 addition & 0 deletions e2e/addons/package.json
Original file line number Diff line number Diff line change
@@ -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",
13 changes: 13 additions & 0 deletions e2e/addons/tests/axe.spec.ts
Original file line number Diff line number Diff line change
@@ -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,
});
});
3 changes: 1 addition & 2 deletions packages/ladle/lib/app/src/sidebar/tree-view.tsx
Original file line number Diff line number Diff line change
@@ -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) => {
21 changes: 21 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f9a4965

Please sign in to comment.