### Legacy Config Setup (.eslintrc) for ESLint Plugin JSX A11y

Source: https://context7.com/jsx-eslint/eslint-plugin-jsx-a11y/llms.txt

Configuration example for ESLint Plugin JSX A11y using the legacy .eslintrc JSON format, applying the recommended preset and custom rule settings.

```json
{
  "plugins": ["jsx-a11y"],
  "extends": ["plugin:jsx-a11y/recommended"],
  "rules": {
    "jsx-a11y/anchor-is-valid": "error",
    "jsx-a11y/alt-text": "error"
  }
}
```

--------------------------------

### Flat Config Setup (CommonJS) for ESLint Plugin JSX A11y

Source: https://context7.com/jsx-eslint/eslint-plugin-jsx-a11y/llms.txt

Configuration example for ESLint Plugin JSX A11y using the flat config format for CommonJS projects. It includes recommended rules and custom rule overrides.

```javascript
// eslint.config.cjs
const globals = require('globals');
const js = require('@eslint/js');
const jsxA11y = require('eslint-plugin-jsx-a11y');

module.exports = [
  js.configs.recommended,
  jsxA11y.flatConfigs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
    },
    rules: {
      'jsx-a11y/no-autofocus': 'off',
    },
  },
];
```

--------------------------------

### Install ESLint and Plugin

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

Installs ESLint and the eslint-plugin-jsx-a11y package as development dependencies using npm or yarn.

```sh
# npm
npm install eslint --save-dev
npm install eslint-plugin-jsx-a11y --save-dev

# yarn
yarn add eslint --dev
yarn add eslint-plugin-jsx-a11y --dev
```

--------------------------------

### Flat Config Setup (ESM) for ESLint Plugin JSX A11y

Source: https://context7.com/jsx-eslint/eslint-plugin-jsx-a11y/llms.txt

Configuration example for ESLint Plugin JSX A11y using the modern flat config format for ES modules projects. It includes recommended rules and custom rule overrides.

```javascript
// eslint.config.js
import globals from 'globals';
import js from '@eslint/js';
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default [
  js.configs.recommended,
  jsxA11y.flatConfigs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
    },
    rules: {
      // Override specific rules as needed
      'jsx-a11y/anchor-ambiguous-text': 'warn',
      'jsx-a11y/anchor-is-valid': 'warn',
    },
  },
];
```

--------------------------------

### Install ESLint Plugin JSX A11y (npm/yarn)

Source: https://context7.com/jsx-eslint/eslint-plugin-jsx-a11y/llms.txt

Commands to install the eslint-plugin-jsx-a11y package along with ESLint as development dependencies using npm or yarn.

```bash
# Install with npm
npm install eslint eslint-plugin-jsx-a11y --save-dev

# Install with yarn
yarn add eslint eslint-plugin-jsx-a11y --dev
```

--------------------------------

### Configure interactive-supports-focus rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/interactive-supports-focus.md

Example of how to configure the rule in an ESLint configuration file, specifying which roles should be treated as tabbable.

```javascript
{
  'jsx-a11y/interactive-supports-focus': [
    'error',
    {
      tabbable: [
        'button',
        'checkbox',
        'link',
        'searchbox',
        'spinbutton',
        'switch',
        'textbox',
      ],
    },
  ]
}
```

--------------------------------

### Configure anchor-ambiguous-text rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-ambiguous-text.md

Example configuration for the ESLint rule, demonstrating how to provide a custom list of ambiguous words.

```json
{
  "rules": {
    "jsx-a11y/anchor-ambiguous-text": [2, {
      "words": ["click this"]
    }]
  }
}
```

--------------------------------

### Configure img-redundant-alt Rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/img-redundant-alt.md

Example configuration for the ESLint rule, demonstrating how to define custom components and additional forbidden words in the rule options.

```json
{
    "rules": {
        "jsx-a11y/img-redundant-alt": [ 2, {
            "components": [ "Image" ],
            "words": [ "Bild", "Foto" ]
          }]
    }
}
```

--------------------------------

### Configure mouse-events-have-key-events rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/mouse-events-have-key-events.md

Example configuration for the ESLint rule in a JSON format. It demonstrates how to customize hoverInHandlers and hoverOutHandlers to include additional pointer events.

```json
{
  "rules": {
    "jsx-a11y/mouse-events-have-key-events": [
      "error",
      {
        "hoverInHandlers": [
          "onMouseOver",
          "onMouseEnter",
          "onPointerOver",
          "onPointerEnter"
        ],
        "hoverOutHandlers": [
          "onMouseOut",
          "onMouseLeave",
          "onPointerOut",
          "onPointerLeave"
        ]
      }
    ]
  }
}
```

--------------------------------

### JSX Media Element Caption Examples

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/media-has-caption.md

These examples demonstrate correct and incorrect usage of media elements with captions in JSX, according to the jsx-a11y/media-has-caption rule. The 'Succeed' examples show valid implementations, while 'Fail' examples highlight common mistakes.

```jsx
<audio><track kind="captions" {...props} /></audio>
<video><track kind="captions" {...props} /></video>
<video muted {...props} ></video>
```

```jsx
<audio {...props} />
<video {...props} />
```

--------------------------------

### alt-text Rule Examples for ESLint Plugin JSX A11y

Source: https://context7.com/jsx-eslint/eslint-plugin-jsx-a11y/llms.txt

Examples demonstrating the correct and incorrect usage of the 'alt-text' accessibility rule in JSX. It covers images, input elements, and objects, including configuration for custom components.

```jsx
// Valid - Images with proper alt text
<img src="logo.png" alt="Company Logo" />
<img src="user-avatar.jpg" alt={`${userName}'s profile picture`} />
<img src="decorative-border.png" alt="" />  {/* Empty alt for decorative images */}

// Valid - Input images and areas
<input type="image" alt="Submit form" src="submit-btn.png" />
<area alt="Navigate to home" href="/home" />

// Valid - Object with accessible label
<object aria-label="Interactive chart showing sales data" />
<object title="Video player" />
<object>Fallback text description</object>

// Invalid - Missing or improper alt
<img src="photo.jpg" />                    {/* Missing alt */}
<img src="photo.jpg" {...props} />         {/* Spread without explicit alt */}
<img src="icon.png" role="presentation" /> {/* Use alt="" instead of role */}

// Rule configuration with custom components
// .eslintrc.json
{
  "rules": {
    "jsx-a11y/alt-text": ["error", {
      "elements": ["img", "object", "area", "input[type=\"image\"]"],
      "img": ["Image", "Avatar"],
      "object": ["Object"],
      "area": ["Area"],
      "input[type=\"image\"]": ["InputImage"]
    }]
  }
}
```

--------------------------------

### JSX Examples for no-redundant-roles

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-redundant-roles.md

These JSX code snippets illustrate the 'no-redundant-roles' rule. The 'Succeed' examples show valid usage where no redundant roles are present, while the 'Fail' examples demonstrate incorrect usage with redundant ARIA roles.

```jsx
<!-- Succeed -->
<div />
<button role="presentation" />
<MyComponent role="main" />
```

```jsx
<!-- Fail -->
<button role="button" />
<img role="img" src="foo.jpg" />
```

--------------------------------

### Validating recommended rule usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md

An example of an element that is valid under the recommended configuration but would be flagged as invalid under strict rules.

```jsx
<ul role="menu" />
```

--------------------------------

### Accessible anchor tag examples

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-ambiguous-text.md

Examples of anchor tags that pass the rule because they provide descriptive text or use aria-labels correctly.

```jsx
<a>read this tutorial</a>
<a>${here}</a>
<a aria-label="tutorial on using eslint-plugin-jsx-a11y">click here</a>
```

--------------------------------

### Configure jsx-a11y/alt-text rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/alt-text.md

Example of how to configure the rule in your ESLint configuration file, including custom component mapping.

```json
{
    "rules": {
        "jsx-a11y/alt-text": [ 2, {
            "elements": [ "img", "object", "area", "input[type=\"image\"]" ],
            "img": ["Image"],
            "object": ["Object"],
            "area": ["Area"],
            "input[type=\"image\"]": ["InputImage"]
          }],
    }
}
```

--------------------------------

### Examples of Heading Elements with Content (jsx-a11y)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md

These JSX examples illustrate valid heading elements that satisfy the jsx-a11y/heading-has-content rule. They include headings with direct text content, headings with child components, and headings using dangerouslySetInnerHTML.

```jsx
<h1>Heading Content!</h1>
<h1><TextWrapper /></h1>
<h1 dangerouslySetInnerHTML={{ __html: 'foo' }} />
```

--------------------------------

### Examples of passing and failing code

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/alt-text.md

A collection of valid and invalid JSX patterns for elements requiring alternative text.

```jsx
// Succeed
<img src="foo" alt="Foo eating a sandwich." />
<object aria-label="foo" />
<area alt="This is descriptive!" />

// Fail
<img src="foo" />
<img {...props} />
<object {...props} />
```

--------------------------------

### Example of a Label Without Content (jsx-a11y)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md

This JSX example demonstrates a label element without any content, which would be flagged by accessibility rules if it were intended to be a heading or if the rule was misconfigured. It serves as a contrast to valid heading content.

```jsx
function Foo(props) {
  return <label {...props} />
}
```

--------------------------------

### Implement valid anchor navigation

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

Provides examples of valid href attribute usage for anchor tags to ensure proper hyperlink functionality.

```jsx
<a href="/some/valid/uri">Navigate to page</a>
<a href="/some/valid/uri#top">Navigate to page and location</a>
<a href="#top">Navigate to internal page location</a>
```

--------------------------------

### Define custom anchor component

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-has-content.md

Example of a wrapper component that renders an anchor, which can be configured in the ESLint rule to be checked for content.

```javascript
const Anchor = props => {
  return (
    <a {...props}>{ props.children }</a>
  );
}
```

--------------------------------

### Handling Multiple Labels for One Input

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md

Provides an example of how to manage scenarios with multiple labels for a single input, often requiring an eslint override comment for the second label.

```jsx
{/* eslint jsx-a11y/label-has-associated-control: ["error", { assert: "either" } ] */}
<label htmlFor="a">
  Username:
</label>
...
<label htmlFor="a">
  <input id="a" />
</label>
```

--------------------------------

### JSX Label Nesting Example

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md

Demonstrates associating a label with an input by wrapping the input within the label element. This is a simple and effective method for accessibility.

```jsx
<label>
  Surname
  <input type="text" />
</label>
```

--------------------------------

### Valid and Invalid JSX usage for mouse events

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/mouse-events-have-key-events.md

Examples of JSX elements that satisfy or violate the mouse-events-have-key-events rule. Valid examples include both mouse and keyboard handlers, while invalid examples lack the required keyboard event counterparts.

```jsx
// Valid examples
<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } />
<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } />

// Invalid examples
<div onMouseOver={ () => void 0 } />
<div onMouseOut={ () => void 0 } />
```

--------------------------------

### Using Expression Values for Roles

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-tabindex.md

Examples of using dynamic expressions for the role attribute when allowExpressionValues is enabled.

```jsx
<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;
<div role={isButton ? "button" : "link"} onClick={() => {}} tabIndex="0" />;
```

--------------------------------

### Inaccessible anchor tag examples

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-ambiguous-text.md

Examples of anchor tags that fail the rule due to ambiguous text, including cases with nested elements or aria-labels.

```jsx
<a>here</a>
<a>link</a>
<a>click here</a>
<a aria-label="click here">something</a>
<a><img alt="click here"/></a>
```

--------------------------------

### Custom Link Component Example

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

This JavaScript code demonstrates a custom React Link component that wraps a standard `<a>` element. This is useful for configuring the `anchor-is-valid` rule to recognize custom link components.

```javascript
// Link.js
const Link = props => <a {...props}>A link</a>;

... 

// NavBar.js (for example)
...
return (
  <nav>
    <Link href="/home" />
  </nav>
);
```

--------------------------------

### JSX: Failing example - Button without Accessible Label

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md

Demonstrates a button that violates the control-has-associated-label rule because it lacks any form of accessible text label.

```jsx
<button type="button" class="icon-save" />
```

--------------------------------

### Invalid html-has-lang usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/html-has-lang.md

Example of an <html> element that fails the rule due to the missing lang attribute.

```jsx
<html>
```

--------------------------------

### Validate accessible prop passing

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/alt-text.md

Examples of correct and incorrect ways to pass props to components to ensure accessibility requirements are met.

```jsx
// Good: Explicitly destructuring props
function Foo({ alt, ...props}) {
    return <img alt={alt} {...props} />
}

// Bad: Spreading props without explicit accessibility handling
function Foo(props) {
  return <img {...props} />
}
```

--------------------------------

### ESM Configuration for eslint-plugin-jsx-a11y

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

This snippet shows how to import and use the recommended configuration for eslint-plugin-jsx-a11y in an ESM environment. It demonstrates the basic setup for integrating the plugin's recommended rules into your ESLint configuration.

```javascript
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default [
  jsxA11y.flatConfigs.recommended,
  {
    // Your additional configs and overrides
  },
];
```

--------------------------------

### Resolving non-interactive element errors

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md

Examples showing how to correctly nest interactive controls within non-interactive containers or wrap content inside interactive elements to satisfy accessibility requirements.

```jsx
<li>
  <div
    role="button"
    onClick={() => {}}
    onKeyPress={() => {}}>
    Save
  </div>
</li>
```

```jsx
<div
  role="button"
  onClick={() => {}}
  onKeyPress={() => {}}
  tabIndex="0">
  <img src="some/file.png" alt="Save" />
</div>
```

--------------------------------

### ESLint Configuration for jsx-a11y/control-has-associated-label

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md

Provides an example of how to configure the jsx-a11y/control-has-associated-label rule in an ESLint configuration file, including options for label attributes, custom components, ignored elements, and roles.

```json
{
  "rules": {
    "jsx-a11y/control-has-associated-label": [ 2, {
      "labelAttributes": ["label"],
      "controlComponents": ["CustomComponent"],
      "ignoreElements": [
        "audio",
        "canvas",
        "embed",
        "input",
        "textarea",
        "tr",
        "video",
      ],
      "ignoreRoles": [
        "grid",
        "listbox",
        "menu",
        "menubar",
        "radiogroup",
        "row",
        "tablist",
        "toolbar",
        "tree",
        "treegrid",
      ],
      "depth": 3,
    }],
  }
}
```

--------------------------------

### Valid html-has-lang usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/html-has-lang.md

Examples of <html> elements that correctly include a lang attribute, either as a static string or a dynamic expression.

```jsx
<html lang="en">
<html lang="en-US">
<html lang={language}>
```

--------------------------------

### Configure jsx-a11y/no-autofocus rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-autofocus.md

Example configuration for the ESLint rule in a JSON configuration file. The ignoreNonDOM option allows developers to skip checking custom components.

```json
{
    "rules": {
        "jsx-a11y/no-autofocus": [ 2, {
            "ignoreNonDOM": true
        }],
    }
}
```

--------------------------------

### Resolving interactive element role conflicts

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-interactive-element-to-noninteractive-role.md

Examples of how to correctly structure HTML elements by wrapping interactive controls or nesting content to maintain proper ARIA semantics.

```jsx
<div role="article">
  <button>Save</button>
</div>
```

```jsx
<div
  role="button"
  onClick={() => {}}
  onKeyPress={() => {}}
  tabIndex="0">
  <div role="img" aria-label="Save" />
</div>
```

--------------------------------

### Valid and Invalid JSX Usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/img-redundant-alt.md

Examples showing valid JSX implementations, including hidden images and dynamic variables, alongside invalid implementations that trigger the rule.

```jsx
// Valid examples
<img src="foo" alt="Foo eating a sandwich." />
<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
<img src="baz" alt={`Baz taking a ${photo}`} />

// Invalid examples
<img src="foo" alt="Photo of foo being weird." />
<img src="bar" alt="Image of me at a bar!" />
<img src="baz" alt="Picture of baz fixing a bug." />
```

--------------------------------

### Valid JSX click event implementations

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-interactions.md

Examples of JSX elements that satisfy the click-events-have-key-events rule. These include interactive elements like button and input, or elements with appropriate roles and aria attributes.

```jsx
<div onClick={() => void 0} role="button" />
<div onClick={() => void 0} role="presentation" />
<input type="text" onClick={() => void 0} />
<button onClick={() => void 0} className="foo" />
<div onClick={() => void 0} role="button" aria-hidden />
<Input onClick={() => void 0} type="hidden" />
```

--------------------------------

### Custom Label Component with htmlFor Prop

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-for.md

Example of a custom React Label component that correctly passes the htmlFor prop to a native label element, satisfying accessibility rules.

```jsx
// Label.js
const Label = props => {
  const {
    htmlFor,
    ...otherProps
  } = props;

  return (
    <label htmlFor={htmlFor} {...otherProps} />
  );
}

// CreateAccount.js (for example)
...
return (
  <form>
    <input id="firstName" type="text" />
    <Label htmlFor="firstName">First Name</Label>
  </form>
);
```

--------------------------------

### Valid and Invalid autocomplete usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/autocomplete-valid.md

Examples of JSX code showing valid usage of the autocomplete attribute and common patterns that trigger validation failures.

```jsx
<input type="text" autocomplete="name" />
<MyInput autocomplete="incorrect" />
<input type="text" autocomplete="incorrect" />
<input type="email" autocomplete="url" />
```

--------------------------------

### Valid JSX Anchor Tags

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

These JSX examples illustrate anchor tags that satisfy the `anchor-is-valid` rule's criteria, including cases with valid `href` attributes and associated `onClick` handlers.

```jsx
<a href="https://github.com" />
<a href="#section" />
<a href="foo" />
<a href="/foo/bar" />
<a href={someValidPath} />
<a href="https://github.com" onClick={foo} />
<a href="#section" onClick={foo} />
<a href="foo" onClick={foo} />
<a href="/foo/bar" onClick={foo} />
<a href={someValidPath} onClick={foo} />
```

--------------------------------

### Validate ARIA usage on unsupported elements

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-unsupported-elements.md

Examples showing valid and invalid usage of ARIA attributes on the meta element. The rule flags any instance where ARIA properties are applied to elements that do not support them.

```jsx
<meta charset="UTF-8" />
```

```jsx
<meta charset="UTF-8" aria-hidden="false" />
```

--------------------------------

### JSX Examples for aria-role Rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-role.md

Illustrates correct and incorrect usage of ARIA roles in JSX elements according to the jsx-a11y/aria-role rule. It covers valid roles, variable roles, missing roles, and abstract roles.

```jsx
<!-- Succeed -->
<div role="button"></div>     <!-- Good: "button" is a valid ARIA role -->
<div role={role}></div>       <!-- Good: role is a variable & cannot be determined until runtime. -->
<div></div>                   <!-- Good: No ARIA role -->
<Foo role={role}></Foo>       <!-- Good: ignoreNonDOM is set to true -->
```

```jsx
<!-- Fail -->
<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
<div role="range"></div>      <!-- Bad: "range" is an _abstract_ ARIA role -->
<div role=""></div>           <!-- Bad: An empty ARIA role is not allowed -->
<Foo role={role}></Foo>       <!-- Bad: ignoreNonDOM is set to false or not set -->
```

--------------------------------

### JSX tabindex-no-positive Examples

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/tabindex-no-positive.md

Demonstrates correct and incorrect usage of the `tabIndex` property in JSX. The rule enforces that `tabIndex` should not have positive values to maintain a predictable keyboard navigation flow. It accepts `0` and `-1` but rejects any positive integers.

```jsx
<span tabIndex="0">foo</span>
<span tabIndex="-1">bar</span>
<span tabIndex={0}>baz</span>
```

```jsx
<span tabIndex="5">foo</span>
<span tabIndex="3">bar</span>
<span tabIndex="1">baz</span>
<span tabIndex="2">never really sure what goes after baz</span>
```

--------------------------------

### Resolve non-interactive element interactions by using a button inside a heading

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-interactions.md

This example shows how to handle cases where a heading element is used for interactive purposes, such as expanding/collapsing content. It resolves the issue by placing a button element inside the heading, thus retaining the heading's semantic role and adding button semantics.

```jsx
<h3>
  <button onClick={this._expandSection}>News</button>
</h3>
<ul>
  <li>...</li>
</ul>
```

--------------------------------

### Resolve non-interactive element interactions by converting table to ARIA grid

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-interactions.md

This example demonstrates converting a table-like layout into an ARIA grid to handle interactive components within cells. It assigns the 'grid' role to the table and 'gridcell' to the cells, allowing for interactive elements within the grid structure.

```jsx
<table role="grid">
  <tr>
    <td role="gridcell" onClick={this.sort}>Sort</td>
  </tr>
</table>
```

--------------------------------

### Configuring Rule Options

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-tabindex.md

Shows how to configure the rule in the ESLint configuration file, including allowing specific roles like tabpanel and enabling expression values for roles.

```javascript
'jsx-a11y/no-noninteractive-tabindex': [
  'error',
  {
    tags: [],
    roles: ['tabpanel'],
    allowExpressionValues: true,
  },
]
```

--------------------------------

### Implement focusable composite widgets

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/interactive-supports-focus.md

Shows how to manage focus in a group of elements using a mix of tabIndex 0 for the first item and -1 for others, requiring custom keyboard navigation logic.

```jsx
<div role="menu">
  <div role="menuitem" tabIndex="0">Open</div>
  <div role="menuitem" tabIndex="-1">Save</div>
  <div role="menuitem" tabIndex="-1">Close</div>
</div>
```

--------------------------------

### Configuring rule options

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md

Shows how to define custom allowed interactive roles for specific HTML elements within the ESLint configuration file.

```js
{
  'no-noninteractive-element-to-interactive-role': [
    'error',
    {
      ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
      ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
      li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
      table: ['grid'],
      td: ['gridcell'],
    },
  ]
}
```

--------------------------------

### Custom Component Configuration for Labels

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md

Illustrates configuring the rule to recognize custom label and input components. This allows the rule to enforce accessibility for custom UI elements.

```json
{
  "rules": {
    "jsx-a11y/label-has-associated-control": [ 2, {
      "labelComponents": ["CustomInputLabel"],
      "labelAttributes": ["label"],
      "controlComponents": ["CustomInput"],
      "depth": 3,
    }]
  }
}
```

--------------------------------

### Configure anchor-has-content rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-has-content.md

Shows how to enable the rule in an ESLint configuration file and define custom components that should be treated as anchors.

```json
{
    "rules": {
        "jsx-a11y/anchor-has-content": [ 2, {
            "components": [ "Anchor" ]
          }]
    }
}
```

--------------------------------

### Examples of Invalid Heading Elements (jsx-a11y)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md

These JSX examples show invalid heading elements that violate the jsx-a11y/heading-has-content rule. This includes empty heading tags and headings with children that are hidden from screen readers (e.g., using aria-hidden).

```jsx
<h1 />
<h1><TextWrapper aria-hidden />
```

--------------------------------

### Valid Element Patterns

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-tabindex.md

Examples of valid JSX elements that comply with the no-noninteractive-tabindex rule.

```jsx
<div />
<MyButton tabIndex={0} />
<button />
<button tabIndex="0" />
<button tabIndex={0} />
<div />
<div tabIndex="-1" />
<div role="button" tabIndex="0" />
<div role="article" tabIndex="-1" />
<article tabIndex="-1" />
```

--------------------------------

### Configure ESLint with JSX-a11y Plugin (Flat Config)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

Sets up eslint-plugin-jsx-a11y using the flat configuration system in an eslint.config.js file. This includes importing the plugin and specifying rules and language options.

```js
const jsxA11y = require('eslint-plugin-jsx-a11y');

module.exports = [
  ...
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    plugins: {
      'jsx-a11y': jsxA11y,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // ... any rules you want
      'jsx-a11y/alt-text': 'error',
    },
    // ... others are omitted for brevity
  },
  ...
];

// Shareable Configs (CJS)
// const jsxA11y = require('eslint-plugin-jsx-a11y');
// export default [
//   jsxA11y.flatConfigs.recommended,
//   {
//     // Your additional configs and overrides
//   },
// ];
```

--------------------------------

### Scaffold a new rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

Uses the create-rule script to generate the necessary files for a new linting rule in the project.

```bash
./scripts/create-rule.js my-new-rule
```

--------------------------------

### Valid and invalid anchor usage

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-has-content.md

Examples of JSX code that passes or fails the anchor-has-content rule validation.

```jsx
// Succeed
<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />

// Fail
<a />
<a><TextWrapper aria-hidden /></a>
```

--------------------------------

### JSX: Custom Component with Label Prop

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md

Illustrates how a custom component can be configured to be recognized by the rule, allowing it to accept a 'label' prop for accessibility.

```jsx
<CustomInput label="Surname" type="text" value={value} />
```

--------------------------------

### Invalid usage of aria-activedescendant

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-activedescendant-has-tabindex.md

Example of a JSX element that fails the rule because it uses aria-activedescendant without a defined tabIndex.

```jsx
<div aria-activedescendant={someID} />
```

--------------------------------

### Styling a Button to Resemble a Link

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

Shows how to style a button element to visually appear as a link, providing a clickable element that doesn't navigate but can be styled for specific design requirements. This is recommended as a compromise when a link-like appearance is necessary for a non-navigational click target.

```jsx
<button
  type="button"
  className="link-button"
  onClick={() => this.setState({ showSomething: true })}
>
  Press me, I look like a link
</button>
```

```css
.link-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
  margin: 0;
  padding: 0;
}
```

--------------------------------

### Valid Label with Nested Input

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-for.md

A successful example of a label element associated with an input through nesting, meeting the requirements of accessibility guidelines.

```jsx
<label htmlFor="firstName">
  <input type="text" id="firstName" />
  First Name
</label>
```

--------------------------------

### Configuring rule options for table rows

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-interactive-element-to-noninteractive-role.md

Demonstrates how to configure the ESLint rule to allow specific roles on table rows, overriding the default strict behavior.

```js
{
  'no-interactive-element-to-noninteractive-role': [
    'error',
    {
      tr: ['none', 'presentation'],
    },
  ]
}
```

```jsx
<tr role="presentation" />
```

--------------------------------

### Use presentation role for event containers

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/interactive-supports-focus.md

Shows how to use role='presentation' when a container is only used to catch bubbled events from children, signaling it should be ignored by assistive technology.

```jsx
<div
  onClick={onClickHandler}
  role="presentation">
  <button>Save</button>
</div>
```

--------------------------------

### Implement accessible custom image component

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/alt-text.md

Demonstrates how to correctly pass accessibility props through a custom wrapper component to satisfy the alt-text rule.

```jsx
const Image = props => {
  const { alt, ...otherProps } = props;
  return <img alt={alt} {...otherProps} />;
}

return (
  <header>
    <Image alt="Logo" src="logo.jpg" />
  </header>
);
```

--------------------------------

### Valid usage of aria-activedescendant

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-activedescendant-has-tabindex.md

Examples of JSX elements that correctly implement aria-activedescendant by including a tabIndex attribute or using elements that are inherently tabbable.

```jsx
<CustomComponent />
<CustomComponent aria-activedescendant={someID} />
<CustomComponent aria-activedescendant={someID} tabIndex={0} />
<div aria-activedescendant={someID} tabIndex={0} />
<input aria-activedescendant={someID} />
```

--------------------------------

### JSX Label Association - Sibling Input Fail Case

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md

An example where a label and input are siblings, but the label is not correctly associated, causing the rule to fail.

```jsx
<input type="text" />
<label>Surname</label>
```

--------------------------------

### Invalid Label Without Associated Control

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-for.md

An example of a label that fails accessibility checks because it lacks an associated control, either through nesting or the htmlFor attribute.

```jsx
<input type="text" id="firstName" />
<label>First Name</label>
```

--------------------------------

### Valid and Invalid JSX usage for no-autofocus

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-autofocus.md

Examples showing valid JSX elements that do not trigger the rule and invalid elements that violate the accessibility constraint.

```jsx
// Succeed
<div />
<div autoFocus="false" />

// Fail
<div autoFocus />
<div autoFocus="true" />
<div autoFocus={undefined} />
```

--------------------------------

### Configure ESLint with JSX-a11y Plugin (Legacy)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

Configures the eslint-plugin-jsx-a11y in a legacy .eslintrc file by adding it to the plugins section and defining rules. It also shows how to extend recommended or strict configurations.

```json
{
  "plugins": ["jsx-a11y"]
}

{
  "rules": {
    "jsx-a11y/rule-name": 2
  }
}

{
  "extends": ["plugin:jsx-a11y/recommended"]
}
```

--------------------------------

### Rule Options Configuration

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md

Demonstrates the configuration options for the jsx-a11y/label-has-associated-control rule, including custom components, attributes, assertion types, and depth.

```json
{
  "rules": {
    "jsx-a11y/label-has-associated-control": [ 2, {
      "labelComponents": ["CustomLabel"],
      "labelAttributes": ["inputLabel"],
      "controlComponents": ["CustomInput"],
      "assert": "both",
      "depth": 3,
    }]
  }
}
```

--------------------------------

### Accessible Emoji Implementation (JSX)

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/accessible-emoji.md

Demonstrates how to correctly implement emoji in JSX to be accessible by screen readers. This involves using a span with `role="img"` and an `aria-label` or `aria-labelledby` attribute to provide a textual description. This approach ensures that users with visual impairments can understand the emoji's meaning.

```jsx
<span role="img" aria-label="Snowman">☃️</span>
<span role="img" aria-label="Panda">🐼</span>
<span role="img" aria-labelledby="panda1">🐼</span>
```

--------------------------------

### Configure anchor-is-valid Rule Options

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

This JSON configuration shows how to set up the `anchor-is-valid` rule with custom components and aspects. It specifies that 'Link' components should be checked, and particular aspects like 'noHref', 'invalidHref', and 'preferButton' should be enforced.

```json
{
  "rules": {
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight"],
        "aspects": ["noHref", "invalidHref", "preferButton"]
      }
    ]
  }
}
```

--------------------------------

### Invalid JSX click event implementations

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-interactions.md

Examples of JSX elements that fail the click-events-have-key-events rule. These elements are non-interactive and lack the necessary keyboard event handlers or roles to be accessible.

```jsx
<li onClick={() => void 0} />
<div onClick={() => void 0} role="listitem" />
```

--------------------------------

### Invalid JSX Anchor Tags - Missing href

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

These JSX examples demonstrate anchor tags that fail the `noHref` aspect of the `anchor-is-valid` rule because they are missing the required `href` attribute.

```jsx
<a />
<a href={undefined} />
<a href={null} />
```

--------------------------------

### CommonJS Configuration for eslint-plugin-jsx-a11y

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/README.md

This snippet demonstrates how to configure eslint-plugin-jsx-a11y using CommonJS modules. It includes setting up file globs, integrating the recommended configuration, and defining global variables for browser and service worker environments.

```javascript
const jsxA11y = require('eslint-plugin-jsx-a11y');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...jsxA11y.flatConfigs.recommended,
    languageOptions: {
      ...jsxA11y.flatConfigs.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];
```

--------------------------------

### Valid JSX patterns for click-events-have-key-events

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md

Demonstrates valid implementations where an onClick handler is paired with a keyboard event handler, or used on inherently interactive elements like buttons.

```jsx
<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
<button onClick={() => {}} />
<div onClick={() => {}} aria-hidden="true" />
```

--------------------------------

### Configure jsx-a11y/autocomplete-valid rule

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/autocomplete-valid.md

Demonstrates how to configure the rule in an ESLint configuration file. It allows specifying custom input components that should be checked by the rule.

```json
{
    "rules": {
        "jsx-a11y/autocomplete-valid": [ 2, {
            "inputComponents": ["Input", "FormField"]
        }],
    }
}
```

--------------------------------

### Configure jsx-a11y/label-has-for Rule Options

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-for.md

This JSON configuration demonstrates how to set up the jsx-a11y/label-has-for rule with custom options for components, required associations, and child element allowance.

```json
{
    "rules": {
        "jsx-a11y/label-has-for": [ 2, {
            "components": [ "Label" ],
            "required": {
                "every": [ "nesting", "id" ]
            },
            "allowChildren": false
        }]
    }
}
```

--------------------------------

### Invalid JSX Anchor Tags - Invalid href

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md

These JSX examples show anchor tags that violate the `invalidHref` aspect of the `anchor-is-valid` rule due to having invalid or non-navigational `href` attribute values.

```jsx
<a href="#" />
<a href={"#"} />
<a href={`#`} />
<a href="javascript:void(0)" />
<a href={"javascript:void(0)"} />
<a href={`javascript:void(0)`} />
```

--------------------------------

### JSX Example: No Distracting Elements

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-distracting-elements.md

This JSX code snippet demonstrates the 'succeed' case for the jsx-a11y/no-distracting-elements rule. It shows a simple div element, which is considered accessible and does not violate the rule's constraints.

```jsx
<div />
```