@a11yfred/neighbor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mikey Ilagan
+
+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,204 @@
+# @a11yfred/neighbor
+
+Neighbor is an accessibility linting plugin for ESLint and Stylelint that builds on jsx-a11y. It looks to cover gaps: bad ARIA patterns, live region misuse, missing names on roles, and CSS that removes focus indicators. It also brings that coverage to Vue and Angular, where jsx-a11y does not apply.
+
+## Install
+
+```bash
+npm install --save-dev @a11yfred/neighbor
+```
+
+## Entry points
+
+| Import | Use for |
+| --- | --- |
+| `@a11yfred/neighbor/eslint` | React / JSX |
+| `@a11yfred/neighbor/eslint-vue` | Vue SFCs |
+| `@a11yfred/neighbor/eslint-angular` | Angular templates |
+| `@a11yfred/neighbor` | Stylelint — CSS user-preference fallbacks |
+
+## Setup
+
+### React / JSX
+
+Neighbor works alongside `eslint-plugin-jsx-a11y`. Install both.
+
+```bash
+npm install --save-dev eslint-plugin-jsx-a11y @a11yfred/neighbor
+```
+
+```js
+// eslint.config.js
+import neighbor from '@a11yfred/neighbor/eslint'
+
+export default [
+  {
+    plugins: { ...neighbor.configs.recommended.plugins },
+    rules:   { ...neighbor.configs.recommended.rules },
+  },
+]
+```
+
+### Vue
+
+```bash
+npm install --save-dev eslint-plugin-vuejs-accessibility @a11yfred/neighbor
+```
+
+```js
+import neighbor from '@a11yfred/neighbor/eslint-vue'
+
+export default [
+  {
+    plugins: { ...neighbor.configs.recommended.plugins },
+    rules:   { ...neighbor.configs.recommended.rules },
+  },
+]
+```
+
+### Angular
+
+```bash
+npm install --save-dev @angular-eslint/eslint-plugin-template @a11yfred/neighbor
+```
+
+```js
+import neighbor from '@a11yfred/neighbor/eslint-angular'
+
+export default [
+  {
+    plugins: { ...neighbor.configs.recommended.plugins },
+    rules:   { ...neighbor.configs.recommended.rules },
+  },
+]
+```
+
+### Stylelint
+
+```js
+// .stylelintrc.json
+{
+  "plugins": ["@a11yfred/neighbor"],
+  "rules": {
+    "ulam/user-preferences": true,
+    "ulam/no-outline-none": true
+  }
+}
+```
+
+## Peer dependencies
+
+| Peer | Required for |
+| --- | --- |
+| `eslint >= 8` | Any ESLint entry point |
+| `eslint-plugin-jsx-a11y >= 6` | React config — neighbor extends it, not replaces it |
+| `eslint-plugin-vuejs-accessibility >= 2` | Vue config |
+| `@angular-eslint/eslint-plugin-template >= 17` | Angular config |
+| `stylelint >= 14` | Stylelint config |
+
+All peers are optional. Install only what your project uses.
+
+## What neighbor adds
+
+### ESLint — React / JSX
+
+Base: `eslint-plugin-jsx-a11y`
+
+| What it checks | Rule | WCAG SC |
+| --- | --- | --- |
+| `aria-disabled` keeps element reachable | `prefer-aria-disabled` | 2.1.1 |
+| `aria-disabled` must block click handler | `no-unblocked-aria-disabled` | 2.1.1 |
+| `aria-label` on a generic element with no role | `no-aria-label-on-generic` | 1.3.1 |
+| `role="alert"` overuse | `warn-role-alert` | 4.1.3 |
+| `aria-live="assertive"` outside `role="alert"` | `no-assertive-live-overuse` | 4.1.3 |
+| `role="dialog"` requires accessible name | `no-roles-without-name` | 4.1.2 |
+| `role="group"` with form controls requires name | `no-group-without-name` | 1.3.1 |
+| `role="tooltip"` requires `id` on the tooltip | `no-tooltip-role-misuse` | 4.1.2 |
+| `role="application"` disables AT browse mode | `no-application-role` | — |
+| `role="grid"` almost always wrong | `no-grid-role` | — |
+| `role="menu"` on nav triggers wrong AT mode | `no-menu-role-on-nav` | 2.1.1 |
+| `role="presentation"` on a focusable element | `no-presentation-on-focusable` | 2.1.1 |
+| `role="log"` must not contain interactive children | `no-log-with-interactive-children` | 4.1.2 |
+| `role="img"` requires accessible name | `no-image-role-without-name` | 4.1.2 |
+| `role="tab"` requires `aria-selected` | `no-tabs-without-structure` | 4.1.2 |
+| `role="tab"` should declare `aria-controls` | `no-tab-without-controls` | 4.1.2 |
+| `role="combobox"` requires `aria-expanded` | `no-combobox-without-expanded` | 4.1.2 |
+| `role="slider"` requires value range attributes | `no-slider-without-range` | 4.1.2 |
+| `role="spinbutton"` requires value range attributes | `no-spinbutton-without-range` | 4.1.2 |
+| `role="listbox"` requires `role="option"` children | `no-listbox-without-option` | 4.1.2 |
+| `role="tree"` requires `role="treeitem"` children | `no-tree-without-treeitem` | 4.1.2 |
+| `role="feed"` requires `role="article"` children | `no-feed-without-article` | 4.1.2 |
+| `aria-hidden="true"` + `role="none"` is redundant | `no-redundant-aria-hidden-with-presentation` | — |
+| `aria-roledescription` does not translate | `no-aria-roledescription` | — |
+| `aria-readonly` has poor AT support | `no-aria-readonly` | — |
+| `aria-owns` on a void element | `no-aria-owns-on-void` | 4.1.2 |
+| `aria-activedescendant` requires a non-empty static ID | `no-aria-activedescendant-without-id` | 4.1.2 |
+| `aria-required` only valid on form-control roles | `no-aria-required-on-non-form` | 4.1.2 |
+| `<a>` with only aria-hidden children | `no-aria-hidden-in-link` | 4.1.2 |
+| `<button>` with only aria-hidden children | `no-empty-button` | 4.1.2 |
+| `<input>` placeholder used as sole label | `no-placeholder-only` | 1.3.1 |
+| `<input>` with invalid type value | `no-input-type-invalid` | 1.3.5 |
+| `<button>` in a form missing explicit type | `no-button-type-missing` | HTML spec |
+| `<summary>` outside `<details>` | `no-summary-without-details` | 2.1.1 |
+| `<a href="#">` used as a button | `no-href-hash` | 2.1.1 |
+| `target="_blank"` without new-tab disclosure | `no-target-blank-without-label` | 3.2.2 |
+| Duplicate `id` breaks ARIA relationships | `no-duplicate-id` | 1.3.1 |
+| Positive `tabIndex` breaks tab order | `no-positive-tabindex` | 2.4.3 |
+| Heading inside an interactive element | `no-heading-inside-interactive` | 4.1.2 |
+| `title` attribute as the only accessible name | `no-title-as-label` | 2.4.6 |
+| `<video>` or `<audio autoplay>` without controls | `no-autoplay-without-controls` | 1.4.2 |
+| Mouse-only events without keyboard equivalents | `no-mouse-only-events` | 2.1.1 |
+
+### ESLint — Vue SFCs
+
+Base: `eslint-plugin-vuejs-accessibility`
+
+Neighbor adds everything in the React table above, adapted for Vue's AST, plus:
+
+| What it checks | Rule | WCAG SC |
+| --- | --- | --- |
+| Ambiguous link text ("click here", "read more") | `no-anchor-ambiguous-text` | 2.4.4 |
+| `<a>` with no content and no accessible name | `no-anchor-no-content` | 4.1.2 |
+| Invalid ARIA attribute values | `no-invalid-aria-prop-value` | 4.1.2 |
+| Invalid `autocomplete` token | `no-autocomplete-invalid` | 1.3.5 |
+| Heading with no content | `no-heading-no-content` | 2.4.6 |
+| `<iframe>` without `title` | `no-iframe-no-title` | 4.1.2 |
+| Alt text contains "image", "photo" | `no-img-redundant-alt` | 1.1.1 |
+| `accessKey` attribute | `no-access-key` | 2.1.4 |
+| `scope` on `<td>` (only valid on `<th>`) | `no-scope-on-td` | 1.3.1 |
+
+### ESLint — Angular templates
+
+Base: `@angular-eslint/eslint-plugin-template`
+
+Neighbor adds the same rule set as Vue, adapted for Angular's template AST.
+
+**Known limitation:** Angular's template parser does not attach parent pointers to AST nodes. Rules that need to walk up the tree (`no-summary-without-details`, `no-button-type-missing`, `no-log-with-interactive-children`, `no-menu-role-on-nav`, `no-heading-inside-interactive`) will silently pass in Angular templates.
+
+### Stylelint — CSS
+
+| Rule | What it checks |
+| --- | --- |
+| `ulam/user-preferences` | Warns when motion, transparency, or alpha colors are used without `@media (prefers-*)` fallbacks |
+| `ulam/no-outline-none` | Disallows bare `outline: none` or `outline: 0` outside `:focus` selectors |
+
+## Rule severity
+
+| Severity | Meaning |
+| --- | --- |
+| `error` | Definite AT breakage or HTML spec violation |
+| `warn` | Strong guidance, occasional legitimate overrides exist |
+
+All rules can be overridden in your config.
+
+## See also
+
+- [RULES.md](RULES.md) — full rule list with descriptions
+
+## License
+
+MIT
+
+---
+
+*Built with help from Claude.*

package/lib/helpers-angular.js

@@ -0,0 +1,131 @@
+/**
+ * neighbor/lib/helpers-angular.js
+ * Helpers for Angular template AST via @angular-eslint/template-parser.
+ *
+ * Parser: @angular-eslint/eslint-plugin-template provides its own rule format.
+ * Node type for elements: 'Element$1' (from @angular-eslint/template-parser, the class is
+ * TmplAstElement). The node has:
+ *   node.name          — tag name string
+ *   node.attributes    — TmplAstTextAttribute[] (static attrs)
+ *   node.inputs        — TmplAstBoundAttribute[] (property bindings)
+ *   node.children      — TmplAstNode[]
+ *
+ * We only inspect static (non-bound) attributes for ARIA checks.
+ * Bound attributes ([aria-label]="expr") cannot be statically analyzed.
+ *
+ * Angular ESLint rule visitor uses standard ESLint `create(context)` but the
+ * parser emits different node types. The visitor key from @angular-eslint is
+ * 'Element$1' (the internal class name exposed via the parser).
+ */
+
+import {
+  INTERACTIVE_ELEMENTS,
+  INTERACTIVE_ROLES,
+} from './helpers.js'
+
+/** Find a static TmplAstTextAttribute by name. */
+export function getAttr(tmplElement, name) {
+  return (tmplElement.attributes ?? []).find(a => a.name === name) ?? null
+}
+
+/** TmplAstTextAttribute.value is a plain string. */
+export function getAttrStringValue(attr) {
+  if (!attr) return null
+  return typeof attr.value === 'string' ? attr.value || null : null
+}
+
+export function getElementName(tmplElement) {
+  const raw = tmplElement.name ?? ''
+  if (!raw) return null
+  // Angular custom component selectors are typically kebab-case (app-button),
+  // but guard against PascalCase as well to avoid native element name collisions.
+  if (raw[0] !== raw[0].toLowerCase()) return null
+  return raw.toLowerCase()
+}
+
+export function hasAttr(tmplElement, name) {
+  return getAttr(tmplElement, name) !== null
+}
+
+export function getRoleValue(tmplElement) {
+  return getAttrStringValue(getAttr(tmplElement, 'role'))
+}
+
+export function hasAccessibleName(tmplElement) {
+  return hasAttr(tmplElement, 'aria-label') || hasAttr(tmplElement, 'aria-labelledby')
+}
+
+export function isInteractiveElement(tmplElement) {
+  const el = getElementName(tmplElement)
+  if (el && INTERACTIVE_ELEMENTS.has(el)) return true
+  const role = getRoleValue(tmplElement)
+  return !!(role && INTERACTIVE_ROLES.has(role))
+}
+
+export function hasOnlyHiddenChildren(tmplElement) {
+  const children = tmplElement.children ?? []
+  if (children.length === 0) return false
+  return children.every(child => {
+    if (child.constructor?.name === 'TmplAstText') return (child.value ?? '').trim() === ''
+    if (child.constructor?.name === 'TmplAstElement') {
+      return (child.attributes ?? []).some(a => a.name === 'aria-hidden')
+    }
+    return false
+  })
+}
+
+const NEW_TAB_PATTERN = /new.tab|new.window|opens in/i
+
+function collectAngularText(node) {
+  if (!node) return ''
+  if (node.constructor?.name === 'TmplAstText') return node.value ?? ''
+  if (node.constructor?.name === 'TmplAstElement') return (node.children ?? []).map(collectAngularText).join('')
+  return ''
+}
+
+export function hasNewTabWarning(tmplElement) {
+  const labelVal = (getAttrStringValue(getAttr(tmplElement, 'aria-label')) ?? '').toLowerCase()
+  if (NEW_TAB_PATTERN.test(labelVal)) return true
+  const childText = (tmplElement.children ?? []).map(collectAngularText).join('')
+  return NEW_TAB_PATTERN.test(childText)
+}
+
+export function getParent(tmplElement) {
+  // @angular-eslint/template-parser does not set parent on AST nodes —
+  // ancestor walking is not available without tracking the stack ourselves.
+  // Rules needing ancestor traversal are skipped for Angular.
+  return null
+}
+
+export function* getAncestors(_tmplElement) { /* not available */ }
+
+export function* getChildOpeningElements(tmplElement) {
+  for (const child of tmplElement.children ?? []) {
+    if (child.constructor?.name === 'TmplAstElement') yield child
+  }
+}
+
+export function getClassName(tmplElement) {
+  return getAttrStringValue(getAttr(tmplElement, 'class'))
+}
+
+export const h = {
+  getAttr,
+  getAttrStringValue,
+  getElementName,
+  hasAttr,
+  getRoleValue,
+  hasAccessibleName,
+  isInteractiveElement,
+  hasOnlyHiddenChildren,
+  hasNewTabWarning,
+  getParent,
+  getAncestors,
+  getChildOpeningElements,
+  getClassName,
+  elementVisitor: 'Element$1',
+  elementWithChildrenVisitor: 'Element$1',
+  getOpeningElement: (node) => node,
+  getChildOpeningElementsFromWrapper: (node) =>
+    (node.children ?? []).filter(c => c.constructor?.name === 'TmplAstElement'),
+}

package/lib/helpers-jsx.js

@@ -0,0 +1,181 @@
+/**
+ * neighbor/lib/helpers-jsx.js
+ * Helpers for React/JSX AST (espree + @babel/eslint-parser).
+ * Nodes: JSXOpeningElement, JSXAttribute, JSXElement, JSXText, JSXExpressionContainer
+ *
+ * All helpers conform to the standard interface expected by lib/rules.js:
+ *   getAttr(node, name)         → attribute node or null
+ *   getAttrStringValue(attr)    → string | null
+ *   getElementName(node)        → lowercase string | null
+ *   hasAttr(node, name)         → boolean
+ *   getRoleValue(node)          → string | null
+ *   hasAccessibleName(node)     → boolean
+ *   isInteractiveElement(node)  → boolean
+ *   hasOnlyHiddenChildren(jsxOrVNode) → boolean (for link-hidden check)
+ *   getParent(node)             → parent opening-element-like node | null
+ *   getAncestors(node)          → iterable of opening-element-like nodes, root-ward
+ *   getChildOpeningElements(node) → iterable of opening-element-like nodes (direct children)
+ *   getClassName(node)          → string | null
+ */
+
+import {
+  INTERACTIVE_ELEMENTS,
+  INTERACTIVE_ROLES,
+} from './helpers.js'
+
+export function getAttrStringValue(attr) {
+  if (!attr) return null
+  const val = attr.value
+  if (!val) return null
+  if (val.type === 'Literal') return String(val.value)
+  if (val.type === 'JSXExpressionContainer' && val.expression.type === 'Literal')
+    return String(val.expression.value)
+  return null
+}
+
+export function getAttr(openingElement, name) {
+  return openingElement.attributes.find(
+    a => a.type === 'JSXAttribute' && a.name?.name === name
+  ) ?? null
+}
+
+export function getElementName(openingElement) {
+  const n = openingElement.name
+  if (typeof n.name === 'string') {
+    // Custom React components start with uppercase — return null so rules
+    // that check element names don't treat them as native HTML elements.
+    if (n.name[0] !== n.name[0].toLowerCase()) return null
+    return n.name.toLowerCase()
+  }
+  return null
+}
+
+export function hasAttr(openingElement, name) {
+  return getAttr(openingElement, name) !== null
+}
+
+export function getRoleValue(openingElement) {
+  return getAttrStringValue(getAttr(openingElement, 'role'))
+}
+
+export function hasAccessibleName(openingElement) {
+  return hasAttr(openingElement, 'aria-label') || hasAttr(openingElement, 'aria-labelledby')
+}
+
+export function isInteractiveElement(openingElement) {
+  const el = getElementName(openingElement)
+  if (el && INTERACTIVE_ELEMENTS.has(el)) return true
+  const role = getRoleValue(openingElement)
+  return !!(role && INTERACTIVE_ROLES.has(role))
+}
+
+/** Returns true if every child of the JSXElement is aria-hidden or empty text. */
+export function hasOnlyHiddenChildren(jsxElement) {
+  const children = jsxElement.children ?? []
+  if (children.length === 0) return false
+  return children.every(child => {
+    if (child.type === 'JSXText') return child.value.trim() === ''
+    if (child.type === 'JSXExpressionContainer')
+      return child.expression.type === 'Literal' && String(child.expression.value).trim() === ''
+    if (child.type === 'JSXElement') {
+      return child.openingElement.attributes.some(
+        a => a.type === 'JSXAttribute' && a.name?.name === 'aria-hidden'
+      )
+    }
+    return false
+  })
+}
+
+/** Returns the parent opening element (JSXOpeningElement), or null. */
+export function getParent(openingElement) {
+  // openingElement → JSXElement → parent JSXElement → openingElement
+  const parent = openingElement.parent?.parent
+  if (parent?.type === 'JSXElement') return parent.openingElement
+  return null
+}
+
+/** Returns an iterable of ancestor opening elements, root-ward. */
+export function* getAncestors(openingElement) {
+  let cur = getParent(openingElement)
+  while (cur) {
+    yield cur
+    cur = getParent(cur)
+  }
+}
+
+/** Returns an iterable of direct-child opening elements. */
+export function* getChildOpeningElements(openingElement) {
+  const jsxElement = openingElement.parent
+  if (jsxElement?.type !== 'JSXElement') return
+  for (const child of jsxElement.children ?? []) {
+    if (child.type === 'JSXElement') yield child.openingElement
+  }
+}
+
+export function getClassName(openingElement) {
+  const classAttr = getAttr(openingElement, 'className') ?? getAttr(openingElement, 'class')
+  return getAttrStringValue(classAttr)
+}
+
+const NEW_TAB_PATTERN = /new.tab|new.window|opens in/i
+
+/** Recursively collect all text content from a JSX subtree. */
+function collectText(node) {
+  if (!node) return ''
+  if (node.type === 'JSXText') return node.value
+  if (node.type === 'JSXElement') {
+    return (node.children ?? []).map(collectText).join('')
+  }
+  if (node.type === 'JSXExpressionContainer') {
+    const ex = node.expression
+    if (ex.type === 'Literal') return String(ex.value)
+    if (ex.type === 'TemplateLiteral') return ex.quasis.map(q => q.value.raw).join('')
+  }
+  return ''
+}
+
+/**
+ * Returns true if the link communicates "opens in new tab" via:
+ *   - aria-label containing the phrase
+ *   - any descendant text content containing the phrase (e.g. sr-only span)
+ */
+export function hasNewTabWarning(openingElement) {
+  const labelVal = (getAttrStringValue(getAttr(openingElement, 'aria-label')) ?? '').toLowerCase()
+  if (NEW_TAB_PATTERN.test(labelVal)) return true
+  const jsxElement = openingElement.parent
+  if (jsxElement?.type !== 'JSXElement') return false
+  const childText = collectText(jsxElement)
+  return NEW_TAB_PATTERN.test(childText)
+}
+
+/** Wrap all JSX helpers into the standard `h` interface expected by rules. */
+export const h = {
+  getAttr,
+  getAttrStringValue,
+  getElementName,
+  hasAttr,
+  getRoleValue,
+  hasAccessibleName,
+  isInteractiveElement,
+  hasOnlyHiddenChildren: (openingElement) => {
+    const el = openingElement.parent
+    return el?.type === 'JSXElement' ? hasOnlyHiddenChildren(el) : false
+  },
+  hasNewTabWarning,
+  getParent,
+  getAncestors,
+  getChildOpeningElements,
+  getClassName,
+  // Node visitor key for ESLint — what AST node type fires the rule
+  elementVisitor: 'JSXOpeningElement',
+  // For rules that need to visit element+children (group-without-name, etc.)
+  elementWithChildrenVisitor: 'JSXElement',
+  /** For elementWithChildrenVisitor: extract the opening element from the wrapper node */
+  getOpeningElement: (node) => node.openingElement,
+  /** For elementWithChildrenVisitor: get direct child opening elements */
+  getChildOpeningElementsFromWrapper: (node) => {
+    return (node.children ?? [])
+      .filter(c => c.type === 'JSXElement')
+      .map(c => c.openingElement)
+  },
+}

package/lib/helpers-vue.js

@@ -0,0 +1,135 @@
+/**
+ * neighbor/lib/helpers-vue.js
+ * Helpers for Vue SFC AST via vue-eslint-parser.
+ * Nodes: VElement (has startTag.attributes), VAttribute, VLiteral, VExpressionContainer
+ *
+ * vue-eslint-parser docs: https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md
+ * Rule visitor: 'VElement' (fired for every HTML element in the template)
+ */
+
+import {
+  INTERACTIVE_ELEMENTS,
+  INTERACTIVE_ROLES,
+} from './helpers.js'
+
+/**
+ * In vue-eslint-parser, an attribute is a VAttribute node.
+ * Plain attribute:    { type: 'VAttribute', key: { name: 'role' }, value: { type: 'VLiteral', value: '"dialog"' } }
+ * v-bind shorthand:  { type: 'VAttribute', directive: true, key: { argument: { name: 'role' } }, value: VExpressionContainer }
+ * We only read static (non-directive) attributes for ARIA checks.
+ */
+export function getAttr(vElement, name) {
+  const attrs = vElement.startTag?.attributes ?? []
+  return attrs.find(a => !a.directive && a.key?.name === name) ?? null
+}
+
+export function getAttrStringValue(attr) {
+  if (!attr) return null
+  // VLiteral.value includes surrounding quotes — strip them
+  const raw = attr.value?.value
+  if (typeof raw === 'string') return raw.replace(/^["']|["']$/g, '')
+  return null
+}
+
+export function getElementName(vElement) {
+  const raw = vElement.rawName ?? vElement.name ?? ''
+  if (!raw) return null
+  // Vue custom components can be PascalCase (MyButton) or kebab-case (my-button).
+  // PascalCase names would lowercase to a native element name collision (e.g. Button → button).
+  // Return null for PascalCase so rules don't treat custom components as native elements.
+  if (raw[0] !== raw[0].toLowerCase()) return null
+  return raw.toLowerCase()
+}
+
+export function hasAttr(vElement, name) {
+  return getAttr(vElement, name) !== null
+}
+
+export function getRoleValue(vElement) {
+  return getAttrStringValue(getAttr(vElement, 'role'))
+}
+
+export function hasAccessibleName(vElement) {
+  return hasAttr(vElement, 'aria-label') || hasAttr(vElement, 'aria-labelledby')
+}
+
+export function isInteractiveElement(vElement) {
+  const el = getElementName(vElement)
+  if (el && INTERACTIVE_ELEMENTS.has(el)) return true
+  const role = getRoleValue(vElement)
+  return !!(role && INTERACTIVE_ROLES.has(role))
+}
+
+/** Returns true if every child element is aria-hidden or the element has no visible text children. */
+export function hasOnlyHiddenChildren(vElement) {
+  const children = vElement.children ?? []
+  if (children.length === 0) return false
+  return children.every(child => {
+    if (child.type === 'VText') return child.value.trim() === ''
+    if (child.type === 'VElement') {
+      const attrs = child.startTag?.attributes ?? []
+      return attrs.some(a => !a.directive && a.key?.name === 'aria-hidden')
+    }
+    return false
+  })
+}
+
+const NEW_TAB_PATTERN = /new.tab|new.window|opens in/i
+
+function collectVueText(node) {
+  if (!node) return ''
+  if (node.type === 'VText') return node.value ?? ''
+  if (node.type === 'VElement') return (node.children ?? []).map(collectVueText).join('')
+  return ''
+}
+
+export function hasNewTabWarning(vElement) {
+  const labelVal = (getAttrStringValue(getAttr(vElement, 'aria-label')) ?? '').toLowerCase()
+  if (NEW_TAB_PATTERN.test(labelVal)) return true
+  const childText = (vElement.children ?? []).map(collectVueText).join('')
+  return NEW_TAB_PATTERN.test(childText)
+}
+
+/** Parent VElement, or null. */
+export function getParent(vElement) {
+  const p = vElement.parent
+  return p?.type === 'VElement' ? p : null
+}
+
+export function* getAncestors(vElement) {
+  let cur = getParent(vElement)
+  while (cur) {
+    yield cur
+    cur = getParent(cur)
+  }
+}
+
+export function* getChildOpeningElements(vElement) {
+  for (const child of vElement.children ?? []) {
+    if (child.type === 'VElement') yield child
+  }
+}
+
+export function getClassName(vElement) {
+  return getAttrStringValue(getAttr(vElement, 'class'))
+}
+
+export const h = {
+  getAttr,
+  getAttrStringValue,
+  getElementName,
+  hasAttr,
+  getRoleValue,
+  hasAccessibleName,
+  isInteractiveElement,
+  hasOnlyHiddenChildren,
+  hasNewTabWarning,
+  getParent,
+  getAncestors,
+  getChildOpeningElements,
+  getClassName,
+  elementVisitor: 'VElement',
+  elementWithChildrenVisitor: 'VElement',
+  getOpeningElement: (node) => node,
+  getChildOpeningElementsFromWrapper: (node) => (node.children ?? []).filter(c => c.type === 'VElement'),
+}