or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdrules.mdutilities.md
tile.json

utilities.mddocs/

Utility Functions

Extensive utility library for Vue.js accessibility analysis, providing over 25 functions for element inspection, ARIA validation, template processing, and accessibility determination.

Capabilities

Template Processing Utilities

Core utilities for processing Vue.js templates within ESLint rules.

defineTemplateBodyVisitor

/**
 * Creates a Vue template visitor for ESLint rules
 * Integrates with vue-eslint-parser to process Vue template AST
 * @param context - ESLint rule context
 * @param templateVisitor - Visitor object for template nodes
 * @param scriptVisitor - Optional visitor for script sections
 * @returns Rule listener object
 */
function defineTemplateBodyVisitor(
  context: Rule.RuleContext,
  templateVisitor: TemplateListener,
  scriptVisitor?: Rule.RuleListener
): Rule.RuleListener;

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

Element Analysis Utilities

Functions for analyzing Vue.js template elements and their properties.

Element Type and Classification

/**
 * Gets the element tag name from a Vue element node
 * @param node - Vue element AST node
 * @returns Element tag name in lowercase
 */
function getElementType(node: AST.VElement): string;

/**
 * Checks if element is a custom Vue component
 * @param node - Vue element AST node
 * @returns True if element is a custom component
 */
function isCustomComponent(node: AST.VElement): boolean;

/**
 * Checks if element matches selector criteria
 * @param node - Vue element AST node
 * @param selector - Element selector pattern
 * @returns True if element matches selector
 */
function isMatchingElement(node: AST.VElement, selector: string): boolean;

Interactive Element Detection

/**
 * Checks if element is naturally interactive (button, input, etc.)
 * @param node - Vue element AST node
 * @returns True if element is naturally interactive
 */
function isInteractiveElement(node: AST.VElement): boolean;

/**
 * Checks if element has focusable properties
 * @param node - Vue element AST node
 * @returns True if element can receive focus
 */
function hasFocusableElement(node: AST.VElement): boolean;

/**
 * Gets list of interactive ARIA roles
 * @returns Array of interactive role names
 */
function getInteractiveRoles(): string[];

/**
 * Checks if ARIA role is interactive
 * @param role - ARIA role name
 * @returns True if role is interactive
 */
function isInteractiveRole(role: string): boolean;

Attribute Utilities

Functions for extracting and analyzing element attributes and their values.

Attribute Access

/**
 * Finds specific attribute on element
 * @param node - Vue element AST node
 * @param attributeName - Name of attribute to find
 * @returns Attribute node or null
 */
function getElementAttribute(node: AST.VElement, attributeName: string): AST.VAttribute | null;

/**
 * Gets attribute value from element
 * @param node - Vue element AST node
 * @param attributeName - Name of attribute
 * @returns Attribute value string or null
 */
function getElementAttributeValue(node: AST.VElement, attributeName: string): string | null;

/**
 * Extracts attribute name from AST node
 * @param attribute - Attribute AST node
 * @returns Attribute name string
 */
function getAttributeName(attribute: AST.VAttribute): string;

/**
 * Gets attribute value with expression evaluation
 * @param attribute - Attribute AST node
 * @returns Evaluated attribute value or null
 */
function getAttributeValue(attribute: AST.VAttribute): string | null;

/**
 * Gets literal (non-expression) attribute value
 * @param attribute - Attribute AST node
 * @returns Literal value or null
 */
function getLiteralAttributeValue(attribute: AST.VAttribute): string | null;

Attribute Validation

/**
 * Checks if node is an attribute
 * @param node - AST node to check
 * @returns True if node is attribute
 */
function isAttribute(node: any): node is AST.VAttribute;

Accessibility Analysis Utilities

Functions for determining accessibility properties and compliance.

ARIA and Labeling

/**
 * Checks if element has accessible label via aria-label or aria-labelledby
 * @param node - Vue element AST node
 * @returns True if element has accessible label
 */
function hasAriaLabel(node: AST.VElement): boolean;

/**
 * Checks if element is hidden from screen readers
 * @param node - Vue element AST node
 * @returns True if element is aria-hidden
 */
function isAriaHidden(node: AST.VElement): boolean;

/**
 * Comprehensive screen reader visibility check
 * @param node - Vue element AST node
 * @returns True if element is hidden from screen readers
 */
function isHiddenFromScreenReader(node: AST.VElement): boolean;

/**
 * Checks if element has presentation/none role
 * @param node - Vue element AST node
 * @returns True if element has presentation role
 */
function isPresentationRole(node: AST.VElement): boolean;

/**
 * Checks if element matches specific ARIA role
 * @param node - Vue element AST node
 * @param role - ARIA role to match
 * @returns True if element has matching role
 */
function matchesElementRole(node: AST.VElement, role: string): boolean;

Content Analysis

/**
 * Checks if element has accessible content
 * @param node - Vue element AST node
 * @returns True if element has accessible content
 */
function hasContent(node: AST.VElement): boolean;

/**
 * Checks if element has accessible child content
 * @param node - Vue element AST node
 * @returns True if element has accessible child
 */
function hasAccessibleChild(node: AST.VElement): boolean;

Vue.js Event Utilities

Functions for analyzing Vue.js event directives and handlers.

Event Detection

/**
 * Checks for specific Vue event directive
 * @param node - Vue element AST node
 * @param eventName - Event name to check for
 * @returns True if element has the event directive
 */
function hasOnDirective(node: AST.VElement, eventName: string): boolean;

/**
 * Checks if element has any Vue event directives
 * @param node - Vue element AST node
 * @returns True if element has event directives
 */
function hasOnDirectives(node: AST.VElement): boolean;

Interactive Handlers Data

/**
 * JSON data mapping interactive event handlers
 * Used for determining interactive patterns
 */
const interactiveHandlers: {
  [eventType: string]: boolean;
};

Helper Utilities

Utility functions for string manipulation and URL generation.

String Utilities

/**
 * Converts string to kebab-case
 * @param str - Input string
 * @returns kebab-case formatted string
 */
function makeKebabCase(str: string): string;

Documentation

/**
 * Generates documentation URL for rules
 * @param ruleName - Name of the rule
 * @returns Full documentation URL
 */
function makeDocsURL(ruleName: string): string;

Data Files

Static data used by utility functions for element classification and validation.

/**
 * HTML element definitions and properties
 * Contains semantic information about HTML elements
 */
const htmlElements: {
  [elementName: string]: {
    interactive?: boolean;
    roles?: string[];
    // Additional element metadata
  };
};

/**
 * Interactive event handler mappings
 * Defines which event handlers indicate interactivity
 */
const interactiveHandlers: {
  click: true;
  dblclick: true;
  mousedown: true;
  mouseup: true;
  mouseover: true;
  mouseout: true;
  keydown: true;
  keypress: true;
  keyup: true;
};

Usage Examples

Creating a Custom Rule

import { defineTemplateBodyVisitor, getElementType, hasAriaLabel } from "eslint-plugin-vuejs-accessibility/utils";

const rule: Rule.RuleModule = {
  meta: {
    type: "problem",
    docs: { url: "..." },
    messages: {
      missingLabel: "Interactive element must have accessible label"
    }
  },
  create(context) {
    return defineTemplateBodyVisitor(context, {
      VElement(node) {
        const elementType = getElementType(node);
        if (elementType === "button" && !hasAriaLabel(node)) {
          context.report({ node: node as any, messageId: "missingLabel" });
        }
      }
    });
  }
};

Combining Utilities

function checkInteractiveElement(node: AST.VElement): boolean {
  return isInteractiveElement(node) || 
         hasOnDirectives(node) || 
         isInteractiveRole(getElementAttributeValue(node, "role"));
}