or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-testing.mdindex.mdplugins-frames.mdrules-reporting.mdutilities.md
tile.json

configuration.mddocs/

Configuration

Configuration management, initialization, and cleanup functions for customizing axe-core behavior, managing rules and checks, and controlling the testing environment.

Capabilities

Configure

Method for configuring axe-core with custom rules, checks, standards, and other settings.

/**
 * Configure axe-core with custom rules, checks, and settings
 * @param spec - Configuration specification object
 */
function configure(spec: Spec): void;

Usage Examples:

// Add custom rule
axe.configure({
  rules: [{
    id: 'custom-rule',
    selector: 'input',
    impact: 'serious',
    tags: ['custom'],
    all: ['custom-check'],
    metadata: {
      description: 'Custom rule description',
      help: 'Custom rule help text'
    }
  }]
});

// Add custom check
axe.configure({
  checks: [{
    id: 'custom-check',
    evaluate: function(node, options) {
      return node.hasAttribute('required');
    },
    metadata: {
      impact: 'serious',
      messages: {
        pass: 'Element has required attribute',
        fail: 'Element missing required attribute'
      }
    }
  }]
});

// Configure locale
axe.configure({
  locale: {
    lang: 'es',
    rules: {
      'color-contrast': {
        description: 'Los elementos deben tener suficiente contraste de color',
        help: 'El contraste de color debe cumplir con las pautas WCAG AA'
      }
    }
  }
});

// Set branding
axe.configure({
  branding: 'my-company'
});

// Disable other rules when adding custom ones
axe.configure({
  rules: [{ id: 'my-rule', selector: 'div' }],
  disableOtherRules: true
});

Setup

Initialize axe-core for commons usage and create virtual tree.

/**
 * Setup axe-core so axe.commons functions can work properly
 * @param node - Root element or document to analyze (defaults to document)
 * @returns Virtual node tree for the specified element
 */
function setup(node?: Element | Document): VirtualNode;

Usage Examples:

// Setup for entire document
const virtualTree = axe.setup();
console.log('Virtual tree created:', virtualTree);

// Setup for specific element
const mainElement = document.getElementById('main');
const virtualMain = axe.setup(mainElement);

// Use commons functions after setup
const role = axe.commons.aria.getRole(virtualMain);
const isVisible = axe.commons.dom.isVisible(virtualMain);

Teardown

Clean up axe-core tree and caches.

/**
 * Clean up axe-core tree and caches
 * Called automatically at end of axe.run, but can be called manually
 */
function teardown(): void;

Usage Examples:

// Manual cleanup after using setup
axe.setup();
// ... use commons functions
axe.teardown(); // Clean up when done

// Teardown is called automatically after run
axe.run().then(results => {
  // teardown() is called automatically here
  console.log('Results processed and cleaned up');
});

Reset

Restore the default axe configuration.

/**
 * Restores the default axe configuration
 * Removes all custom rules, checks, and settings
 */
function reset(): void;

Usage Examples:

// Add custom configuration
axe.configure({
  rules: [{ id: 'custom-rule', selector: 'div' }]
});

// Later, reset to defaults
axe.reset();
console.log('Configuration reset to defaults');

// Check available rules (should be back to defaults)
const defaultRules = axe.getRules();
console.log('Default rules restored:', defaultRules.length);

Types

interface Spec {
  branding?: string | Branding;
  reporter?: 'v1' | 'v2' | 'raw' | 'rawEnv' | 'no-passes' | string | AxeReporter;
  checks?: Check[];
  rules?: Rule[];
  standards?: Standards;
  locale?: Locale;
  disableOtherRules?: boolean;
  axeVersion?: string;
  noHtml?: boolean;
  allowedOrigins?: string[];
}

interface Branding {
  brand?: string;
  application?: string;
}

interface Check {
  id: string;
  evaluate?: string | CheckEvaluateFunction;
  after?: string | CheckAfterFunction;
  options?: any;
  matches?: string;
  enabled?: boolean;
  metadata?: {
    impact?: 'minor' | 'moderate' | 'serious' | 'critical';
    messages?: CheckMessages;
  };
}

interface CheckMessages {
  pass: string | { [key: string]: string };
  fail: string | { [key: string]: string };
  incomplete?: string | { [key: string]: string };
}

type CheckEvaluateFunction = (
  node: Element,
  options: any,
  virtualNode: VirtualNode
) => boolean | undefined | void;

type CheckAfterFunction = (
  results: AfterResult[],
  options: any
) => AfterResult[];

interface AfterResult {
  id: string;
  data?: any;
  relatedNodes: SerialDqElement[];
  result: boolean | undefined;
  node: SerialDqElement;
}

interface Rule {
  id: string;
  selector?: string;
  impact?: 'minor' | 'moderate' | 'serious' | 'critical';
  excludeHidden?: boolean;
  enabled?: boolean;
  pageLevel?: boolean;
  any?: string[];
  all?: string[];
  none?: string[];
  tags?: string[];
  matches?: string | RuleMatchesFunction;
  reviewOnFail?: boolean;
  actIds?: string[];
  metadata?: {
    description?: string;
    help?: string;
    helpUrl?: string;
  };
}

type RuleMatchesFunction = (node: Element, virtualNode: VirtualNode) => boolean;

interface Standards {
  ariaAttrs?: { [key: string]: AriaAttrs };
  ariaRoles?: { [key: string]: AriaRoles };
  htmlElms?: { [key: string]: HtmlElms };
  cssColors?: { [key: string]: number[] };
}

interface AriaAttrs {
  type: 'boolean' | 'nmtoken' | 'nmtokens' | 'idref' | 'idrefs' | 'string' | 'decimal' | 'int';
  values?: string[];
  allowEmpty?: boolean;
  global?: boolean;
  unsupported?: boolean;
}

interface AriaRoles {
  type: 'abstract' | 'widget' | 'structure' | 'landmark' | 'section' | 'link' | 'listitem' | 'img' | 'navigation' | 'note' | 'separator' | 'none' | 'sectionhead';
  requiredContext?: string[];
  requiredOwned?: string[];
  requiredAttrs?: string[];
  allowedAttrs?: string[];
  nameFromContent?: boolean;
  unsupported?: boolean;
}

interface HtmlElms {
  contentTypes?: ('flow' | 'sectioning' | 'heading' | 'phrasing' | 'embedded' | 'interactive')[];
  allowedRoles?: boolean | string[];
  noAriaAttrs?: boolean;
  shadowRoot?: boolean;
  implicitAttrs?: { [key: string]: string };
  namingMethods?: string[];
  variant?: { [key: string]: HtmlElmsVariant };
}

interface HtmlElmsVariant {
  contentTypes?: ('flow' | 'sectioning' | 'heading' | 'phrasing' | 'embedded' | 'interactive')[];
  allowedRoles: boolean | string[];
  noAriaAttrs?: boolean;
  shadowRoot?: boolean;
  implicitAttrs?: { [key: string]: string };
  namingMethods?: string[];
}

interface Locale {
  lang?: string;
  rules?: RuleLocale;
  checks?: CheckLocale;
}

interface RuleLocale {
  [key: string]: {
    description: string;
    help: string;
  };
}

interface CheckLocale {
  [key: string]: CheckMessages;
}

interface VirtualNode {
  actualNode?: Node;
  shadowId?: string;
  children?: VirtualNode[];
  parent?: VirtualNode;
  attr(attr: string): string | null;
  hasAttr(attr: string): boolean;
  props: { [key: string]: any };
  boundingClientRect: DOMRect;
}

interface SerialDqElement {
  source: string;
  nodeIndexes: number[];
  selector: string[];
  xpath: string[];
  ancestry: string[];
}

type AxeReporter<T = any> = (
  rawResults: RawResult[],
  options: RunOptions,
  resolve: (report: T) => void,
  reject: (error: Error) => void
) => void;

interface RawResult {
  id: string;
  result: 'passed' | 'failed' | 'incomplete' | 'inapplicable';
  pageLevel: boolean;
  impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;
  nodes: RawNodeResult[];
  description: string;
  help: string;
  helpUrl: string;
  tags: string[];
}

interface RawNodeResult {
  node: SerialDqElement;
  any: RawCheckResult[];
  all: RawCheckResult[];
  none: RawCheckResult[];
  impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;
  result: 'passed' | 'failed' | 'incomplete';
}

interface RawCheckResult {
  id: string;
  impact: string;
  message: string;
  data: any;
  relatedNodes?: SerialDqElement[];
}

interface RunOptions {
  runOnly?: RunOnly | string[] | string;
  rules?: RuleObject;
  reporter?: string;
  resultTypes?: string[];
  selectors?: boolean;
  ancestry?: boolean;
  xpath?: boolean;
  absolutePaths?: boolean;
  iframes?: boolean;
  elementRef?: boolean;
  frameWaitTime?: number;
  preload?: boolean | PreloadOptions;
  performanceTimer?: boolean;
  pingWaitTime?: number;
}

interface RunOnly {
  type: 'rule' | 'rules' | 'tag' | 'tags';
  values: string[];
}

interface RuleObject {
  [ruleId: string]: {
    enabled: boolean;
  };
}

interface PreloadOptions {
  assets: string[];
  timeout?: number;
}