oxlint-plugin-vue-sfc-a11y 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Togetic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# oxlint-plugin-vue-sfc-a11y
+
+Vue SFC accessibility rules for [oxlint](https://oxc.rs), as a JS plugin.
+
+oxlint cannot read Vue templates natively ([oxc#15761](https://github.com/oxc-project/oxc/issues/15761)),
+so projects keep ESLint around for `eslint-plugin-vuejs-accessibility`. These rules self-parse the
+SFC with `@vue/compiler-sfc` and walk the real template AST, so the checks run under oxlint instead.
+
+Role and element semantics come from [`aria-query`](https://github.com/A11yance/aria-query) — the
+same data source upstream uses — so the interactive-role and interactive-element sets are identical
+rather than re-derived.
+
+Companion to [`oxlint-plugin-vue-sfc`](https://www.npmjs.com/package/oxlint-plugin-vue-sfc), which
+ports the `eslint-plugin-vue` template rules.
+
+## Install
+
+```bash
+npm i -D oxlint-plugin-vue-sfc-a11y
+```
+
+```jsonc
+{
+    "extends": ["./node_modules/oxlint-plugin-vue-sfc-a11y/configs/recommended.json"]
+}
+```
+
+The npm package is `oxlint-plugin-vue-sfc-a11y` (npm rejects `oxlint-plugin-vue-a11y` as too
+similar to `eslint-plugin-vue-a11y`); the plugin namespace is the shorter `vue-a11y`, so rule ids
+read `vue-a11y/alt-text`. All four rules default to `warn`.
+
+## Rules
+
+| Rule | Default | Description |
+| --- | --- | --- |
+| `vue-a11y/alt-text` | warn | require a text alternative on `img`, `object`, `area`, `input[type="image"]` |
+| `vue-a11y/aria-props` | warn | disallow `aria-*` attributes that are not in the ARIA spec |
+| `vue-a11y/no-static-element-interactions` | warn | disallow interactive handlers on elements with no keyboard path |
+| `vue-a11y/tabindex-no-positive` | warn | disallow positive `tabindex` |
+
+Each is a port of the `vuejs-accessibility/*` rule of the same name, and **defaults to upstream
+behaviour exactly**. Verified against a 1581-SFC production Nuxt codebase: every finding ESLint
+reports, this reports, at identical `line:column`.
+
+## `no-static-element-interactions` has options; upstream has none
+
+Upstream declares `schema: []`. It fires on several shapes that are correct as written, and with no
+options the only lever left is a project-wide warning ceiling — which suppresses genuine findings
+just as readily as false ones.
+
+```jsonc
+"vue-a11y/no-static-element-interactions": ["warn", {
+    "allowDynamicRole": true,
+    "allowSharedHandlerChild": true,
+    "ignoreElements": ["canvas"],
+    "ignoreHandlers": ["mousemove"]
+}]
+```
+
+| Option | Default | What it exempts |
+| --- | --- | --- |
+| `allowDynamicRole` | `false` | `:role="cond ? 'button' : undefined"` — a bound role upstream cannot read, so it treats it as absent |
+| `allowSharedHandlerChild` | `false` | a wrapper whose `@click` expression is also run from a **keyboard** handler on a descendant — the real control inside |
+| `ignoreElements` | `[]` | tag names to skip outright |
+| `ignoreHandlers` | `[]` | handler names that should not count as interactive (`mousemove` is a pointer gesture, not an action) |
+
+### Why `allowSharedHandlerChild` and not "has a focusable child"
+
+The obvious version of that option — skip when the subtree contains anything focusable — is wrong,
+and measurably so. On the codebase this was built against it silenced a real finding: a card whose
+`@click` emitted `expand`, wrapping an unrelated text input. The input is tabbable, so the weak test
+passed it; `expand` still had no keyboard path at all.
+
+The question worth asking is not "is something in here focusable" but "can this action be reached
+from the keyboard". So the option looks for a descendant running **the same handler expression**
+from a keydown/keypress/keyup handler. That clears the genuine proxying wrapper
+(`<div @click="switchValue">` around `<input @keydown.enter="switchValue">`) and leaves the card
+reported. There is a regression test for both.
+
+## Known limitation: diagnostic positions
+
+Template diagnostics render on the `<script>` block, with the true position prepended to the
+message:
+
+```
+Comp.vue:31:1  warning  vue-a11y(no-static-element-interactions): [template 12:5] <div> has an interactive handler...
+```
+
+oxlint gives JS-plugin rules a script-relative view of an SFC, so a template position — negative in
+a template-first file — cannot be expressed.
+[oxc#26001](https://github.com/oxc-project/oxc/pull/26001) fixes this upstream with an
+`actualRange`, and would give every rule here correct positions with no rule changes.
+
+## Tests
+
+```bash
+npm test    # node:test, 54 specs across 4 rules
+```
+
+## License
+
+MIT

package/configs/recommended.json

@@ -0,0 +1,9 @@
+{
+    "jsPlugins": ["../index.mjs"],
+    "rules": {
+        "vue-a11y/alt-text": "warn",
+        "vue-a11y/aria-props": "warn",
+        "vue-a11y/no-static-element-interactions": "warn",
+        "vue-a11y/tabindex-no-positive": "warn"
+    }
+}

package/index.mjs

@@ -0,0 +1,16 @@
+import altTextRule from "./rules/alt-text.mjs";
+import ariaPropsRule from "./rules/aria-props.mjs";
+import noStaticElementInteractionsRule from "./rules/no-static-element-interactions.mjs";
+import tabindexNoPositiveRule from "./rules/tabindex-no-positive.mjs";
+
+const plugin = {
+    meta: { name: "vue-a11y" },
+    rules: {
+        "alt-text": altTextRule,
+        "aria-props": ariaPropsRule,
+        "no-static-element-interactions": noStaticElementInteractionsRule,
+        "tabindex-no-positive": tabindexNoPositiveRule,
+    },
+};
+
+export default plugin;

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "oxlint-plugin-vue-sfc-a11y",
+    "version": "0.1.0",
+    "type": "module",
+    "description": "Vue SFC accessibility rules for oxlint, as a JS plugin. Ports of eslint-plugin-vuejs-accessibility rules, with options upstream does not expose.",
+    "license": "MIT",
+    "keywords": [
+        "oxlint",
+        "oxc",
+        "vue",
+        "sfc",
+        "a11y",
+        "accessibility",
+        "aria",
+        "linter",
+        "nuxt"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Togetic/oxlint-plugin-vue-sfc-a11y.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Togetic/oxlint-plugin-vue-sfc-a11y/issues"
+    },
+    "homepage": "https://github.com/Togetic/oxlint-plugin-vue-sfc-a11y#readme",
+    "author": "Togetic",
+    "exports": {
+        ".": "./index.mjs",
+        "./configs/recommended": "./configs/recommended.json"
+    },
+    "main": "./index.mjs",
+    "files": [
+        "index.mjs",
+        "rules",
+        "!rules/*.spec.mjs",
+        "utils",
+        "configs",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "test": "node --test \"rules/*.spec.mjs\""
+    },
+    "dependencies": {
+        "@vue/compiler-sfc": "^3.5.0",
+        "aria-query": "^5.3.2"
+    },
+    "devDependencies": {
+        "oxc-parser": "^0.90.0",
+        "oxlint": "^1.79.0"
+    },
+    "peerDependencies": {
+        "oxlint": ">=1.0.0"
+    },
+    "engines": {
+        "node": ">=20.19.0"
+    }
+}

package/rules/alt-text.mjs

@@ -0,0 +1,123 @@
+import { NODE_ELEMENT, parseSfc, reportAtFileOffset, walkTemplate } from "../utils/vue-sfc.mjs";
+import {
+    getElementAttribute,
+    getAttributeValue,
+    getElementAttributeValue,
+    getElementType,
+    hasAccessibleChild,
+    hasAriaLabel,
+    isPresentationRole,
+    makeKebabCase,
+} from "../utils/a11y.mjs";
+
+/**
+ * Port of `vuejs-accessibility/alt-text`.
+ *
+ * An image with no text alternative is announced by its filename, or skipped entirely —
+ * either way the content is lost. `alt=""` is a real answer, not a missing one: it marks
+ * the image decorative so it is skipped deliberately.
+ *
+ * Four element shapes, matching upstream:
+ *   img                  needs `alt` (empty string allowed, and preferred over role="presentation")
+ *   object               needs aria-label / aria-labelledby / title / accessible inner content
+ *   area                 needs `alt` or an aria label
+ *   input[type="image"]  needs `alt` or an aria label
+ *
+ * Options mirror upstream: `elements` narrows which shapes are checked, and a per-shape
+ * array maps your own components onto a shape (`{ img: ["CdnImage"] }`).
+ */
+
+const CHECKS = {
+    img(report, el) {
+        const attribute = getElementAttribute(el, "alt");
+        if (!attribute) {
+            report(
+                el,
+                isPresentationRole(el)
+                    ? `Prefer alt="" over role="presentation" — native HTML already expresses "decorative", and the role does not stop the filename being announced everywhere.`
+                    : `<img> needs an alt attribute: meaningful text, or alt="" if it is decorative. Without one the filename gets announced instead.`,
+            );
+            return;
+        }
+        const altValue = getAttributeValue(attribute);
+        if (!altValue && altValue !== "") {
+            report(el, `Invalid alt value for <img>. Use alt="" for a decorative image.`);
+        }
+    },
+    object(report, el) {
+        if (!hasAriaLabel(el) && !getElementAttributeValue(el, "title") && !hasAccessibleChild(el)) {
+            report(el, "Embedded <object> needs a text alternative — inner text, aria-label, or aria-labelledby.");
+        }
+    },
+    area(report, el) {
+        if (!hasAriaLabel(el) && !getElementAttributeValue(el, "alt")) {
+            report(el, "Each <area> of an image map needs a text alternative via alt, aria-label, or aria-labelledby.");
+        }
+    },
+    'input[type="image"]'(report, el) {
+        if (
+            getElementAttributeValue(el, "type") === "image" &&
+            !hasAriaLabel(el) &&
+            !getElementAttributeValue(el, "alt")
+        ) {
+            report(el, `<input type="image"> needs a text alternative via alt, aria-label, or aria-labelledby.`);
+        }
+    },
+};
+
+export default {
+    meta: {
+        type: "problem",
+        docs: { description: "require a text alternative on images", recommended: true },
+        schema: [
+            {
+                type: "object",
+                properties: Object.fromEntries(
+                    ["elements", ...Object.keys(CHECKS)].map((key) => [
+                        key,
+                        { type: "array", items: { type: "string" }, uniqueItems: true },
+                    ]),
+                ),
+                additionalProperties: false,
+            },
+        ],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        const options = context.options?.[0] ?? {};
+        const elements = options.elements ?? Object.keys(CHECKS);
+
+        // tag name -> which check to run. `input[type="image"]` is keyed by its bare tag.
+        const elementTypes = {};
+        for (const element of elements) {
+            const key = element === 'input[type="image"]' ? "input" : element;
+            elementTypes[key] = element;
+            for (const matched of options[element] ?? []) {
+                elementTypes[makeKebabCase(matched)] = element;
+            }
+        }
+
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                const report = (el, message) =>
+                    reportAtFileOffset(context, entry, el.loc.start.offset, el.loc.end.offset, message);
+
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT) {
+                        return;
+                    }
+                    const check = CHECKS[elementTypes[getElementType(node)]];
+                    check?.(report, node);
+                });
+            },
+        };
+    },
+};

package/rules/aria-props.mjs

@@ -0,0 +1,67 @@
+import { NODE_ELEMENT, PROP_ATTRIBUTE, PROP_DIRECTIVE, parseSfc, reportAtFileOffset, walkTemplate } from "../utils/vue-sfc.mjs";
+import { isValidAriaAttribute } from "../utils/a11y.mjs";
+
+/** @vue/compiler-dom NodeTypes.SIMPLE_EXPRESSION */
+const SIMPLE_EXPRESSION = 4;
+
+/**
+ * Port of `vuejs-accessibility/aria-props`.
+ *
+ * An `aria-*` attribute that is not in the ARIA spec does nothing — it is not a hint that
+ * assistive technology ignores gracefully, it is simply absent, so the intended semantics
+ * never reach the accessibility tree. Almost always a typo (`aria-labelledBy`,
+ * `aria-require`). The valid set comes from `aria-query`, the same source upstream uses.
+ *
+ * Both static (`aria-labell="x"`) and bound (`:aria-labell="x"`) forms are checked; the
+ * NAME is what matters, so the value never needs evaluating.
+ */
+export default {
+    meta: {
+        type: "problem",
+        docs: { description: "disallow invalid `aria-*` attributes", recommended: true },
+        schema: [],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT) {
+                        return;
+                    }
+                    for (const prop of node.props ?? []) {
+                        let name = null;
+                        if (prop.type === PROP_ATTRIBUTE) {
+                            name = prop.name;
+                        } else if (
+                            prop.type === PROP_DIRECTIVE &&
+                            prop.name === "bind" &&
+                            prop.arg?.type === SIMPLE_EXPRESSION &&
+                            prop.arg.isStatic !== false
+                        ) {
+                            name = prop.arg.content;
+                        }
+                        const lowered = name?.toLowerCase();
+                        if (lowered?.startsWith("aria-") && !isValidAriaAttribute(lowered)) {
+                            reportAtFileOffset(
+                                context,
+                                entry,
+                                prop.loc.start.offset,
+                                prop.loc.end.offset,
+                                `\`${name}\` is not an ARIA attribute, so it reaches the accessibility tree as nothing at all. Check the spelling against the ARIA spec.`,
+                            );
+                        }
+                    }
+                });
+            },
+        };
+    },
+};

package/rules/no-static-element-interactions.mjs

@@ -0,0 +1,169 @@
+import { NODE_ELEMENT, parseSfc, reportAtFileOffset, walkTemplate } from "../utils/vue-sfc.mjs";
+import {
+    INTERACTIVE_HANDLERS,
+    getElementAttribute,
+    getElementAttributeValue,
+    getElementType,
+    hasOnDirectives,
+    isCustomComponent,
+    isHiddenFromScreenReader,
+    isInteractiveElement,
+    isInteractiveRole,
+    isPresentationRole,
+} from "../utils/a11y.mjs";
+
+/**
+ * Port of `vuejs-accessibility/no-static-element-interactions`.
+ *
+ * A `<div @click>` is reachable with a mouse and invisible to a keyboard: it takes no focus,
+ * so there is no way to tab to it and no key that activates it. Either use the element that
+ * already means "activate me" (`<button>`), or give this one a role and a tab stop.
+ *
+ * WHY THIS PORT EXISTS. Upstream declares `schema: []` — no options at all — and fires on
+ * several shapes that are correct as written: a wrapper whose click proxies to a real control
+ * inside (adding role/tabindex there would double the tab stops), a `<label>` that delegates
+ * its semantics to the input it wraps, a pointer-only overlay, and an element whose `:role` is
+ * bound so upstream cannot read it and treats it as absent. With no way to express any of
+ * that, the only lever left is a project-wide warning ceiling, which suppresses genuine
+ * findings just as readily as false ones.
+ *
+ * The four options below name those shapes. Every one DEFAULTS TO UPSTREAM BEHAVIOUR, so the
+ * rule is byte-for-byte upstream until a project opts in.
+ *
+ *   allowSharedHandlerChild
+ *                         skip when a descendant carries a KEYBOARD handler running the same
+ *                         expression as this element's interactive handler — the proxying
+ *                         wrapper, where the click and the keyboard path invoke one function.
+ *                         Deliberately NOT "contains something focusable": measured on a
+ *                         1581-SFC codebase, that weaker test silenced a real finding (a card
+ *                         whose @click emitted `expand`, containing an unrelated text input —
+ *                         tabbable, but with no way to trigger `expand`).
+ *   allowDynamicRole      skip when `role` is bound (`:role="x"`) and so cannot be read
+ *                         statically. Upstream treats an unreadable role as no role at all.
+ *   ignoreElements        tag names to skip outright (e.g. a pointer-only `canvas` overlay).
+ *   ignoreHandlers        handler names that should not count as "interactive". A `mousemove`
+ *                         is a pointer gesture, not an action a keyboard user can be expected
+ *                         to invoke; `click` is.
+ */
+/** Expressions bound to this element's interactive (pointer) handlers. */
+function pointerHandlerExpressions(el, handlers) {
+    const found = new Set();
+    for (const prop of el.props ?? []) {
+        if (prop.type === 7 && prop.name === "on" && prop.arg?.content && prop.exp?.content) {
+            if (handlers.includes(prop.arg.content)) {
+                found.add(prop.exp.content.trim());
+            }
+        }
+    }
+    return found;
+}
+
+const KEYBOARD_HANDLERS = ["keydown", "keypress", "keyup"];
+
+/**
+ * Does some descendant run one of this element's pointer-handler expressions from a KEYBOARD
+ * handler? That is the proxying wrapper: the click is a convenience, and the real control
+ * inside is what a keyboard user reaches and activates.
+ */
+function hasDescendantSharingHandler(el, handlers) {
+    const expressions = pointerHandlerExpressions(el, handlers);
+    if (!expressions.size) {
+        return false;
+    }
+    const walk = (node) =>
+        (node.children ?? []).some((child) => {
+            if (child.type !== NODE_ELEMENT) {
+                return false;
+            }
+            const keyed = child.props?.some(
+                (p) =>
+                    p.type === 7 &&
+                    p.name === "on" &&
+                    KEYBOARD_HANDLERS.includes(p.arg?.content) &&
+                    expressions.has(p.exp?.content?.trim()),
+            );
+            return keyed || walk(child);
+        });
+    return walk(el);
+}
+
+export default {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "disallow interactive handlers on non-interactive elements",
+            recommended: true,
+        },
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    allowSharedHandlerChild: { type: "boolean" },
+                    allowDynamicRole: { type: "boolean" },
+                    ignoreElements: { type: "array", items: { type: "string" }, uniqueItems: true },
+                    ignoreHandlers: { type: "array", items: { type: "string" }, uniqueItems: true },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        const {
+            allowSharedHandlerChild = false,
+            allowDynamicRole = false,
+            ignoreElements = [],
+            ignoreHandlers = [],
+        } = context.options?.[0] ?? {};
+
+        const ignoredElements = new Set(ignoreElements);
+        const handlers = ignoreHandlers.length
+            ? INTERACTIVE_HANDLERS.filter((name) => !ignoreHandlers.includes(name))
+            : INTERACTIVE_HANDLERS;
+
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT) {
+                        return;
+                    }
+                    if (isCustomComponent(node) || isHiddenFromScreenReader(node) || isPresentationRole(node)) {
+                        return;
+                    }
+                    if (ignoredElements.has(getElementType(node))) {
+                        return;
+                    }
+
+                    const roleProp = getElementAttribute(node, "role");
+                    const role = getElementAttributeValue(node, "role");
+                    if (allowDynamicRole && roleProp && typeof role !== "string") {
+                        return;
+                    }
+
+                    if (!hasOnDirectives(node, handlers) || isInteractiveElement(node) || isInteractiveRole(role)) {
+                        return;
+                    }
+                    if (allowSharedHandlerChild && hasDescendantSharingHandler(node, handlers)) {
+                        return;
+                    }
+
+                    reportAtFileOffset(
+                        context,
+                        entry,
+                        node.loc.start.offset,
+                        node.loc.end.offset,
+                        `<${node.tag}> has an interactive handler but takes no keyboard focus, so it can only be operated with a pointer. Use a <button>, or add a role and a tab stop.`,
+                    );
+                });
+            },
+        };
+    },
+};

package/rules/tabindex-no-positive.mjs

@@ -0,0 +1,51 @@
+import { NODE_ELEMENT, parseSfc, reportAtFileOffset, walkTemplate } from "../utils/vue-sfc.mjs";
+import { getLiteralAttributeValue } from "../utils/a11y.mjs";
+
+/**
+ * Port of `vuejs-accessibility/tabindex-no-positive`.
+ *
+ * A positive tabindex pulls the element out of document order into its own priority tier
+ * ahead of every natural tab stop, so it reorders the whole page's keyboard path, not just
+ * this element. `0` (focusable, in order) or `-1` (programmatic focus only) are the usable
+ * values.
+ *
+ * Only STATICALLY knowable values are judged — `tabindex="1"` and `:tabindex="1"`, but not
+ * `:tabindex="n"`. That matches upstream, which reads only literal bound expressions.
+ */
+export default {
+    meta: {
+        type: "problem",
+        docs: { description: "disallow positive `tabindex` values", recommended: true },
+        schema: [],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT) {
+                        return;
+                    }
+                    const tabIndex = getLiteralAttributeValue(node, "tabindex");
+                    if ((typeof tabIndex === "string" || typeof tabIndex === "number") && Number(tabIndex) > 0) {
+                        reportAtFileOffset(
+                            context,
+                            entry,
+                            node.loc.start.offset,
+                            node.loc.end.offset,
+                            `tabindex="${tabIndex}" moves this element ahead of every natural tab stop and reorders the page's keyboard path. Use 0 to make it focusable in document order, or -1 for programmatic focus only.`,
+                        );
+                    }
+                });
+            },
+        };
+    },
+};

package/utils/a11y.mjs

@@ -0,0 +1,225 @@
+import ariaQuery from "aria-query";
+
+import { ELEMENT_COMPONENT, NODE_ELEMENT, NODE_TEXT, PROP_ATTRIBUTE, PROP_DIRECTIVE } from "./vue-sfc.mjs";
+
+const { aria, dom, elementRoles, roles } = ariaQuery;
+
+/** @vue/compiler-dom NodeTypes.SIMPLE_EXPRESSION */
+const SIMPLE_EXPRESSION = 4;
+
+/**
+ * Accessibility helpers, ported from eslint-plugin-vuejs-accessibility's `utils/`.
+ *
+ * Upstream reads vue-eslint-parser's VElement AST (`node.startTag.attributes`, with
+ * `attribute.directive` / `attribute.key.name.name === "bind"`). We read @vue/compiler-sfc's
+ * template AST instead, so every attribute accessor below re-expresses the same question
+ * against `el.props` — a static ATTRIBUTE prop, or a DIRECTIVE prop named "bind" whose
+ * static argument is the attribute name (`:role` / `v-bind:role`).
+ *
+ * The role/element semantics come from `aria-query`, the same data source upstream uses, so
+ * the interactive-role and interactive-element sets are identical rather than re-derived.
+ */
+
+const LITERALS = new Map([
+    ["true", true],
+    ["false", false],
+    ["null", null],
+]);
+
+/**
+ * Value of a bound expression when it is a plain JS literal (`:tabindex="1"`, `:alt="''"`).
+ * Returns `undefined` for anything that needs runtime evaluation. Mirrors upstream's
+ * `expression.type === "Literal"` check, which is the only bound form it reads a value from.
+ */
+function parseLiteral(source) {
+    const text = (source ?? "").trim();
+    if (LITERALS.has(text)) {
+        return LITERALS.get(text);
+    }
+    if (/^-?\d+(\.\d+)?$/.test(text)) {
+        return Number(text);
+    }
+    const quoted = /^(['"])(.*)\1$/s.exec(text);
+    return quoted ? quoted[2] : undefined;
+}
+
+const isBindOf = (prop, name) =>
+    prop.type === PROP_DIRECTIVE &&
+    prop.name === "bind" &&
+    prop.arg?.type === SIMPLE_EXPRESSION &&
+    prop.arg.isStatic !== false &&
+    prop.arg.content === name;
+
+/** The attribute node named `name`, static (`role=`) or bound (`:role=`). */
+export function getElementAttribute(el, name) {
+    return el.props?.find((p) => (p.type === PROP_ATTRIBUTE && p.name === name) || isBindOf(p, name)) ?? null;
+}
+
+/**
+ * Attribute value. A static attribute yields its string; a bound literal yields the literal.
+ * A bound expression yields the EXPRESSION NODE — opaque but truthy, which is exactly how
+ * upstream signals "a value is present but not statically knowable" (its comment calls this a
+ * placeholder). Callers that compare against a string therefore correctly decline to match.
+ */
+export function getAttributeValue(prop) {
+    if (!prop) {
+        return null;
+    }
+    if (prop.type === PROP_ATTRIBUTE) {
+        return prop.value ? prop.value.content : null;
+    }
+    if (!prop.exp) {
+        return null;
+    }
+    const literal = parseLiteral(prop.exp.content);
+    return literal === undefined ? prop.exp : literal;
+}
+
+export const getElementAttributeValue = (el, name) => getAttributeValue(getElementAttribute(el, name));
+
+/** Only statically knowable values — a bound non-literal yields null, never a placeholder. */
+export function getLiteralAttributeValue(el, name) {
+    const prop = getElementAttribute(el, name);
+    if (!prop) {
+        return null;
+    }
+    const value = getAttributeValue(prop);
+    return typeof value === "object" && value !== null ? null : value;
+}
+
+export const makeKebabCase = (text) =>
+    text.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+
+/** Kebab-cased tag name, or the `is` value when it resolves to a string. */
+export function getElementType(el) {
+    const is = getElementAttributeValue(el, "is");
+    return makeKebabCase(typeof is === "string" ? is : el.tag);
+}
+
+export const isCustomComponent = (el) =>
+    el.tagType === ELEMENT_COMPONENT || Boolean(getElementAttribute(el, "is"));
+
+export function isPresentationRole(el) {
+    const role = getElementAttributeValue(el, "role");
+    return role === "presentation" || role === "none";
+}
+
+export function isHiddenFromScreenReader(el) {
+    const prop = getElementAttribute(el, "aria-hidden");
+    if (!prop) {
+        return false;
+    }
+    return String(getAttributeValue(prop) ?? "") !== "false";
+}
+
+export const hasAriaLabel = (el) =>
+    Boolean(getElementAttributeValue(el, "aria-label") || getElementAttributeValue(el, "aria-labelledby"));
+
+export function hasAccessibleChild(el, accessibleChildTypes = []) {
+    return (el.children ?? []).some((child) => {
+        if (child.type === NODE_TEXT) {
+            return child.content.trim().length > 0;
+        }
+        if (child.type !== NODE_ELEMENT) {
+            return false;
+        }
+        return (
+            accessibleChildTypes.includes(getElementType(child)) ||
+            child.tag === "slot" ||
+            (!isHiddenFromScreenReader(child) && hasAccessibleChild(child, accessibleChildTypes))
+        );
+    });
+}
+
+/** Event names that imply the element is meant to be operated by the user. */
+export const INTERACTIVE_HANDLERS = [
+    "click", "contextmenu", "dblclick", "doubleclick",
+    "drag", "dragend", "dragenter", "dragexit", "dragleave", "dragover", "dragstart", "drop",
+    "keydown", "keypress", "keyup",
+    "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup",
+];
+
+/** `@click="fn"` / `v-on:click="..."` — must carry an expression, as upstream requires. */
+export const hasOnDirective = (el, name) =>
+    Boolean(
+        el.props?.some(
+            (p) =>
+                p.type === PROP_DIRECTIVE &&
+                p.name === "on" &&
+                p.arg?.type === SIMPLE_EXPRESSION &&
+                p.arg.isStatic !== false &&
+                p.arg.content === name &&
+                p.exp?.content,
+        ),
+    );
+
+export const hasOnDirectives = (el, names) => names.some((name) => hasOnDirective(el, name));
+
+const interactiveRoles = new Set(["toolbar"]);
+for (const [name, definition] of roles.entries()) {
+    if (!definition.abstract && definition.superClass.some((classes) => classes.includes("widget"))) {
+        interactiveRoles.add(name);
+    }
+}
+
+const interactiveElements = [{ name: "input" }];
+for (const [element, names] of elementRoles.entries()) {
+    if ([...names].some((name) => interactiveRoles.has(name))) {
+        interactiveElements.push(element);
+    }
+}
+
+export function isInteractiveRole(value) {
+    if (typeof value !== "string") {
+        return false;
+    }
+    return value
+        .toLowerCase()
+        .split(" ")
+        .some((role) => roles.has(role) && interactiveRoles.has(role));
+}
+
+function matchesElementRole(el, elementRole) {
+    const { name, attributes } = elementRole;
+    if (name !== getElementType(el)) {
+        return false;
+    }
+    return (attributes ?? []).every((attribute) => {
+        const value = getElementAttributeValue(el, attribute.name);
+        if (attribute.value !== undefined) {
+            return value === attribute.value;
+        }
+        const constraint = attribute.constraints?.[0];
+        if (constraint === "set") {
+            return Boolean(value);
+        }
+        if (constraint === "undefined") {
+            return !value;
+        }
+        return Boolean(value);
+    });
+}
+
+export function isInteractiveElement(el) {
+    if (!dom.has(getElementType(el))) {
+        return false;
+    }
+    return interactiveElements.some((elementRole) => matchesElementRole(el, elementRole));
+}
+
+/**
+ * Does this subtree already contain something keyboard-reachable? Upstream ships this helper
+ * but does NOT use it in `no-static-element-interactions`; our `allowFocusableChild` option does.
+ */
+export function hasFocusableElement(el) {
+    const tabindex = getElementAttributeValue(el, "tabindex");
+    if (isInteractiveElement(el)) {
+        return String(tabindex) !== "-1";
+    }
+    if (tabindex !== null && String(tabindex) !== "-1") {
+        return true;
+    }
+    return (el.children ?? []).some((child) => child.type === NODE_ELEMENT && hasFocusableElement(child));
+}
+
+export const isValidAriaAttribute = (name) => aria.has(name);

package/utils/vue-sfc.mjs

@@ -0,0 +1,202 @@
+import fs from "node:fs";
+
+import { parse } from "@vue/compiler-sfc";
+
+/**
+ * Helpers for writing oxlint JS-plugin rules against the Vue TEMPLATE AST.
+ *
+ * oxlint parses only the script block of an SFC and gives JS-plugin rules a
+ * script-only view: `context.sourceCode.text` is the script content and
+ * line/column locations passed to `context.report()` are validated against the
+ * script's line count (template lines are rejected with a RangeError).
+ *
+ * Two empirically verified escape hatches make template rules possible anyway:
+ * 1. `fs.readFileSync(context.filename)` works inside the sidecar, so a rule
+ *    can parse the FULL SFC with @vue/compiler-sfc.
+ * 2. `context.report({ node: { range: [start, end] } })` accepts raw
+ *    script-relative byte offsets WITHOUT line validation and maps them to
+ *    file positions by adding the script block's offset. A template offset is
+ *    therefore reachable only as `fileOffset - scriptStartOffset` when that is
+ *    >= 0 — i.e. when <script> precedes <template>.
+ *
+ * THIS REPO IS ENTIRELY THE OPPOSITE: every SFC is template-first (verified:
+ * 1414 template-first, 0 script-first), so template offsets are always
+ * NEGATIVE. oxlint rejects negative ranges (and rejects line/column that fall
+ * outside the script block), so a template diagnostic CANNOT be rendered on
+ * its real template line — the code frame always falls back to the script
+ * block's first line (see reportAtFileOffset). This is an inherent limit of
+ * oxlint's script-only JS-plugin view of .vue files, not a bug we can fix
+ * here; we surface the true template line:column in the message text instead.
+ */
+
+// One parse per file per lint run, shared across rules (module state lives for
+// the lifetime of oxlint's JS-plugin sidecar process).
+const cache = new Map();
+
+export function parseSfc(filename) {
+    let entry = cache.get(filename);
+    if (!entry) {
+        const text = fs.readFileSync(filename, "utf8");
+        const { descriptor, errors } = parse(text, { filename });
+        entry = { text, descriptor, errors };
+        cache.set(filename, entry);
+    }
+    return entry;
+}
+
+/** Script block content start offset in the file (script setup preferred). */
+export function scriptStartOffset(descriptor) {
+    const block = descriptor.scriptSetup ?? descriptor.script;
+    return block ? block.loc.start.offset : 0;
+}
+
+/**
+ * Report a diagnostic at an absolute FILE offset range by translating it into
+ * the script-relative range oxlint expects. Template positions BEFORE the
+ * script block can't be represented as ranges (negative offsets) — the norm in
+ * this template-first repo — so those fall back to the script block's first
+ * line with the real template line:column PREPENDED to the message, so the
+ * editor's problem list and the CLI still point you at the right place even
+ * though the squiggle is stuck on the script block.
+ */
+export function reportAtFileOffset(context, entry, fileStart, fileEnd, message) {
+    const base = scriptStartOffset(entry.descriptor);
+    const start = fileStart - base;
+    if (start >= 0) {
+        context.report({
+            node: { type: "TemplateDiagnostic", range: [start, fileEnd - base] },
+            message,
+        });
+        return;
+    }
+    const before = entry.text.slice(0, fileStart);
+    const line = before.split("\n").length;
+    const column = fileStart - (before.lastIndexOf("\n") + 1) + 1;
+    context.report({
+        node: { type: "TemplateDiagnostic", range: [0, 1] },
+        message: `[template ${line}:${column}] ${message}`,
+    });
+}
+
+/** Depth-first walk over @vue/compiler-dom template AST element nodes. */
+export function walkTemplate(node, visit) {
+    if (!node) {
+        return;
+    }
+    visit(node);
+    if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+            walkTemplate(child, visit);
+        }
+    }
+    // v-if/v-else chains parsed standalone keep branches as siblings, but walk
+    // branches too in case a transformed AST is ever passed in.
+    if (Array.isArray(node.branches)) {
+        for (const branch of node.branches) {
+            walkTemplate(branch, visit);
+        }
+    }
+}
+
+/** @vue/compiler-dom NodeTypes used by rules (avoid importing internals). */
+export const NODE_ELEMENT = 1;
+export const NODE_TEXT = 2;
+export const NODE_INTERPOLATION = 5;
+export const PROP_ATTRIBUTE = 6;
+export const PROP_DIRECTIVE = 7;
+/** @vue/compiler-dom ElementTypes.COMPONENT */
+export const ELEMENT_COMPONENT = 1;
+
+/**
+ * Visit every expression in the template: interpolations (directiveName null)
+ * and directive expressions (directiveName e.g. "model", "bind", "if").
+ */
+export function eachTemplateExpression(ast, visit) {
+    walkTemplate(ast, (node) => {
+        if (node.type === NODE_INTERPOLATION && node.content?.content) {
+            visit(node.content, null);
+        }
+        if (node.type === NODE_ELEMENT) {
+            for (const p of node.props ?? []) {
+                if (p.type === PROP_DIRECTIVE && p.exp?.content) {
+                    visit(p.exp, p.name);
+                }
+            }
+        }
+    });
+}
+
+export function findDirective(el, name) {
+    return el.props?.find((p) => p.type === PROP_DIRECTIVE && p.name === name);
+}
+
+export function findKeyProp(el) {
+    return el.props?.find(
+        (p) =>
+            (p.type === PROP_ATTRIBUTE && p.name === "key") ||
+            (p.type === PROP_DIRECTIVE &&
+                p.name === "bind" &&
+                p.arg?.type === 4 /* SIMPLE_EXPRESSION */ &&
+                p.arg.content === "key"),
+    );
+}
+
+/**
+ * Extract variable names bound by a v-for / v-slot expression ("item",
+ * "(item, index)", "{ row }"). Returns null for shapes with renames or
+ * defaults (`{ a: b }`, `{ a = 1 }`) — identifying which side is the binding
+ * needs a real parser, and a wrong guess produces false positives downstream.
+ */
+export function extractBindingNames(exprText) {
+    const left = exprText.split(/\s+(?:in|of)\s+/)[0] ?? exprText;
+    if (/[:=]/.test(left)) {
+        return null;
+    }
+    const names = [...left.matchAll(/[A-Za-z_$][\w$]*/g)].map((m) => m[0]);
+    return names.length ? names : null;
+}
+
+/**
+ * Collect every identifier bound by a JS destructuring pattern
+ * (`a`, `{ a, b }`, `[a, b]`, `a = 1`, `...rest`) into `into`. Script-side rules use
+ * this to know which names a declaration / parameter / catch clause introduces.
+ */
+export const collectPatternNames = (pattern, into) => {
+    if (!pattern) {
+        return;
+    }
+    switch (pattern.type) {
+        case "Identifier":
+            into.add(pattern.name);
+            break;
+        case "ObjectPattern":
+            for (const p of pattern.properties ?? []) {
+                collectPatternNames(p.value ?? p.argument, into);
+            }
+            break;
+        case "ArrayPattern":
+            for (const el of pattern.elements ?? []) {
+                collectPatternNames(el, into);
+            }
+            break;
+        case "AssignmentPattern":
+            collectPatternNames(pattern.left, into);
+            break;
+        case "RestElement":
+            collectPatternNames(pattern.argument, into);
+            break;
+        default:
+            break;
+    }
+};
+
+/** Set of static `v-on` event names (`@click`, `v-on:click`) on a template element. */
+export function eventNames(el) {
+    const names = new Set();
+    for (const p of el.props ?? []) {
+        if (p.type === PROP_DIRECTIVE && p.name === "on" && p.arg?.type === 4 /* SIMPLE */) {
+            names.add(p.arg.content);
+        }
+    }
+    return names;
+}