### Install eslint-plugin-vuejs-accessibility with Yarn, npm, or pnpm

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/index.md

Installs the eslint-plugin-vuejs-accessibility package as a development dependency using different package managers. This plugin helps enforce accessibility standards in Vue.js projects.

```bash
yarn add --dev eslint-plugin-vuejs-accessibility
```

```bash
npm install --save-dev eslint-plugin-vuejs-accessibility
```

```bash
pnpm add -D eslint-plugin-vuejs-accessibility
```

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

### Configure ESLint with Legacy Config (.eslintrc)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/index.md

Configures ESLint using legacy configuration files (.eslintrc.*) for versions prior to ESLint v9. It adds the plugin to the 'plugins' section and specifies rules or extends recommended configurations.

```json
{
  "plugins": ["vuejs-accessibility"]
}
```

```json
{
  "rules": {
    "vuejs-accessibility/rule-name": "error"
  }
}
```

```json
{
  "extends": ["plugin:vuejs-accessibility/recommended"]
}
```

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

### Vue Component Setup with TypeScript

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rule-overview/index.md

This snippet demonstrates the setup of a Vue 3 Single File Component (SFC) using the `<script setup>` syntax with TypeScript. It imports a local component 'RuleTable.vue' which is likely used to display rule information.

```vue
<script setup lang="ts">
import RuleTable from './RuleTable.vue'
</script>

<RuleTable />
```

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

### Vue Template Examples for heading-has-content

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

These Vue.js template examples demonstrate valid and invalid usage of the 'heading-has-content' rule. The 'Succeed' examples show headings with content, including those using v-html and custom directives/components. The 'Fail' examples illustrate empty headings.

```vue
<template>
  <h1>Heading Content!</h1>
  <h1 v-html="msg"></h1>
  <h1 v-myAccessibleDirective="msg"></h1>
  <MyHeading>Heading Content!</MyHeading>
  <h1>
    <MyAccessibleText />
  </h1>
</template>
```

```vue
<template>
  <h1></h1>
  <MyHeading></MyHeading>
</template>
```

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

### Configure ESLint with Flat Config (eslint.config.js)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/index.md

Configures ESLint using the flat configuration file format (eslint.config.js), which is the default in ESLint v9 and available from v8.57.0. It imports the plugin and enables its recommended rules, allowing for custom rule overrides.

```javascript
import pluginVueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...pluginVueA11y.configs["flat/recommended"],
  {
    rules: {
      // override/add rules settings here, such as:
      // "vuejs-accessibility/alt-text": "error"
    }
  }
];
```

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

### Vue.js: Examples of elements with valid alt-text

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

Provides examples of Vue.js template code demonstrating correct usage of alternative text for various elements. This includes images, objects, areas, and input type image elements, showcasing different valid methods for providing accessibility information.

```vue
<template>
  <img src="foo" alt="Foo eating a sandwich." />
  <img src="foo" :alt="altText" />
  <img src="foo" alt="" />

  <object aria-label="foo" />
  <object aria-labelledby="id1" />
  <object>Meaningful description</object>
  <object title="An object" />

  <area aria-label="foo" />
  <area aria-labelledby="id1" />
  <area alt="This is descriptive!" />

  <input type="image" alt="This is descriptive!" />
  <input type="image" aria-label="foo" />
  <input type="image" aria-labelledby="id1" />
</template>
```

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

### Vue Template Examples for anchor-has-content Rule (Fail)

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

These Vue template examples illustrate invalid usage of the 'anchor-has-content' rule, where anchors lack accessible content. This includes empty anchors or anchors with hidden content.

```vue
<template>
  <a />
  <a><TextWrapper aria-hidden /></a>
  <Anchor></Anchor>
</template>
```

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

### Vue Template Examples for anchor-has-content Rule (Succeed)

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

These Vue template examples demonstrate valid usage of the 'anchor-has-content' rule. They show anchors with direct text content, content from child components, and content provided via directives.

```vue
<template>
  <a>Anchor Content!</a>
  <a><TextWrapper /><a>
  <a is="TextWrapper" />
  <a v-text="msg" />
  <a v-html="msg" />
  <a v-myAccessibleDirective="msg" />
  <Anchor>Anchor content</!Anchor>
  <a><my-accessible-text /></a>
</template>
```

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

### Succeeding iframe-has-title Examples (Vue)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/iframe-has-title.md

These Vue.js code examples demonstrate the correct usage of the iframe-has-title rule. An iframe is considered to succeed if it has a non-empty 'title' attribute, either statically defined or dynamically bound to a variable.

```vue
<template>
  <iframe title="This is a unique title" />
  <iframe :title="uniqueTitle" />
</template>
```

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

### HTML: Valid usage of meta tag

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

This example demonstrates a valid HTML meta tag that does not use ARIA attributes. The rule enforces that elements like 'meta' should not have 'role' or 'aria-*' props.

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

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

### Vue Template: Valid form-control-has-label examples

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/form-control-has-label.md

These Vue template examples demonstrate valid implementations of the 'form-control-has-label' rule. They showcase different ways to associate labels with form controls, including implicit labels, aria-label, and aria-labelledby.

```vue
<template>
  <label><input type="text" /></label>
  <input aria-label="test" type="text" />
  <input aria-labelledby="#id" type="text" />
  <label for="id"></label><input aria-labelledby="#id" id="id" />
  <input type="image" />
</template>
```

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

### Failing iframe-has-title Examples (Vue)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/iframe-has-title.md

These Vue.js code examples illustrate scenarios that violate the iframe-has-title rule. An iframe fails if it lacks a 'title' attribute entirely or if the 'title' attribute is present but empty.

```vue
<template>
  <iframe />
  <iframe title="" />
</template>
```

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

### Incorrect Usage: Static Element Without Role (Vue.js)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-static-element-interactions.md

This example shows an incorrect pattern where a `<div>` element has a click event listener but lacks an ARIA `role` or `tabIndex`, making it inaccessible to assistive technologies.

```vue
<template>
  <div @click="() => {}" />
</template>
```

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

### Vue Template: alt-text Rule Examples

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Demonstrates valid and invalid usage of the `alt-text` rule in Vue templates. It covers images, objects, input types, and area elements, showing correct attribute usage for accessibility.

```vue
<template>
  <!-- ✅ Valid: Images with descriptive alt text -->
  <img src="hero.jpg" alt="Team collaborating in modern office space" />
  <img src="avatar.png" :alt="user.name + ' profile picture'" />

  <!-- ✅ Valid: Decorative images with empty alt -->
  <button>
    <img src="icon-save.svg" alt="" />
    Save Document
  </button>

  <!-- ✅ Valid: Object with accessible label -->
  <object type="image/svg+xml" data="chart.svg" aria-label="Q4 Sales Chart" />
  <object type="application/pdf" data="report.pdf">
    Annual Report 2024
  </object>

  <!-- ✅ Valid: Input image and area elements -->
  <input type="image" src="submit.png" alt="Submit form" />
  <area shape="rect" coords="0,0,100,100" href="#section1" alt="Go to Section 1" />

  <!-- ❌ Invalid: Missing alt text -->
  <img src="photo.jpg" />
  <img src="logo.png" role="presentation" />
  <object type="image/png" data="diagram.png" />
  <input type="image" src="button.png" />
</template>

<script>
// Rule configuration with custom components
// .eslintrc.json
{
  "rules": {
    "vuejs-accessibility/alt-text": ["error", {
      "elements": ["img", "object", "area", "input[type=\"image\"]"],
      "img": ["BaseImage", "AppImage"],
      "object": ["EmbeddedObject"]
    }]
  }
}
</script>
```

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

### Complete Recommended ESLint Configuration for Vue Accessibility (JavaScript)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

This JavaScript configuration file demonstrates a comprehensive setup for the `eslint-plugin-vuejs-accessibility`. It includes common customizations for various accessibility rules, such as image alt text, link and heading content, form control labeling, ARIA validation, keyboard navigation, media captions, and general best practices. The configuration is designed to be used with flat ESLint configurations.

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

### Valid Vue.js Code for interactive-supports-focus

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

Provides examples of Vue.js template code that adheres to the `interactive-supports-focus` rule. These include elements with `aria-hidden`, `tabindex="0"`, `tabindex="-1"`, and inherently focusable elements like `<a>` with `href` and `<button>`.

```vue
<template>
  <!-- Good: div with @click attribute is hidden from screen reader -->
  <div aria-hidden @click="() => void 0"></div>

  <!-- Good: span with @click attribute is in the tab order -->
  <span @click="doSomething" tabindex="0" role="button">Click me!</span>

  <!-- Good: span with @click attribute may be focused programmatically -->
  <span @click="doSomething" tabindex="-1" role="menuitem">Click me too!</span>

  <!-- Good: anchor element with href is inherently focusable -->
  <a href="javascript:void(0)" @click="doSomething">Click ALL the things!</a>

  <!-- Good: buttons are inherently focusable -->
  <button @click="doSomething">Click the button</button>
</template>
```

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

### Vue Template - Failing Cases for no-autofocus

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

This Vue.js template illustrates failing cases for the 'no-autofocus' ESLint rule. It includes various examples of using the 'autofocus' attribute directly, with boolean values, or bound to expressions.

```vue
<template>
  <input autofocus="autofocus" />
  <div autofocus />
  <div :autofocus="true" />
  <div :autofocus="false" />
  <div :autofocus="undefined" />
</template>
```

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

### Vue.js template with valid ARIA roles

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

This Vue.js template demonstrates valid usage of the 'aria-role' rule. It includes examples of elements with a valid ARIA role ('button'), a dynamically assigned role, no ARIA role, and a custom component with the 'ignoreNonDOM' option enabled.

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

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

### Vue template with distracting elements

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

This Vue.js template shows an example that violates the no-distracting-elements rule. It includes `<marquee>` and `<blink>` elements, which are flagged by the linter due to their potential accessibility issues.

```vue
<template>
  <marquee />
  <blink />
</template>
```

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

### Vue Template: Invalid form-control-has-label examples

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/form-control-has-label.md

These Vue template examples illustrate invalid implementations that violate the 'form-control-has-label' rule. They show form elements lacking a programmatically associated label.

```vue
<template>
  <input value="1" type="text" />
  <textarea value="1"></textarea>
</template>
```

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

### Vue.js: Examples of elements failing alt-text rule

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

Illustrates Vue.js template code where elements fail the alt-text accessibility rule due to missing or inadequate alternative text. This includes images without alt attributes, objects without descriptions, and input type image elements lacking proper accessibility information.

```vue
<template>
  <img src="foo" />
  <img alt />
  <!-- Has no value -->
  <img src="foo" role="presentation" />
  <!-- Avoid ARIA if it can be achieved without -->
  <img src="foo" role="none" />
  <!-- Avoid ARIA if it can be achieved without -->

  <object />
  <area />
  <input type="image" />
</template>
```

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

### Configure no-distracting-elements rule in ESLint

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

This JSON configuration shows how to enable and customize the no-distracting-elements rule in your ESLint setup. It allows you to specify which HTML elements should be flagged as distracting. This is useful for enforcing accessibility standards by disallowing deprecated or visually disruptive tags.

```json
{
  "rules": {
    "vuejs-accessibility/no-distracting-elements": [
      "error",
      {
        "elements": ["marquee", "blink"]
      }
    ]
  }
}
```

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

### Invalid Vue.js Code for interactive-supports-focus

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

Shows examples of Vue.js template code that violates the `interactive-supports-focus` rule. These include a `<span>` with a click handler and `role="button"` but no `tabindex`, and an `<a>` with a click handler and `role="button"` but no `href`.

```vue
<template>
  <!-- Bad: span with @click attribute has no tabindex -->
  <span @click="submitForm" role="button">Submit</span>

  <!-- Bad: anchor element without href is not focusable -->
  <a @click="showNextPage" role="button">Next page</a>
</template>
```

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

### HTML: Invalid usage of meta tag with ARIA attribute

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

This example shows an invalid HTML meta tag that includes an 'aria-hidden' attribute. The rule flags this as a violation because 'meta' elements do not support ARIA attributes.

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

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

### Add ARIA Role to Interactive Static Element (Vue.js)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-static-element-interactions.md

When a static HTML element like a `div` is used to create an interactive component (e.g., a button), it must be assigned an appropriate ARIA `role` and `tabIndex` to convey its purpose to assistive technologies. This example shows how to add `role="button"` and `tabIndex="0"` to a `div` that has click and keypress handlers.

```vue
<template>
  <div
    @click="onClickHandler"
    @keypress="onKeyPressHandler"
    role="button"
    tabIndex="0"
  >
    Save
  </div>
</template>
```

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

### Vue Template: anchor-has-content Rule Examples

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Illustrates correct and incorrect usage of the `anchor-has-content` rule in Vue templates. It emphasizes the need for accessible content within anchor tags, including text, ARIA attributes, and child elements.

```vue
<template>
  <!-- ✅ Valid: Anchors with text content -->
  <a href="/about">About Us</a>
  <a href="/contact">
    <span>Contact Support</span>
  </a>

  <!-- ✅ Valid: Anchors with ARIA labels -->
  <a href="/profile" aria-label="View your profile">
    <UserIcon />
  </a>
  <a href="#main" aria-labelledby="skip-link-label">Skip to main content</a>

  <!-- ✅ Valid: Anchors with Vue directives providing content -->
  <a href="/page" v-text="linkText" />
  <a href="/html-content" v-html="formattedLink" />

  <!-- ✅ Valid: Image with alt text as anchor content -->
  <a href="/home">
    <img src="logo.png" alt="Company Logo - Return to Home" />
  </a>

  <!-- ❌ Invalid: Empty anchors -->
  <a href="/nowhere" />
  <a href="/hidden"><span aria-hidden="true">Hidden Text</span></a>
  <a href="/empty"></a>
</template>

<script>
// Configuration with custom components and directives
{
  "rules": {
    "vuejs-accessibility/anchor-has-content": ["error", {
      "components": ["RouterLink", "NuxtLink"],
      "accessibleChildren": ["TranslatedText", "Icon"],
      "accessibleDirectives": ["tooltip", "i18n"]
    }]
  }
}
</script>
```

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

### Vue Template: Label with 'for' attribute and nested input (Succeed)

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

A Vue template example demonstrating a successful use of the 'label-has-for' rule. The label uses the 'for' attribute to associate with an input element that has a matching 'id', and the input is also nested within the label.

```vue
<template>
  <label for="name">
    <input type="text" id="name" />
    Name
  </label>
</template>
```

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

### ESLint Configuration for alt-text rule

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

Shows how to configure the vuejs-accessibility/alt-text ESLint rule. This JSON configuration specifies the rule's severity, the elements to check, and custom component mappings for specific elements.

```json
{
  "rules": {
    "vuejs-accessibility/alt-text": [
      "error",
      {
        "elements": ["img", "object", "area", "input[type=\"image\"]"],
        "img": ["Image"],
        "object": ["Object"],
        "area": ["Area"],
        "input[type=\"image\"]": ["ImageInput"]
      }
    ]
  }
}
```

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

### Configure anchor-has-content ESLint Rule Options

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

This JSON configuration object shows how to set up the 'anchor-has-content' rule in ESLint. It allows specifying custom components, accessible child elements, and accessible directives to be recognized by the rule.

```json
{
  "rules": {
    "vuejs-accessibility/anchor-has-content": [
      "error",
      {
        "components": ["Anchor"],
        "accessibleChildren": ["MyAccessibleText"],
        "accessibleDirectives": ["myAccessibleDirective"]
      }
    ]
  }
}
```

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

### ESLint Rule Configuration for interactive-supports-focus

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

Shows how to configure the `interactive-supports-focus` ESLint rule. It accepts an options object with a `tabbable` key, which is an array of ARIA roles that should be considered tabbable.

```json
{
  "vuejs-accessibility/interactive-supports-focus": ["error", {
    "tabbable": [
      "button",
      "checkbox",
      "link",
      "searchbox",
      "spinbutton",
      "switch",
      "textbox"
    ]
  }]
}
```

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

### Correct Usage of Interactive Elements (Vue.js)

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-static-element-interactions.md

This snippet demonstrates correct accessibility patterns. It shows a native `<button>` element, a `<div>` correctly assigned `role="button"` with a click handler, and an `<input>` element, all of which are accessible.

```vue
<template>
  <button @click="() => {}" class="foo" />
  <div class="foo" @click="() => {}" role="button" />
  <input type="text" @click="() => {}" />
</template>
```

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

### Vue Template: Unassociated label and input (Fail)

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

A Vue template example that violates the 'label-has-for' rule. The label is not associated with the input element via the 'for' attribute or nesting, leading to an accessibility issue.

```vue
<template>
  <input type="text" id="name" />
  <label>First Name</label>
</template>
```

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

### Configure heading-has-content Rule

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

This JSON configuration shows how to enable and customize the 'heading-has-content' ESLint rule. It allows specifying custom components, accessible child elements, and directives that should be considered as providing content for headings.

```json
{
  "rules": {
    "vuejs-accessibility/heading-has-content": [
      "error",
      {
        "components": ["MyHeading"],
        "accessibleChildren": ["MyAccessibleText"],
        "accessibleDirectives": ["myAccessibleDirective"]
      }
    ]
  }
}
```

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

### Vue.js: @click with Keyboard Events

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

Demonstrates the correct usage of @click events in Vue.js templates, ensuring they are paired with @keydown, @keyup, or @keypress for accessibility. This rule helps prevent accessibility issues for users who cannot use a mouse.

```vue
<template>
  <div @click="foo" @keydown="bar" />
  <div @click="foo" @keyup="bar" />
  <div @click="foo" @keypress="bar" />
</template>
```

```vue
<template>
  <div @click="foo" />
</template>
```

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

### Ensure ARIA roles have required attributes (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

This rule mandates that elements assigned specific ARIA roles must include all the ARIA attributes that are essential for that role. For example, a `checkbox` role requires `aria-checked`, and a `slider` role requires `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`. This ensures proper communication of state and properties to assistive technologies.

```vue
<template>
  <!-- ✅ Valid: Roles with required attributes -->
  <span
    role="checkbox"
    aria-checked="false"
    aria-labelledby="checkbox-label"
    tabindex="0"
    @click="toggle"
    @keydown.space="toggle"
  />
  <span id="checkbox-label">Accept Terms</span>

  <div
    role="slider"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Volume"
    tabindex="0"
  />

  <div
    role="combobox"
    aria-expanded="false"
    aria-controls="listbox-id"
  >
    <input type="text" aria-autocomplete="list" />
  </div>

  <div
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Upload progress"
  />

  <!-- ❌ Invalid: Missing required attributes -->
  <span role="checkbox" tabindex="0" />  <!-- Missing aria-checked -->
  <div role="slider" aria-valuenow="50" />  <!-- Missing valuemin/valuemax -->
  <div role="combobox" />  <!-- Missing aria-expanded, aria-controls -->
</template>
```

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

### Pair Mouse Events with Key Events (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Ensures that mouse event handlers like `@mouseout` and `@mouseover` are paired with corresponding keyboard event handlers like `@blur` and `@focus`. This improves accessibility for users who navigate with a keyboard.

```vue
<template>
  <!-- ✅ Valid: Mouse events paired with focus events -->
  <div
    @mouseover="showTooltip"
    @mouseout="hideTooltip"
    @focus="showTooltip"
    @blur="hideTooltip"
    tabindex="0"
  >
    Hover or focus for tooltip
  </div>

  <button
    @mouseover="expandPreview"
    @mouseout="collapsePreview"
    @focus="expandPreview"
    @blur="collapsePreview"
  >
    Preview Item
  </button>

  <!-- ❌ Invalid: Mouse-only interactions -->
  <div @mouseover="show" @mouseout="hide">
    Mouse-only tooltip (inaccessible)
  </div>

  <span @mouseover="highlight">Hover highlight only</span>
</template>
```

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

### Configure label-has-for ESLint Rule

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

This JSON configuration snippet shows how to enable and configure the 'label-has-for' ESLint rule. It specifies custom components to check, control components, and the required association methods (nesting and id).

```json
{
  "rules": {
    "vuejs-accessibility/label-has-for": [
      "error",
      {
        "components": ["VLabel"],
        "controlComponents": ["VInput"],
        "required": {
          "every": ["nesting", "id"]
        },
        "allowChildren": false
      }
    ]
  }
}
```

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

### Vue.js: Correct Usage of role="presentation"

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-role-presentation-on-focusable.md

Demonstrates valid Vue.js template code where role="presentation" is correctly applied to non-focusable elements or elements that are not direct focus targets. This ensures decorative content is hidden from screen readers without impacting keyboard navigation.

```vue
<template>
  <button>Press Me</button>
</template>
```

```vue
<template>
  <div role="presentation"><button tabindex="-1">Submit</button></div>
</template>
```

```vue
<template>
    <div role="presentation"><span>Some text</div></div>
</template>
```

```vue
<template>
  <button tabindex="-1" role="presentation">Press</button>
</template>
```

```vue
<template>
  <div role="presentation"><a href="#" tabindex="-1">Link</a></div>
</template>
```

```vue
<template>
  <div role="presentation"><span>Some text</span></div>
</template>
```

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

### Fixing Tabbable Interactive Elements (Vue.js)

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

Demonstrates how to fix elements with interactive ARIA roles that are not tabbable. This involves either replacing them with semantic HTML elements like `<button>` or `<a href>`, or adding `tabindex="0"` to make them focusable via the tab key.

```vue
<template>
  <div role="button" @click="foo" tabindex="0" />
</template>
```

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

### Configure media-has-caption ESLint Rule

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

This JSON configuration snippet shows how to enable and configure the 'media-has-caption' ESLint rule within a Vue.js project. It specifies which custom component tags should be treated as audio, video, or track elements for the purpose of caption checking.

```json
{
  "rules": {
    "vuejs-accessibility/media-has-caption": [
      "error",
      {
        "audio": ["Audio"],
        "video": ["Video"],
        "track": ["Track"]
      }
    ]
  }
}
```

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

### Configure no-redundant-roles rule

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

This JSON configuration snippet shows how to enable and configure the 'no-redundant-roles' ESLint rule for Vue.js projects. It specifies the error level and provides an options object to define allowed implicit ARIA roles for specific HTML elements, such as permitting 'navigation' for the 'nav' tag.

```json
{
  "vuejs-accessibility/no-redundant-roles": [
    "error",
    {
      "nav": ["navigation"]
    }
  ]
}
```

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

### Configure ESLint Plugin Vuejs Accessibility (Legacy Config)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Configures the eslint-plugin-vuejs-accessibility for ESLint versions prior to v9 using the legacy .eslintrc.json format. It extends the recommended plugin configuration and defines specific rules.

```json
{
  "plugins": ["vuejs-accessibility"],
  "extends": ["plugin:vuejs-accessibility/recommended"],
  "rules": {
    "vuejs-accessibility/alt-text": "error",
    "vuejs-accessibility/anchor-has-content": "error",
    "vuejs-accessibility/no-autofocus": "warn"
  }
}
```

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

### Vue: Use @blur instead of @change for select elements

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-onchange.md

Demonstrates the correct usage of the @blur event on select elements for accessibility. This approach avoids unintended event triggers that can occur with @change, particularly when navigating options with arrow keys. It ensures a more predictable user experience for all users, including those relying on keyboard navigation or screen readers.

```vue
<template>
  <select @blur="handleBlur">
    <option />
  </select>

  <select>
    <option @blur="handleBlur" @change="handleChange" />
  </select>
</template>
```

```vue
<template>
  <select @change="handleChange" />
</template>
```

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

### Vue: Enforce Mouse Events Have Key Events

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

This rule ensures that mouse events such as @mouseenter, @mouseover, @mouseout, and @mouseleave are accompanied by corresponding keyboard events like @focus and @blur. This is crucial for users with physical disabilities, AT compatibility, and screen reader users. The rule takes no arguments.

```vue
<template>
  <div @mouseover="foo" @focus="bar" />
  <div @mouseout="foo" @blur="bar" />
</template>
```

```vue
<template>
  <div @mouseover="foo" />
</template>
```

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

### Vue.js: Image with empty alt for decoration

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

Demonstrates how to use an empty alt attribute for decorative images within a button. This prevents screen readers from announcing the image, as it does not convey essential information.

```vue
<template>
  <button>
    <img src="icon.png" alt="" />
    Save
  </button>
</template>
```

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

### Vue Template - Disallow Access Key Attribute

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-access-key.md

This rule checks Vue templates for the presence of the 'accesskey' attribute. It flags any element that uses either a static 'accesskey' prop or a dynamic one bound via `:accesskey`. This helps ensure consistent keyboard navigation for all users.

```vue
<template>
  <div>Stress reliever</div>
</template>
```

```vue
<template>
  <div accesskey="s">Stress reliever</div>
  <div :accesskey="s">Stress reliever</div>
</template>
```

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

### Vue.js: Succeeding tabindex-no-positive Rule

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

Demonstrates correct usage of the tabindex attribute with values of 0 or -1, which are allowed by the tabindex-no-positive ESLint rule. This ensures elements are focusable in the natural tab order or not focusable via keyboard.

```vue
<span tabindex="0">foo</span>
<span tabindex="-1">bar</span>
<span :tabindex="0">baz</span>
```

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

### Vue template with no redundant roles

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

This Vue.js template demonstrates valid usage where no redundant ARIA roles are applied. The `div` element has no explicit role, and the `button` element uses `role="presentation"`, which is often used to remove default button semantics when it's purely decorative or part of a larger interactive component.

```vue
<template>
  <div />
  <button role="presentation" />
</template>
```

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

### ESLint Configuration for form-control-has-label

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/form-control-has-label.md

This JSON snippet shows how to configure the 'form-control-has-label' ESLint rule, including options for custom label and control components. It specifies the rule severity and accepts an object for configuration.

```json
{
  "rules": {
    "vuejs-accessibility/form-control-has-label": [
      "error",
      {
        "labelComponents": ["CustomLabel"],
        "controlComponents": ["CustomInput"]
      }
    ]
  }
}
```

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

### Vue.js: Incorrect Usage of role="presentation"

Source: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/no-role-presentation-on-focusable.md

Illustrates invalid Vue.js template code where role="presentation" is incorrectly applied to focusable elements or their direct descendants. This can lead to accessibility issues for screen reader users and is flagged by the ESLint rule.

```vue
<template>
  <button role="presentation">press me</button>
</template>
```

```vue
<template>
  <a href="#" role="presentation">press me</a>
</template>
```

```vue
<template>
  <div role="presentation">
    <button>press me</button>
  </div>
</template>
```

```vue
<template>
  <span tabindex="0" role="presentation"><em>Icon</em></span>
</template>
```

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

### Vue Template: Media with Captions (Succeed)

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

This Vue.js template demonstrates valid usage of the 'media-has-caption' rule. It includes an audio element with a track, a video element with a track, and a muted video element, all of which satisfy the accessibility requirements for captions.

```vue
<template>
  <audio><track kind="captions" /></audio>
  <video><track kind="captions" /></video>
  <video muted />
</template>
```

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

### Avoid Accesskey Attribute (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Discourages the use of the `accesskey` attribute. This is because its support can be inconsistent across browsers and it may conflict with keyboard shortcuts used by assistive technologies.

```vue
<template>
  <!-- ✅ Valid: No accesskey attribute -->
  <button @click="save">Save (Ctrl+S)</button>
  <a href="/help">Help</a>

  <!-- ❌ Invalid: Using accesskey -->
  <button accesskey="s" @click="save">Save</button>
  <a href="/help" accesskey="h">Help</a>
  <input type="submit" accesskey="enter" value="Submit" />
</template>
```

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

### Vue Template - Succeeding Case for no-autofocus

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

This Vue.js template demonstrates a succeeding case for the 'no-autofocus' ESLint rule. It shows a simple Vue component structure without any elements using the 'autofocus' attribute.

```vue
<template>
  <div />
</template>
```

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

### Configure aria-role rule with ignoreNonDOM option

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

This JSON configuration snippet shows how to enable the 'aria-role' rule in eslint-plugin-vuejs-accessibility and set the 'ignoreNonDOM' option to true. This option allows components that are not direct DOM elements to bypass the ARIA role validation.

```json
{
  "rules": {
    "vuejs-accessibility/aria-role": ["error", { "ignoreNonDOM": true }]
  }
}
```

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

### Prevent presentation role on focusable elements (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

This rule prevents the use of `role="presentation"` or `role="none"` on elements that are focusable. These roles are intended for decorative elements to remove their semantic meaning. Applying them to focusable elements strips away their semantics while retaining keyboard focus, which can be confusing for users relying on assistive technologies.

```vue
<template>
  <!-- ✅ Valid: Presentation role on non-focusable decorative elements -->
  <img src="divider.png" alt="" role="presentation" />
  <div role="presentation">
    <span>Decorative wrapper</span>
  </div>

  <!-- ✅ Valid: Interactive elements without presentation role -->
  <button @click="action">Semantic Button</button>
  <a href="/page">Semantic Link</a>

  <!-- ❌ Invalid: Presentation role on focusable elements -->
  <button role="presentation">Button without semantics</button>
  <a href="/page" role="none">Link without semantics</a>
  <div role="presentation" tabindex="0">Focusable with no role</div>
</template>
```

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

### Ensure Interactive Elements Support Keyboard Focus (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

The `interactive-supports-focus` rule checks that interactive elements, especially those with ARIA roles, have a `tabindex` attribute set to `0` to be focusable via keyboard. It allows configuration to specify which roles should be tabbable by default. This ensures users who rely on keyboard navigation can interact with all necessary elements.

```vue
<template>
  <!-- ✅ Valid: Interactive elements in tab order -->
  <div
    role="button"
    @click="handleClick"
    @keydown.enter="handleClick"
    tabindex="0"
  >
    Custom Button
  </div>

  <span
    role="link"
    @click="navigate"
    tabindex="0"
  >
    Custom Link
  </span>

  <!-- ✅ Valid: Menu items focusable but not tabbable -->
  <div role="menu" @keydown="handleMenuNav">
    <div role="menuitem" tabindex="0" @click="selectOption(1)">Open</div>
    <div role="menuitem" tabindex="-1" @click="selectOption(2)">Save</div>
    <div role="menuitem" tabindex="-1" @click="selectOption(3)">Close</div>
  </div>

  <!-- ✅ Valid: Native interactive elements -->
  <button @click="submit">Submit</button>
  <a href="/page" @click="track">Link</a>

  <!-- ✅ Valid: Hidden from accessibility tree -->
  <div aria-hidden="true" @click="decorativeAction">
    <span>Decorative</span>
  </div>

  <!-- ❌ Invalid: Interactive without focusability -->
  <span @click="action" role="button">Missing tabindex</span>
  <div @click="navigate" role="link">Not focusable</div>
</template>

<script>
// Configure which roles should be tabbable vs just focusable
{
  "rules": {
    "vuejs-accessibility/interactive-supports-focus": ["error", {
      "tabbable": ["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]
    }]
  }
}
</script>
```

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

### Configure ESLint Plugin Vuejs Accessibility (Flat Config)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Configures the eslint-plugin-vuejs-accessibility for ESLint v9+ or v8.57.0+ using the flat config format. It imports the recommended configuration and allows overriding specific rules.

```javascript
import pluginVueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  ...pluginVueA11y.configs["flat/recommended"],
  {
    rules: {
      // Override specific rules
      "vuejs-accessibility/alt-text": "error",
      "vuejs-accessibility/no-autofocus": "warn",
      "vuejs-accessibility/label-has-for": ["error", {
        "required": { "some": ["nesting", "id"] }
      }]
    }
  }
];
```

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

### Vue template with redundant roles (fail)

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

This Vue.js template showcases code that violates the 'no-redundant-roles' rule. The `button` element is explicitly given `role="button"`, which is its default ARIA role. Similarly, the `img` element is given `role="img"`, which is also its implicit role, making these assignments redundant.

```vue
<template>
  <button role="button" />
  <img role="img" src="foo.jpg" />
</template>
```

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

### Vue Template: Media without Captions (Fail)

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

This Vue.js template illustrates cases that would fail the 'media-has-caption' ESLint rule. It shows an audio element and a video element without any associated caption tracks, violating the accessibility requirement.

```vue
<template>
  <audio />
  <video />
</template>
```

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

### Ensure Headings Have Accessible Content (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

The `heading-has-content` rule verifies that all heading elements (`h1` to `h6`) contain accessible text or accessible child components. This is crucial for screen reader users to understand the structure and content of a page. It can be configured to recognize custom components and directives as providing accessible content.

```vue
<template>
  <!-- ✅ Valid: Headings with content -->
  <h1>Welcome to Our Application</h1>
  <h2>{{ sectionTitle }}</h2>
  <h3 v-text="dynamicHeading" />
  <h4 v-html="formattedHeading" />

  <!-- ✅ Valid: Headings with accessible child components -->
  <h2>
    <TranslatedText key="section.title" />
  </h2>
  <h3>
    <Icon name="star" aria-hidden="true" />
    Featured Content
  </h3>

  <!-- ❌ Invalid: Empty headings -->
  <h1></h1>
  <h2 />
  <h3><span aria-hidden="true">Hidden</span></h3>
</template>

<script>
// Configuration for custom heading components
{
  "rules": {
    "vuejs-accessibility/heading-has-content": ["error", {
      "components": ["PageTitle", "SectionHeading"],
      "accessibleChildren": ["TranslatedText", "LocalizedString"],
      "accessibleDirectives": ["t", "i18n"]
    }]
  }
}
</script>
```

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

### Vue.js: Failing tabindex-no-positive Rule

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

Illustrates incorrect usage of the tabindex attribute with positive values (e.g., 1, 2, 3, 5). These values violate the tabindex-no-positive ESLint rule by creating an unnatural keyboard tab order.

```vue
<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>
```

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

### Fixing Focusable Interactive Elements (Vue.js)

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

Illustrates how to fix interactive elements that should be focusable but not necessarily tabbable, such as items within a group or composite widget. This is achieved by setting `tabindex="-1"` and managing focus traversal programmatically.

```vue
<template>
  <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>
</template>
```

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

### Ensure Media Elements Have Captions (Vue)

Source: https://context7.com/vue-a11y/eslint-plugin-vuejs-accessibility/llms.txt

Requires that audio and video elements include a track element with the 'captions' kind for deaf and hard-of-hearing users. This rule can be configured to recognize custom media components.

```vue
<template>
  <!-- ✅ Valid: Video with captions track -->
  <video controls>
    <source src="presentation.mp4" type="video/mp4" />
    <track kind="captions" src="captions-en.vtt" srclang="en" label="English" />
    <track kind="captions" src="captions-es.vtt" srclang="es" label="Spanish" />
  </video>

  <!-- ✅ Valid: Audio with captions -->
  <audio controls>
    <source src="podcast.mp3" type="audio/mpeg" />
    <track kind="captions" src="transcript.vtt" srclang="en" />
  </audio>

  <!-- ✅ Valid: Muted video doesn't require captions -->
  <video autoplay muted loop playsinline>
    <source src="background-animation.mp4" type="video/mp4" />
  </video>

  <!-- ❌ Invalid: Media without captions -->
  <video src="tutorial.mp4" controls />
  <audio src="interview.mp3" controls />
  <video controls>
    <source src="movie.mp4" type="video/mp4" />
    <!-- Missing track element -->
  </video>
</template>

<script>
// Configuration with custom media components
{
  "rules": {
    "vuejs-accessibility/media-has-caption": ["error", {
      "audio": ["AudioPlayer", "PodcastPlayer"],
      "video": ["VideoPlayer", "MediaEmbed"],
      "track": ["CaptionTrack"]
    }]
  }
}
</script>
```

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

### Vue.js template with invalid ARIA roles

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

This Vue.js template illustrates failing cases for the 'aria-role' rule. It shows elements with ARIA roles that are either not valid ('datepicker') or are abstract roles ('range'), which are not permitted by the rule.

```vue
<template>
  <div role="datepicker" /> 
  <!-- Bad: "datepicker" is not an ARIA role -->
  <div role="range" /> 
  <!-- Bad: "range" is an _abstract_ ARIA role -->
</template>
```