Function App

examples/react/a11y-devtools/src/App.tsx:6–167

()

 * Example app with intentional accessibility issues for testing the A11y devtools plugin
 */
export default function App() {
  const [showModal, setShowModal] = useState(false)

  return (
    <div style={{ padding: '20px', fontFamily: '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={{ marginTop: '24px' }}>
        <h2>Accessibility Issues Demo</h2>

        {/* Issue: Image without alt text */}
        <div style={{ marginBottom: '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={{ marginBottom: '16px' }}>
          <h3>2. Button without accessible name</h3>
          <button style={{ width: '40px', height: '40px', fontSize: '20px' }}>
            <span aria-hidden="true">×</span>
          </button>
        </div>

        {/* Issue: Form input without label */}
        <div style={{ marginBottom: '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={{ marginBottom: '16px' }}>
          <h3>4. Low color contrast</h3>
          <p style={{ color: '#aaa', backgroundColor: '#fff' }}>
            This text has poor color contrast and may be hard to read.
          </p>
        </div>

        {/* Issue: Link without discernible text */}
        <div style={{ marginBottom: '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>