Extensive utility library for Vue.js accessibility analysis, providing over 25 functions for element inspection, ARIA validation, template processing, and accessibility determination.
Core utilities for processing Vue.js templates within ESLint rules.
/**
* 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;
}Functions for analyzing Vue.js template elements and their properties.
/**
* 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;/**
* 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;Functions for extracting and analyzing element attributes and their values.
/**
* 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;/**
* 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;Functions for determining accessibility properties and compliance.
/**
* 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;/**
* 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;Functions for analyzing Vue.js event directives and handlers.
/**
* 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;/**
* JSON data mapping interactive event handlers
* Used for determining interactive patterns
*/
const interactiveHandlers: {
[eventType: string]: boolean;
};Utility functions for string manipulation and URL generation.
/**
* Converts string to kebab-case
* @param str - Input string
* @returns kebab-case formatted string
*/
function makeKebabCase(str: string): string;/**
* Generates documentation URL for rules
* @param ruleName - Name of the rule
* @returns Full documentation URL
*/
function makeDocsURL(ruleName: string): string;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;
};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" });
}
}
});
}
};function checkInteractiveElement(node: AST.VElement): boolean {
return isInteractiveElement(node) ||
hasOnDirectives(node) ||
isInteractiveRole(getElementAttributeValue(node, "role"));
}