tessl/npm-eslint-plugin-vuejs-accessibility

ESLint plugin for checking Vue.js files for accessibility compliance with comprehensive accessibility rules.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration

Name: tessl/npm-eslint-plugin-vuejs-accessibility
Author: tessl

ESLint configuration presets for Vue.js accessibility compliance, supporting both legacy and modern ESLint formats.

Capabilities

Recommended Configuration (Legacy)

Legacy ESLint configuration preset with all accessibility rules enabled at error level.

/**
 * Legacy ESLint configuration preset
 * Compatible with ESLint versions 5-8
 */
interface RecommendedConfig {
  parser: "vue-eslint-parser";
  parserOptions: {
    ecmaVersion: 2020;
    sourceType: "module";
  };
  env: {
    browser: true;
    es6: true;
  };
  plugins: ["vuejs-accessibility"];
  rules: Linter.RulesRecord;
}

Usage:

module.exports = {
  extends: ["plugin:vuejs-accessibility/recommended"]
};

Flat Recommended Configuration

Modern flat ESLint configuration array for ESLint v9+ with proper Vue.js file targeting.

/**
 * Flat ESLint configuration array
 * Compatible with ESLint v9+
 */
interface FlatRecommendedConfig extends Array<FlatConfigObject> {
  0: {
    name: "vuejs-accessibility:setup:base";
    plugins: {
      "vuejs-accessibility": PluginDefinition;
    };
    languageOptions: {
      sourceType: "module";
      globals: Record<string, boolean>;
    };
  };
  1: {
    name: "vuejs-accessibility:setup:with-files-rules-and-parser";
    files: ["*.vue", "**/*.vue"];
    plugins: {
      "vuejs-accessibility": PluginDefinition;
    };
    languageOptions: {
      parser: VueESLintParser;
      sourceType: "module";
      globals: Record<string, boolean>;
    };
    rules: Linter.RulesRecord;
  };
}

Usage:

import vueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  ...vueA11y.configs["flat/recommended"]
];

Rule Configuration

Rule mapping object defining severity levels for all accessibility rules.

/**
 * Rule configuration mapping with severity levels
 */
interface RulesRecord {
  "vuejs-accessibility/alt-text": "error";
  "vuejs-accessibility/anchor-has-content": "error";
  "vuejs-accessibility/aria-props": "error";
  "vuejs-accessibility/aria-role": "error";
  "vuejs-accessibility/aria-unsupported-elements": "error";
  "vuejs-accessibility/click-events-have-key-events": "error";
  "vuejs-accessibility/form-control-has-label": "error";
  "vuejs-accessibility/heading-has-content": "error";
  "vuejs-accessibility/iframe-has-title": "error";
  "vuejs-accessibility/interactive-supports-focus": "error";
  "vuejs-accessibility/label-has-for": "error";
  "vuejs-accessibility/media-has-caption": "error";
  "vuejs-accessibility/mouse-events-have-key-events": "error";
  "vuejs-accessibility/no-access-key": "error";
  "vuejs-accessibility/no-aria-hidden-on-focusable": "error";
  "vuejs-accessibility/no-autofocus": "error";
  "vuejs-accessibility/no-distracting-elements": "error";
  "vuejs-accessibility/no-redundant-roles": "error";
  "vuejs-accessibility/no-role-presentation-on-focusable": "error";
  "vuejs-accessibility/no-static-element-interactions": "error";
  "vuejs-accessibility/role-has-required-aria-props": "error";
  "vuejs-accessibility/tabindex-no-positive": "error";
}

Note: The no-onchange rule exists but is not included in the recommended configuration preset. It can be enabled individually if needed.

Configuration Examples

Custom Rule Selection

module.exports = {
  plugins: ["vuejs-accessibility"],
  rules: {
    // Enable specific rules only
    "vuejs-accessibility/alt-text": "error",
    "vuejs-accessibility/aria-props": "warn",
    "vuejs-accessibility/form-control-has-label": "error",
    
    // Disable specific rules
    "vuejs-accessibility/no-autofocus": "off"
  }
};

Mixed with Other Vue.js Plugins

module.exports = {
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:vuejs-accessibility/recommended"
  ],
  plugins: ["vue", "vuejs-accessibility"]
};

Flat Config with Custom Settings

import vue from "eslint-plugin-vue";
import vueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  ...vue.configs["flat/recommended"],
  ...vueA11y.configs["flat/recommended"],
  {
    files: ["**/*.vue"],
    rules: {
      "vuejs-accessibility/alt-text": "warn",
      "vuejs-accessibility/no-autofocus": "off"
    }
  }
];