Skip to content

Commit ae412b4

Browse files
harry-whorlowharry-whorlow
committed
feat: solid demo
1 parent f65b9f9 commit ae412b4

11 files changed

Lines changed: 319 additions & 0 deletions

File tree

‎examples/solid/a11y-devtools/.eslintrc.cjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {
5+
settings: {
6+
extends: [],
7+
rules: {},
8+
},
9+
}
10+
11+
module.exports = config

‎examples/solid/a11y-devtools/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
pnpm-lock.yaml
15+
yarn.lock
16+
package-lock.json
17+
18+
# misc
19+
.DS_Store
20+
.env.local
21+
.env.development.local
22+
.env.test.local
23+
.env.production.local
24+
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*

‎examples/solid/a11y-devtools/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install`
6+
- `npm run dev`

‎examples/solid/a11y-devtools/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
9+
<title>TanStack Devtools Example</title>
10+
</head>
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
<script type="module" src="/src/index.tsx"></script>
15+
</body>
16+
</html>

‎examples/solid/a11y-devtools/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@tanstack/devtools-example-solid-basic",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port=3005",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test:types": "tsc"
10+
},
11+
"dependencies": {
12+
"@tanstack/solid-devtools": "^0.7.24",
13+
"@tanstack/devtools-a11y": "workspace:*",
14+
"solid-js": "^1.9.9"
15+
},
16+
"devDependencies": {
17+
"@tanstack/devtools-vite": "0.5.0",
18+
"vite": "^7.1.7",
19+
"vite-plugin-inspect": "11.3.3",
20+
"vite-plugin-solid": "^2.11.8"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎examples/solid/a11y-devtools/public/emblem-light.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎examples/solid/a11y-devtools/src/app.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { createSignal } from 'solid-js'
2+
3+
export default function App() {
4+
const [showModal, setShowModal] = createSignal(false)
5+
6+
return (
7+
<div style="padding: 20px; font-family: system-ui, sans-serif;">
8+
<h1>A11y Devtools Demo</h1>
9+
<p>
10+
This page contains intentional accessibility issues to demonstrate the
11+
A11y devtools plugin. Open the devtools panel and click "Run Audit" to
12+
see the issues.
13+
</p>
14+
15+
<section style="margin-top: 24px;">
16+
<h2>Accessibility Issues Demo</h2>
17+
18+
{/* Issue: Image without alt text */}
19+
<div style="margin-bottom: 16px;">
20+
<h3>1. Image without alt text</h3>
21+
<img
22+
src="https://via.placeholder.com/150"
23+
width={150}
24+
height={150}
25+
style="border: 1px solid #ccc;"
26+
/>
27+
</div>
28+
29+
{/* Issue: Button without accessible name */}
30+
<div style="margin-bottom: 16px;">
31+
<h3>2. Button without accessible name</h3>
32+
<button style="width: 40px; height: 40px; font-size: 20px;">
33+
<span aria-hidden="true">×</span>
34+
</button>
35+
</div>
36+
37+
{/* Issue: Form input without label */}
38+
<div style="margin-bottom: 16px;">
39+
<h3>3. Form input without label</h3>
40+
<input
41+
type="text"
42+
placeholder="Enter your name"
43+
style="padding: 8px;"
44+
/>
45+
</div>
46+
47+
{/* Issue: Low color contrast */}
48+
<div style="margin-bottom: 16px;">
49+
<h3>4. Low color contrast</h3>
50+
<p style="color: #aaa; background-color: #fff;">
51+
This text has poor color contrast and may be hard to read.
52+
</p>
53+
</div>
54+
55+
{/* Issue: Link without discernible text */}
56+
<div style="margin-bottom: 16px;">
57+
<h3>5. Link without discernible text</h3>
58+
<a href="https://example.com" style="display: inline-block;">
59+
<img src="https://via.placeholder.com/24" width={24} height={24} />
60+
</a>
61+
</div>
62+
63+
{/* Issue: Missing main landmark */}
64+
<div style="margin-bottom: 16px;">
65+
<h3>6. Click handler on non-interactive element</h3>
66+
<div
67+
onClick={() => setShowModal(true)}
68+
style="padding: 12px 24px; background-color: #0ea5e9; color: white; border-radius: 4px; display: inline-block; cursor: pointer;"
69+
>
70+
Click me (not a button!)
71+
</div>
72+
</div>
73+
74+
{/* Issue: Empty heading */}
75+
<div style="margin-bottom: 16px;">
76+
<h3>7. Empty heading</h3>
77+
<h4></h4>
78+
</div>
79+
80+
{/* Issue: Missing form labels */}
81+
<div style="margin-bottom: 16px;">
82+
<h3>8. Select without label</h3>
83+
<select style="padding: 8px;">
84+
<option>Option 1</option>
85+
<option>Option 2</option>
86+
<option>Option 3</option>
87+
</select>
88+
</div>
89+
</section>
90+
91+
<section style="margin-top: 32px; padding: 16px; background-color: #f5f5f5; border-radius: 8px;">
92+
<h2>Accessible Content (for comparison)</h2>
93+
94+
<div style="margin-bottom: 16px;">
95+
<h3>Proper image with alt text</h3>
96+
<img
97+
src="https://via.placeholder.com/150"
98+
alt="Placeholder image for demonstration"
99+
width={150}
100+
height={150}
101+
style="border: 1px solid #ccc;"
102+
/>
103+
</div>
104+
105+
<div style="margin-bottom: 16px;">
106+
<h3>Proper button with label</h3>
107+
<button
108+
aria-label="Close dialog"
109+
style="width: 40px; height: 40px; font-size: 20px;"
110+
>
111+
<span aria-hidden="true">×</span>
112+
</button>
113+
</div>
114+
115+
<div style="margin-bottom: 16px;">
116+
<h3>Proper input with label</h3>
117+
<label for="name-input" style="display: block; margin-bottom: 4px;">
118+
Your Name
119+
</label>
120+
<input id="name-input" type="text" style="padding: 8px;" />
121+
</div>
122+
</section>
123+
124+
{showModal() && (
125+
<div
126+
role="dialog"
127+
aria-labelledby="modal-title"
128+
style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 1000;"
129+
>
130+
<h2 id="modal-title">Modal Dialog</h2>
131+
<p>This is a modal that was triggered by a non-button element.</p>
132+
<button onClick={() => setShowModal(false)}>Close</button>
133+
</div>
134+
)}
135+
</div>
136+
)
137+
}

‎examples/solid/a11y-devtools/src/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { render } from 'solid-js/web'
2+
3+
// devtool imports
4+
import { TanStackDevtools } from '@tanstack/solid-devtools'
5+
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/solid'
6+
7+
import App from './app'
8+
9+
function Root() {
10+
return (
11+
<>
12+
<App />
13+
14+
<TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
15+
</>
16+
)
17+
}
18+
19+
render(() => <Root />, document.getElementById('root')!)

‎examples/solid/a11y-devtools/tsconfig.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
5+
"module": "ESNext",
6+
"skipLibCheck": true,
7+
8+
/* Bundler mode */
9+
"moduleResolution": "Bundler",
10+
"allowImportingTsExtensions": true,
11+
"resolveJsonModule": true,
12+
"isolatedModules": true,
13+
"noEmit": true,
14+
"jsx": "preserve",
15+
"jsxImportSource": "solid-js",
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
22+
},
23+
"include": ["src", "vite.config.ts"]
24+
}

‎examples/solid/a11y-devtools/vite.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import solid from 'vite-plugin-solid'
3+
import { devtools } from '@tanstack/devtools-vite'
4+
// https://vite.dev/config/
5+
export default defineConfig({
6+
plugins: [devtools(), solid({})],
7+
})

0 commit comments

Comments
 (0)