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

ESLint Plugin Vue.js Accessibility

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

ESLint Plugin Vue.js Accessibility is a comprehensive ESLint plugin that provides 23 specialized accessibility rules for Vue.js single-file components (.vue files). It helps developers identify and fix accessibility issues in Vue applications, ensuring compliance with web accessibility standards like WCAG and providing comprehensive coverage for ARIA usage, keyboard navigation, form labeling, media captioning, and interactive element accessibility.

Package Information

Package Name: eslint-plugin-vuejs-accessibility
Package Type: npm
Language: TypeScript
Installation: npm install eslint-plugin-vuejs-accessibility

Core Imports

const plugin = require("eslint-plugin-vuejs-accessibility");

For accessing individual rules and configs:

const { rules, configs } = require("eslint-plugin-vuejs-accessibility");

Basic Usage

Legacy ESLint Configuration

module.exports = {
  extends: ["plugin:vuejs-accessibility/recommended"],
  plugins: ["vuejs-accessibility"],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module"
  }
};

Flat ESLint Configuration (ESLint v9+)

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

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

Individual Rule Usage

module.exports = {
  plugins: ["vuejs-accessibility"],
  rules: {
    "vuejs-accessibility/alt-text": "error",
    "vuejs-accessibility/anchor-has-content": "warn",
    "vuejs-accessibility/aria-props": "error"
  }
};

Architecture

The plugin is built around several key components:

Rule System: 23 specialized accessibility rules targeting Vue.js template patterns
Configuration Presets: Pre-configured rule sets for immediate accessibility compliance
Utility Library: 27+ utility functions for accessibility analysis and Vue.js AST processing
Vue Parser Integration: Deep integration with vue-eslint-parser for template analysis
Flat Config Support: Modern ESLint flat configuration format support

Capabilities

Plugin Export

Main plugin export containing rules and configuration presets.

interface PluginExport {
  configs: {
    recommended: Linter.BaseConfig;
    "flat/recommended": Linter.FlatConfig[];
  };
  rules: {
    [ruleName: string]: Rule.RuleModule;
  };
}

Configuration Presets

Pre-configured ESLint settings for immediate accessibility compliance, supporting both legacy and modern ESLint formats.

interface LegacyConfig {
  parser: string;
  parserOptions: {
    ecmaVersion: number;
    sourceType: string;
  };
  env: {
    browser: boolean;
    es6: boolean;
  };
  plugins: string[];
  rules: Linter.RulesRecord;
}

interface FlatConfig {
  name: string;
  files?: string[];
  plugins: {
    [pluginName: string]: PluginDefinition;
  };
  languageOptions: {
    parser?: any;
    sourceType: string;
    globals: Record<string, boolean>;
  };
  rules?: Linter.RulesRecord;
}

Configuration

Accessibility Rules

Comprehensive set of 23 accessibility rules covering ARIA usage, keyboard navigation, form labeling, media accessibility, and interactive elements.

interface Rule {
  meta: {
    type: "problem" | "suggestion" | "layout";
    docs: {
      url: string;
    };
    messages: Record<string, string>;
    schema?: JSONSchema4[];
  };
  create(context: Rule.RuleContext): Rule.RuleListener;
}

Accessibility Rules

Utility Functions

Extensive utility library for Vue.js accessibility analysis including element inspection, ARIA validation, and template processing.

// Template processing
function defineTemplateBodyVisitor(
  context: Rule.RuleContext,
  templateVisitor: TemplateListener,
  scriptVisitor?: Rule.RuleListener
): Rule.RuleListener;

// Element analysis
function hasAriaLabel(node: AST.VElement): boolean;
function isInteractiveElement(node: AST.VElement): boolean;
function isPresentationRole(node: AST.VElement): boolean;

// Attribute utilities
function getElementAttributeValue(node: AST.VElement, attributeName: string): string | null;
function getAttributeValue(attribute: AST.VAttribute): string | null;

Utility Functions

Types

interface TemplateListener extends Rule.NodeListener {
  VAttribute?(node: AST.VAttribute): void;
  VElement?(node: AST.VElement): void;
  VText?(node: AST.VText): void;
}

interface AST {
  VElement: {
    type: "VElement";
    name: string;
    startTag: VStartTag;
    children: VNode[];
    endTag: VEndTag | null;
  };
  VAttribute: {
    type: "VAttribute";
    directive: boolean;
    key: VIdentifier | VDirectiveKey;
    value: VLiteral | VExpressionContainer | null;
  };
}