Accessibility violations

src/components/Accesskeys.jsx

@@ -0,0 +1,11 @@
+// accesslint-031: Accesskeys — duplicate accesskey values
+export default function Accesskeys() {
+  return (
+    <nav>
+      <a href="/home" accessKey="h">Home</a>
+      <a href="/help" accessKey="h">Help</a>
+      <a href="/search" accessKey="s">Search</a>
+      <a href="/settings" accessKey="s">Settings</a>
+    </nav>
+  );
+}

src/components/Accordion.jsx

@@ -0,0 +1,14 @@
+// accesslint-034: Empty Heading — heading used as accordion trigger with no text
+// accesslint-075: Button Name — empty button
+export default function Accordion() {
+  return (
+    <div>
+      <h3><button></button></h3>
+      <div>Accordion panel 1 content.</div>
+      <h3><button></button></h3>
+      <div>Accordion panel 2 content.</div>
+      <h3><button></button></h3>
+      <div>Accordion panel 3 content.</div>
+    </div>
+  );
+}

src/components/AriaAllowed.jsx

@@ -0,0 +1,10 @@
+// accesslint-058: ARIA Allowed Attr — ARIA attributes not allowed for role
+export default function AriaAllowed() {
+  return (
+    <div>
+      <h2 aria-checked="true">Heading with aria-checked</h2>
+      <p aria-selected="true">Paragraph with aria-selected</p>
+      <img src="/photo.jpg" alt="Photo" aria-expanded="true" />
+    </div>
+  );
+}

src/components/AriaAttrs.jsx

@@ -0,0 +1,13 @@
+// accesslint-055: ARIA Valid Attr — misspelled ARIA attributes
+// accesslint-056: ARIA Valid Attr Value — invalid ARIA attribute values
+export default function AriaAttrs() {
+  return (
+    <div>
+      <button aria-expandd="true">Toggle</button>
+      <input type="text" aria-requird="true" />
+      <div role="checkbox" aria-checked="maybe">Option</div>
+      <div aria-live="aggressive">Updates here</div>
+      <button aria-pressed="none">Like</button>
+    </div>
+  );
+}

src/components/AriaChildren.jsx

@@ -0,0 +1,19 @@
+// accesslint-060: ARIA Required Children — missing required child roles
+export default function AriaChildren() {
+  return (
+    <div>
+      <ul role="tablist">
+        <li>Tab 1</li>
+        <li>Tab 2</li>
+      </ul>
+      <div role="list">
+        <span>Item 1</span>
+        <span>Item 2</span>
+      </div>
+      <div role="grid">
+        <div>Cell 1</div>
+        <div>Cell 2</div>
+      </div>
+    </div>
+  );
+}

src/components/AriaCommandNames.jsx

@@ -0,0 +1,14 @@
+// accesslint-064: ARIA Command Name — command roles without names
+// accesslint-065: ARIA Input Field Name — input roles without names
+export default function AriaCommandNames() {
+  return (
+    <div>
+      <div role="button"></div>
+      <div role="link"></div>
+      <div role="menuitem"></div>
+      <div role="textbox"></div>
+      <div role="searchbox"></div>
+      <div role="spinbutton"></div>
+    </div>
+  );
+}

src/components/AriaDialogs.jsx

@@ -0,0 +1,16 @@
+// accesslint-069: ARIA Dialog Name — dialogs without accessible names
+export default function AriaDialogs() {
+  return (
+    <div>
+      <div role="dialog">
+        <p>Are you sure you want to delete this?</p>
+        <button>Yes</button>
+        <button>No</button>
+      </div>
+      <div role="alertdialog">
+        <p>Session expired.</p>
+        <button>OK</button>
+      </div>
+    </div>
+  );
+}

src/components/AriaHiddenFocus.jsx

@@ -0,0 +1,12 @@
+// accesslint-063: ARIA Hidden Focus — focusable elements inside aria-hidden
+export default function AriaHiddenFocus() {
+  return (
+    <div>
+      <div aria-hidden="true">
+        <button>Hidden but focusable button</button>
+        <a href="/secret">Hidden but focusable link</a>
+        <input type="text" placeholder="Hidden but focusable input" />
+      </div>
+    </div>
+  );
+}

src/components/AriaMeters.jsx

@@ -0,0 +1,11 @@
+// accesslint-067: ARIA Meter Name — meters without accessible names
+// accesslint-068: ARIA Progressbar Name — progressbars without names
+export default function AriaMeters() {
+  return (
+    <div>
+      <div role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+      <div role="meter" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+  );
+}

src/components/AriaParent.jsx

@@ -0,0 +1,11 @@
+// accesslint-061: ARIA Required Parent — roles missing required parents
+export default function AriaParent() {
+  return (
+    <div>
+      <div role="tab">Tab without tablist</div>
+      <div role="listitem">Item without list</div>
+      <div role="option">Option without listbox</div>
+      <div role="row">Row without table/grid</div>
+    </div>
+  );
+}

src/components/AriaProhibited.jsx

@@ -0,0 +1,10 @@
+// accesslint-072: ARIA Prohibited Attr — prohibited attributes for roles
+export default function AriaProhibited() {
+  return (
+    <div>
+      <div role="presentation" aria-label="Decorative section">Content</div>
+      <div role="none" aria-describedby="desc1">More content</div>
+      <img role="presentation" aria-label="Decorative image" src="/bg.png" />
+    </div>
+  );
+}

src/components/AriaRequired.jsx

@@ -0,0 +1,12 @@
+// accesslint-057: ARIA Required Attr — missing required attributes
+export default function AriaRequired() {
+  return (
+    <div>
+      <div role="checkbox">Accept terms</div>
+      <div role="slider">Volume</div>
+      <div role="combobox">Select option</div>
+      <div role="scrollbar">Scroll</div>
+      <div role="separator" tabIndex="0">---</div>
+    </div>
+  );
+}

src/components/AriaRoles.jsx

@@ -0,0 +1,12 @@
+// accesslint-054: ARIA Roles — invalid role values
+// accesslint-059: ARIA Allowed Role — inappropriate roles for elements
+export default function AriaRoles() {
+  return (
+    <div>
+      <div role="buttn">Click me</div>
+      <div role="chckbox">Option A</div>
+      <span role="headin" aria-level="2">Title</span>
+      <p role="checkbox">I agree to terms</p>
+    </div>
+  );
+}

src/components/AriaToggleFields.jsx

@@ -0,0 +1,12 @@
+// accesslint-066: ARIA Toggle Field Name — toggle fields without names
+export default function AriaToggleFields() {
+  return (
+    <div>
+      <div role="checkbox" aria-checked="false"></div>
+      <div role="switch" aria-checked="true"></div>
+      <div role="radio" aria-checked="false"></div>
+      <div role="menuitemcheckbox" aria-checked="false"></div>
+      <div role="menuitemradio" aria-checked="false"></div>
+    </div>
+  );
+}

src/components/AudioPlayer.jsx

@@ -0,0 +1,12 @@
+// accesslint-091: Audio Captions — audio without text alternatives
+export default function AudioPlayer() {
+  return (
+    <div>
+      <audio src="/podcast-ep1.mp3" controls></audio>
+      <audio controls>
+        <source src="/podcast-ep2.ogg" type="audio/ogg" />
+        <source src="/podcast-ep2.mp3" type="audio/mpeg" />
+      </audio>
+    </div>
+  );
+}

src/components/Breadcrumbs.jsx

@@ -0,0 +1,13 @@
+// accesslint-077: Link Name — empty breadcrumb separator links
+// accesslint-011: Image Alt — separator images without alt
+export default function Breadcrumbs() {
+  return (
+    <nav>
+      <a href="/"><img src="/home-icon.svg" /></a>
+      <img src="/chevron.svg" />
+      <a href="/products">Products</a>
+      <img src="/chevron.svg" />
+      <a href="/products/widgets">Widgets</a>
+    </nav>
+  );
+}

src/components/CardGrid.jsx

@@ -0,0 +1,23 @@
+// accesslint-011: Image Alt — card images missing alt
+// accesslint-077: Link Name — empty links
+export default function CardGrid() {
+  return (
+    <div>
+      <div className="card">
+        <a href="/product/1"><img src="/product-1.jpg" /></a>
+        <h3>Product One</h3>
+        <p>Description of product one.</p>
+      </div>
+      <div className="card">
+        <a href="/product/2"><img src="/product-2.jpg" /></a>
+        <h3>Product Two</h3>
+        <p>Description of product two.</p>
+      </div>
+      <div className="card">
+        <a href="/product/3"><img src="/product-3.jpg" /></a>
+        <h3>Product Three</h3>
+        <p>Description of product three.</p>
+      </div>
+    </div>
+  );
+}

src/components/Carousel.jsx

@@ -0,0 +1,15 @@
+// accesslint-011: Image Alt — carousel images without alt
+// accesslint-075: Button Name — prev/next buttons without text
+export default function Carousel() {
+  return (
+    <div>
+      <button><img src="/arrow-left.svg" /></button>
+      <div>
+        <img src="/slide-1.jpg" />
+        <img src="/slide-2.jpg" />
+        <img src="/slide-3.jpg" />
+      </div>
+      <button><img src="/arrow-right.svg" /></button>
+    </div>
+  );
+}

src/components/ContactForm.jsx

@@ -0,0 +1,20 @@
+// accesslint-020: Form Label — inputs missing labels
+export default function ContactForm() {
+  return (
+    <form>
+      <div>
+        <input type="text" placeholder="Your name" />
+      </div>
+      <div>
+        <input type="email" placeholder="Email address" />
+      </div>
+      <div>
+        <input type="tel" placeholder="Phone number" />
+      </div>
+      <div>
+        <textarea placeholder="Message"></textarea>
+      </div>
+      <button type="submit">Send</button>
+    </form>
+  );
+}

src/components/DataTable.jsx

@@ -0,0 +1,30 @@
+// accesslint-088: Empty Table Header — table headers with no text
+// accesslint-084: Table Headers Attr — invalid header references
+export default function DataTable() {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th></th>
+          <th>Email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td headers="nonexistent">1</td>
+          <td>Alice</td>
+          <td>Admin</td>
+          <td>alice@example.com</td>
+        </tr>
+        <tr>
+          <td headers="also-missing">2</td>
+          <td>Bob</td>
+          <td>User</td>
+          <td>bob@example.com</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

src/components/DefinitionListErrors.jsx

@@ -0,0 +1,19 @@
+// accesslint-048: Definition List Item — dt/dd outside dl
+// accesslint-049: Definition List — dl with invalid children
+export default function DefinitionListErrors() {
+  return (
+    <div>
+      <dl>
+        <dt>Term 1</dt>
+        <dd>Definition 1</dd>
+        <p>Invalid child of dl</p>
+        <div>
+          <dt>Term 2</dt>
+          <dd>Definition 2</dd>
+        </div>
+      </dl>
+      <dt>Orphaned term</dt>
+      <dd>Orphaned definition</dd>
+    </div>
+  );
+}

src/components/DeprecatedElements.jsx

@@ -0,0 +1,11 @@
+// accesslint-009: Blink Element — blink must not be used
+// accesslint-010: Marquee Element — marquee must not be used
+export default function DeprecatedElements() {
+  return (
+    <div>
+      <blink>This text blinks!</blink>
+      <marquee>Scrolling announcement text</marquee>
+      <marquee direction="right">More scrolling text</marquee>
+    </div>
+  );
+}

src/components/DuplicateAriaIds.jsx

@@ -0,0 +1,14 @@
+// accesslint-089: Duplicate ID ARIA — duplicate IDs used in ARIA references
+export default function DuplicateAriaIds() {
+  return (
+    <div>
+      <div id="desc1">First description</div>
+      <div id="desc1">Duplicate description</div>
+      <input type="text" aria-describedby="desc1" />
+
+      <div id="label1">Label text</div>
+      <div id="label1">Duplicate label text</div>
+      <input type="text" aria-labelledby="label1" />
+    </div>
+  );
+}

src/components/EmptyButtons.jsx

@@ -0,0 +1,11 @@
+// accesslint-075: Button Name — buttons with no discernible text
+export default function EmptyButtons() {
+  return (
+    <div>
+      <button></button>
+      <button><img src="/icon-edit.svg" /></button>
+      <button><img src="/icon-delete.svg" /></button>
+      <button><i className="fa fa-cog"></i></button>
+    </div>
+  );
+}

src/components/EmptyHeadings.jsx

@@ -0,0 +1,11 @@
+// accesslint-034: Empty Heading — headings with no text
+export default function EmptyHeadings() {
+  return (
+    <section>
+      <h2></h2>
+      <p>This section has an empty heading above.</p>
+      <h3> </h3>
+      <p>This heading has only whitespace.</p>
+    </section>
+  );
+}

src/components/FileUpload.jsx

@@ -0,0 +1,11 @@
+// accesslint-020: Form Label — file input without label
+// accesslint-075: Button Name — upload button with only icon
+export default function FileUpload() {
+  return (
+    <div>
+      <input type="file" />
+      <button><img src="/upload.svg" /></button>
+      <input type="file" accept="image/*" />
+    </div>
+  );
+}