Function App

examples/solid/a11y-devtools/src/app.tsx:3–137

()

import { createSignal } from 'solid-js'

export default function App() {
  const [showModal, setShowModal] = createSignal(false)

  return (
    <div style="padding: 20px; font-family: system-ui, sans-serif;">
      <h1>A11y Devtools Demo</h1>
      <p>
        This page contains intentional accessibility issues to demonstrate the
        A11y devtools plugin. Open the devtools panel and click "Run Audit" to
        see the issues.
      </p>

      <section style="margin-top: 24px;">
        <h2>Accessibility Issues Demo</h2>

        {/* Issue: Image without alt text */}
        <div style="margin-bottom: 16px;">
          <h3>1. Image without alt text</h3>
          <img
            src="https://via.placeholder.com/150"
            width={150}
            height={150}
            style="border: 1px solid #ccc;"
          />
        </div>

        {/* Issue: Button without accessible name */}
        <div style="margin-bottom: 16px;">
          <h3>2. Button without accessible name</h3>
          <button style="width: 40px; height: 40px; font-size: 20px;">
            <span aria-hidden="true">×</span>
          </button>
        </div>

        {/* Issue: Form input without label */}
        <div style="margin-bottom: 16px;">
          <h3>3. Form input without label</h3>
          <input
            type="text"
            placeholder="Enter your name"
            style="padding: 8px;"
          />
        </div>

        {/* Issue: Low color contrast */}
        <div style="margin-bottom: 16px;">
          <h3>4. Low color contrast</h3>
          <p style="color: #aaa; background-color: #fff;">
            This text has poor color contrast and may be hard to read.
          </p>
        </div>

        {/* Issue: Link without discernible text */}
        <div style="margin-bottom: 16px;">
          <h3>5. Link without discernible text</h3>
          <a href="https://example.com" style="display: inline-block;">
            <img src="https://via.placeholder.com/24" width={24} height={24} />
          </a>