@a11yfred/neighbor 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+## 0.2.0 — 2026-05-12
+
+### New rules
+
+| Rule | What it catches |
+|---|---|
+| `no-labelledby-missing-target` | `aria-labelledby`/`describedby`/`controls`/`owns`/`activedescendant` referencing an `id` that doesn't exist in the file |
+| `no-dynamic-content-without-live` | `dangerouslySetInnerHTML` / `v-html` / `[innerHTML]` on an element outside a live region |
+| `form-field-multiple-labels` | Multiple `<label for="…">` elements targeting the same input |
+| `no-empty-table-header` | `<th>` or `role="columnheader"/"rowheader"` with no accessible text |
+
+All four rules run on React, Vue, and Angular.
+
+### Extended rules
+
+**`no-announce-in-render`** now runs in the Vue and Angular plugins, not just React. Safe contexts are tuned per framework — Vue recognises `onMounted`, `watch`, `watchEffect`, `nextTick`; Angular recognises `ngOnInit`, `ngAfterViewInit`, `ngOnChanges`, and class method event handlers.
+
+### Setup improvements
+
+README now includes correct parser snippets for Vue and Angular, and separate setup sections for Remix 2 and Remix 3.
+
+---
+
+## 0.1.0 — 2026-04-30
+
+Initial release.

package/README.md

@@ -12,7 +12,7 @@ npm install --save-dev @a11yfred/neighbor
 
 | Import | Use for |
 | --- | --- |
-| `@a11yfred/neighbor/eslint` | React / JSX |
+| `@a11yfred/neighbor/eslint` | React / JSX, Remix 2 |
 | `@a11yfred/neighbor/eslint-vue` | Vue SFCs |
 | `@a11yfred/neighbor/eslint-angular` | Angular templates |
 | `@a11yfred/neighbor` | Stylelint — CSS user-preference fallbacks |
@@ -39,6 +39,51 @@ export default [
 ]
 ```
 
+### Remix 2
+
+Remix 2 is React-based. Use the React entry point. The `no-hash-router-in-remix` and `no-use-page-title-in-remix` rules activate automatically when Remix imports are detected.
+
+```bash
+npm install --save-dev eslint-plugin-jsx-a11y @a11yfred/neighbor
+```
+
+```js
+// eslint.config.js
+import neighbor from '@a11yfred/neighbor/eslint'
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: { ...neighbor.configs.recommended.plugins },
+    rules:   { ...neighbor.configs.recommended.rules },
+  },
+]
+```
+
+### Remix 3
+
+Remix 3 is framework-agnostic and does not require React. Neighbor does not have a dedicated Remix 3 entry point — use the entry point that matches your renderer.
+
+If you are using React with Remix 3:
+
+```bash
+npm install --save-dev eslint-plugin-jsx-a11y @a11yfred/neighbor
+```
+
+```js
+import neighbor from '@a11yfred/neighbor/eslint'
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: { ...neighbor.configs.recommended.plugins },
+    rules:   { ...neighbor.configs.recommended.rules },
+  },
+]
+```
+
+If you are not using React with Remix 3, neighbor does not currently have a template-level entry point for your renderer. The Remix-specific rules (`no-hash-router-in-remix`, `no-use-page-title-in-remix`) only apply to React-based Remix projects.
+
 ### Vue
 
 ```bash
@@ -46,10 +91,13 @@ npm install --save-dev eslint-plugin-vuejs-accessibility @a11yfred/neighbor
 ```
 
 ```js
+import vueParser from 'vue-eslint-parser'
 import neighbor from '@a11yfred/neighbor/eslint-vue'
 
 export default [
   {
+    files: ['**/*.vue'],
+    languageOptions: { parser: vueParser },
     plugins: { ...neighbor.configs.recommended.plugins },
     rules:   { ...neighbor.configs.recommended.rules },
   },
@@ -63,13 +111,24 @@ npm install --save-dev @angular-eslint/eslint-plugin-template @a11yfred/neighbor
 ```
 
 ```js
+import angularTemplateParser from '@angular-eslint/template-parser'
 import neighbor from '@a11yfred/neighbor/eslint-angular'
 
 export default [
   {
+    files: ['**/*.html'],
+    languageOptions: { parser: angularTemplateParser },
     plugins: { ...neighbor.configs.recommended.plugins },
     rules:   { ...neighbor.configs.recommended.rules },
   },
+  {
+    // Also lint component TypeScript files for the announce() rule
+    files: ['**/*.ts'],
+    plugins: { '@a11yfred/neighbor': neighbor },
+    rules: {
+      '@a11yfred/neighbor/no-announce-in-render': 'error',
+    },
+  },
 ]
 ```
 
@@ -148,12 +207,26 @@ Base: `eslint-plugin-jsx-a11y`
 | `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 |
+| `aria-labelledby`/`describedby` references missing `id` | `no-labelledby-missing-target` | 4.1.2 |
+| `dangerouslySetInnerHTML` outside a live region | `no-dynamic-content-without-live` | 4.1.3 |
+| Multiple `<label>` elements for the same control | `form-field-multiple-labels` | 1.3.1 |
+| `<th>` or header role with no accessible text | `no-empty-table-header` | 1.3.1 |
+| `announce()` called in component render body | `no-announce-in-render` | 4.1.3 |
+
+### ESLint — Remix 2
+
+Same as React / JSX. Additional rules activate when Remix imports are detected in the file being linted:
+
+| What it checks | Rule | Severity |
+| --- | --- | --- |
+| `@ulam` hash router alongside `react-router` | `no-hash-router-in-remix` | warn |
+| `usePageTitle()` alongside `react-router` | `no-use-page-title-in-remix` | warn |
 
 ### ESLint — Vue SFCs
 
 Base: `eslint-plugin-vuejs-accessibility`
 
-Neighbor adds everything in the React table above, adapted for Vue's AST, plus:
+Neighbor adds everything in the React table above, adapted for Vue's AST (`v-html` instead of `dangerouslySetInnerHTML`), plus:
 
 | What it checks | Rule | WCAG SC |
 | --- | --- | --- |
@@ -166,14 +239,15 @@ Neighbor adds everything in the React table above, adapted for Vue's AST, plus:
 | 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 |
+| `announce()` called outside `onMounted`/`watch`/handler | `no-announce-in-render` | 4.1.3 |
 
 ### ESLint — Angular templates
 
 Base: `@angular-eslint/eslint-plugin-template`
 
-Neighbor adds the same rule set as Vue, adapted for Angular's template AST.
+Neighbor adds the same rule set as Vue, adapted for Angular's template AST (`[innerHTML]` instead of `dangerouslySetInnerHTML`). The `no-announce-in-render` rule also lints Angular component TypeScript files — see the setup instructions for how to configure it for `.ts` files alongside `.html` templates.
 
-**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.
+**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. The `no-dynamic-content-without-live` rule only checks the element itself for Angular (no ancestor walk).
 
 ### Stylelint — CSS
 

package/lib/helpers-angular.js

@@ -109,6 +109,19 @@ export function getClassName(tmplElement) {
   return getAttrStringValue(getAttr(tmplElement, 'class'))
 }
 
+/**
+ * Returns the [innerHTML] bound input node if present, else null.
+ * In @angular-eslint/template-parser, property bindings live on node.inputs
+ * as TmplAstBoundAttribute nodes with { name: 'innerHTML' }.
+ */
+export function getInnerHtmlAttr(tmplElement) {
+  return (tmplElement.inputs ?? []).find(i => i.name === 'innerHTML') ?? null
+}
+
+export function getInnerHtmlAttrName(_tmplElement) {
+  return '[innerHTML]'
+}
+
 export const h = {
   getAttr,
   getAttrStringValue,
@@ -123,6 +136,8 @@ export const h = {
   getAncestors,
   getChildOpeningElements,
   getClassName,
+  getInnerHtmlAttr,
+  getInnerHtmlAttrName,
   elementVisitor: 'Element$1',
   elementWithChildrenVisitor: 'Element$1',
   getOpeningElement: (node) => node,

package/lib/helpers-jsx.js

@@ -148,6 +148,16 @@ export function hasNewTabWarning(openingElement) {
   return NEW_TAB_PATTERN.test(childText)
 }
 
+/** Returns the dangerouslySetInnerHTML attribute node if present, else null. */
+export function getInnerHtmlAttr(openingElement) {
+  return getAttr(openingElement, 'dangerouslySetInnerHTML')
+}
+
+/** Returns the attribute name string for the inject-HTML attribute. */
+export function getInnerHtmlAttrName(_openingElement) {
+  return 'dangerouslySetInnerHTML'
+}
+
 /** Wrap all JSX helpers into the standard `h` interface expected by rules. */
 export const h = {
   getAttr,
@@ -166,6 +176,8 @@ export const h = {
   getAncestors,
   getChildOpeningElements,
   getClassName,
+  getInnerHtmlAttr,
+  getInnerHtmlAttrName,
   // 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.)

package/lib/helpers-vue.js

@@ -114,6 +114,20 @@ export function getClassName(vElement) {
   return getAttrStringValue(getAttr(vElement, 'class'))
 }
 
+/**
+ * Returns the v-html directive attribute node if present, else null.
+ * v-html is a directive (a.directive === true, key.name === 'html'),
+ * not a plain static attribute — so we search differently.
+ */
+export function getInnerHtmlAttr(vElement) {
+  const attrs = vElement.startTag?.attributes ?? []
+  return attrs.find(a => a.directive && a.key?.name === 'html') ?? null
+}
+
+export function getInnerHtmlAttrName(_vElement) {
+  return 'v-html'
+}
+
 export const h = {
   getAttr,
   getAttrStringValue,
@@ -128,6 +142,8 @@ export const h = {
   getAncestors,
   getChildOpeningElements,
   getClassName,
+  getInnerHtmlAttr,
+  getInnerHtmlAttrName,
   elementVisitor: 'VElement',
   elementWithChildrenVisitor: 'VElement',
   getOpeningElement: (node) => node,

package/lib/rules.js

@@ -2014,6 +2014,251 @@ export function makeNoInputTypeInvalid(h) {
   }
 }
 
+// ─── no-labelledby-missing-target ────────────────────────────────────────────
+// aria-labelledby and aria-describedby accept a space-separated list of id refs.
+// If any referenced id does not exist in the same file the association is broken —
+// AT silently computes an empty name. axe-core catches this at runtime; we can
+// catch the static case (same file) at lint time.
+// Ref: axe-core aria-labelledby (reimplemented); ARIA 1.2 §6.2.4; SC 4.1.2
+
+const LABELLEDBY_ATTRS = ['aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-owns', 'aria-activedescendant']
+
+export function makeNoLabelledbyMissingTarget(h) {
+  return {
+    meta: {
+      type: 'problem',
+      docs: { description: 'Disallow aria-labelledby/describedby/controls/owns/activedescendant referencing an id that does not exist in the file' },
+      messages: {
+        missingTarget:
+          '{{attr}}="{{ids}}" references id "{{id}}" which does not exist in this file. ' +
+          'AT will compute an empty name for this element. Add an element with id="{{id}}" ' +
+          'or correct the reference. (axe-core aria-labelledby / SC 4.1.2)',
+      },
+      schema: [],
+    },
+    create(context) {
+      const definedIds = new Set()
+      // attr node → { attr, tokens } — collected on first pass, checked at exit
+      const refs = []
+
+      return {
+        [h.elementVisitor](node) {
+          const idVal = h.getAttrStringValue(h.getAttr(node, 'id'))
+          if (idVal) definedIds.add(idVal.trim())
+
+          for (const attrName of LABELLEDBY_ATTRS) {
+            const attrNode = h.getAttr(node, attrName)
+            if (!attrNode) continue
+            const val = h.getAttrStringValue(attrNode)
+            if (!val) continue
+            const tokens = val.trim().split(/\s+/).filter(Boolean)
+            if (tokens.length) refs.push({ attrNode, attrName, tokens })
+          }
+        },
+
+        'Program:exit'() {
+          for (const { attrNode, attrName, tokens } of refs) {
+            for (const id of tokens) {
+              if (!definedIds.has(id)) {
+                context.report({
+                  node: attrNode,
+                  messageId: 'missingTarget',
+                  data: { attr: attrName, ids: tokens.join(' '), id },
+                })
+                break // one report per attribute is enough
+              }
+            }
+          }
+        },
+      }
+    },
+  }
+}
+
+// ─── no-dynamic-content-without-live ─────────────────────────────────────────
+// Injecting HTML dynamically (dangerouslySetInnerHTML / v-html / [innerHTML])
+// replaces the subtree after load. Screen readers do not re-read replaced
+// content unless a live region wraps it. axe-core catches this at runtime as
+// "content-changes" violations; we can catch the static pattern at lint time.
+//
+// The check: the element using the inject-HTML attribute, or one of its
+// ancestors, must have aria-live (or role="alert"/"status"/"log"/"marquee"
+// which carry implicit live region semantics).
+//
+// Angular ancestor walking is unavailable (getParent returns null) so for
+// Angular we only check the element itself — a partial but still useful signal.
+//
+// Ref: axe-core (content-changes); WCAG SC 4.1.3 Status Messages
+
+const IMPLICIT_LIVE_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer'])
+
+function hasLiveRegion(node, h) {
+  if (h.hasAttr(node, 'aria-live')) return true
+  const role = h.getRoleValue(node)
+  if (role && IMPLICIT_LIVE_ROLES.has(role)) return true
+  return false
+}
+
+export function makeNoDynamicContentWithoutLive(h) {
+  return {
+    meta: {
+      type: 'problem',
+      docs: { description: 'Require aria-live on elements that inject dynamic HTML content' },
+      messages: {
+        missingLive:
+          '{{attr}} replaces element content after load. Screen readers will not re-read ' +
+          'the new content unless this element or an ancestor has aria-live (or an implicit ' +
+          'live role like role="alert"). Add aria-live="polite" (or role="status") to the ' +
+          'container, or move the inject into an existing live region. (axe-core content-changes / SC 4.1.3)',
+      },
+      schema: [],
+    },
+    create(context) {
+      return {
+        [h.elementVisitor](node) {
+          const injectAttr = h.getInnerHtmlAttr(node)
+          if (!injectAttr) return
+
+          // Check the element itself first
+          if (hasLiveRegion(node, h)) return
+
+          // Walk ancestors (returns nothing for Angular — degrades to element-only check)
+          for (const ancestor of h.getAncestors(node)) {
+            if (hasLiveRegion(ancestor, h)) return
+          }
+
+          const attrName = h.getInnerHtmlAttrName(node)
+          context.report({ node: injectAttr, messageId: 'missingLive', data: { attr: attrName } })
+        },
+      }
+    },
+  }
+}
+
+// ─── form-field-multiple-labels ───────────────────────────────────────────────
+// A form control should have exactly one label. When multiple <label for="X">
+// elements point to the same input, screen readers read all of them — the result
+// is verbose, repetitive, or confusing depending on the AT.
+// We only flag the case where more than one *static* <label for="id"> targets
+// the same input in the same file. Dynamic labels (v-bind:for, [for]) are skipped.
+// Ref: axe-core form-field-multiple-labels (reimplemented); SC 1.3.1
+
+export function makeFormFieldMultipleLabels(h) {
+  return {
+    meta: {
+      type: 'problem',
+      docs: { description: 'Disallow multiple <label> elements associated with the same form control' },
+      messages: {
+        multipleLabels:
+          'id="{{id}}" is referenced by more than one <label for="...">. Screen readers read all ' +
+          'associated labels — duplicates add noise or conflict. Keep exactly one label per control. ' +
+          '(axe-core form-field-multiple-labels / SC 1.3.1)',
+      },
+      schema: [],
+    },
+    create(context) {
+      // Map from id value → array of <label for="id"> attribute nodes
+      const labelForRefs = new Map()
+
+      return {
+        [h.elementVisitor](node) {
+          if (h.getElementName(node) !== 'label') return
+          // Support both htmlFor (JSX) and for (Vue/Angular)
+          const forAttr = h.getAttr(node, 'htmlFor') ?? h.getAttr(node, 'for')
+          if (!forAttr) return
+          const forVal = h.getAttrStringValue(forAttr)
+          if (!forVal) return
+          const id = forVal.trim()
+          if (!labelForRefs.has(id)) labelForRefs.set(id, [])
+          labelForRefs.get(id).push(forAttr)
+        },
+
+        'Program:exit'() {
+          for (const [id, nodes] of labelForRefs) {
+            if (nodes.length < 2) continue
+            // Report the second and subsequent labels — the first is fine
+            for (const node of nodes.slice(1)) {
+              context.report({ node, messageId: 'multipleLabels', data: { id } })
+            }
+          }
+        },
+      }
+    },
+  }
+}
+
+// ─── no-empty-table-header ────────────────────────────────────────────────────
+// <th> elements (and elements with role="columnheader" or role="rowheader") must
+// have accessible text — either text content or aria-label / aria-labelledby.
+// An empty table header is invisible to screen reader users; they cannot navigate
+// or understand the table structure.
+// Ref: axe-core empty-table-header (reimplemented); SC 1.3.1
+
+const TABLE_HEADER_ROLES = new Set(['columnheader', 'rowheader'])
+
+export function makeNoEmptyTableHeader(h) {
+  return {
+    meta: {
+      type: 'problem',
+      docs: { description: 'Require accessible text on <th> elements and header role elements' },
+      messages: {
+        emptyHeader:
+          'This table header has no accessible name — screen readers cannot describe the column ' +
+          'or row to users. Add visible text, aria-label, or aria-labelledby. ' +
+          '(axe-core empty-table-header / SC 1.3.1)',
+      },
+      schema: [],
+    },
+    create(context) {
+      return {
+        [h.elementWithChildrenVisitor](node) {
+          const opening = h.getOpeningElement(node)
+          const el = h.getElementName(opening)
+          const role = h.getRoleValue(opening)
+          const isTh = el === 'th'
+          const isHeaderRole = role && TABLE_HEADER_ROLES.has(role)
+          if (!isTh && !isHeaderRole) return
+          if (h.hasAccessibleName(opening)) return
+          // Check for visible text children
+          const children = h.getChildOpeningElementsFromWrapper(node)
+          // hasOnlyHiddenChildren checks if ALL children are aria-hidden — if it
+          // returns true on a childless node it returns false, so we also check
+          // whether the element has zero children with text.
+          // Use the wrapper-level text check available for JSX/Vue.
+          if (!h.hasOnlyHiddenChildren(opening) && !isEffectivelyEmpty(node, h)) return
+          context.report({ node: opening, messageId: 'emptyHeader' })
+        },
+      }
+    },
+  }
+}
+
+/**
+ * Returns true if the element wrapper has no visible text content.
+ * Works for JSX (JSXElement.children) and Vue (VElement.children).
+ * For Angular, elementWithChildrenVisitor === elementVisitor and children
+ * are on tmplElement.children directly.
+ */
+function isEffectivelyEmpty(wrapperNode, h) {
+  // For frameworks where wrapper === opening (Vue, Angular), use children directly
+  const children = wrapperNode.children ?? wrapperNode.parent?.children ?? []
+  if (children.length === 0) return true
+  return children.every(child => {
+    // JSX
+    if (child.type === 'JSXText') return child.value.trim() === ''
+    if (child.type === 'JSXExpressionContainer') {
+      const ex = child.expression
+      return ex.type === 'Literal' && String(ex.value).trim() === ''
+    }
+    // Vue
+    if (child.type === 'VText') return (child.value ?? '').trim() === ''
+    // Angular
+    if (child.constructor?.name === 'TmplAstText') return (child.value ?? '').trim() === ''
+    // Child element — not text, assume non-empty (may have aria-label etc.)
+    return false
+  })
+}
+
 // ─── All rules map ────────────────────────────────────────────────────────────
 
 export const RULE_FACTORIES = {
@@ -2075,6 +2320,10 @@ export const RULE_FACTORIES = {
   'no-summary-without-details':                 makeNoSummaryWithoutDetails,
   'no-aria-required-on-non-form':               makeNoAriaRequiredOnNonForm,
   'no-input-type-invalid':                      makeNoInputTypeInvalid,
+  'no-labelledby-missing-target':               makeNoLabelledbyMissingTarget,
+  'no-dynamic-content-without-live':            makeNoDynamicContentWithoutLive,
+  'form-field-multiple-labels':                 makeFormFieldMultipleLabels,
+  'no-empty-table-header':                      makeNoEmptyTableHeader,
 }
 
 /** Build the rules map for a plugin by applying helpers to all factories. */
@@ -2120,6 +2369,10 @@ export function buildRecommendedRules(ns) {
     [`${ns}/no-summary-without-details`]:                 'error',
     [`${ns}/no-aria-required-on-non-form`]:               'error',
     [`${ns}/no-input-type-invalid`]:                      'error',
+    [`${ns}/no-labelledby-missing-target`]:               'error',
+    [`${ns}/no-dynamic-content-without-live`]:            'error',
+    [`${ns}/form-field-multiple-labels`]:                 'error',
+    [`${ns}/no-empty-table-header`]:                      'error',
     [`${ns}/no-button-type-missing`]:                     'warn',
     // warnings — strong guidance, occasional legitimate overrides
     [`${ns}/no-tooltip-role-misuse`]:                     'warn',

package/lib/ulam-rules.js

@@ -15,61 +15,115 @@
 //
 // announce() writes to a live region. Calling it directly in a component body
 // fires on every render, spamming screen readers with repeated announcements.
-// It must only be called inside useEffect, useLayoutEffect, or event handlers.
+// It must only be called inside a lifecycle hook, effect, or event handler.
+//
+// React:   useEffect / useLayoutEffect / event handlers (onClick={...} etc.)
+// Vue:     onMounted / onUpdated / watch / watchEffect / nextTick callbacks
+// Angular: ngOnInit / ngAfterViewInit / ngOnChanges / event methods on the class
 
 const ANNOUNCE_FNS = new Set(['announce', 'clearAnnouncements'])
-const SAFE_PARENT_CALLS = new Set([
+
+const REACT_SAFE_CALLS = new Set([
   'useEffect', 'useLayoutEffect', 'useInsertionEffect',
   'useCallback', 'useMemo',
 ])
 
-function isInsideSafeContext(node) {
-  let cur = node.parent
-  while (cur) {
-    // Arrow or function expression passed as argument to useEffect etc.
-    if (
-      cur.type === 'CallExpression' &&
-      cur.callee?.name &&
-      SAFE_PARENT_CALLS.has(cur.callee.name)
-    ) return true
-    // Event handler: onClick={...}, onKeyDown={...}, etc.
-    if (
-      cur.type === 'JSXExpressionContainer' &&
-      cur.parent?.type === 'JSXAttribute' &&
-      cur.parent?.name?.name?.startsWith('on')
-    ) return true
-    // Regular function (not a component body) — event listeners, async handlers
-    if (
-      cur.type === 'FunctionDeclaration' ||
-      cur.type === 'FunctionExpression' ||
-      cur.type === 'ArrowFunctionExpression'
-    ) {
-      // Standalone function (not a callback) — safe
-      const parent = cur.parent
-      if (parent?.type !== 'CallExpression') return true
-      // It's a callback — only safe if the callee is a known safe hook
-      if (parent.callee?.name && SAFE_PARENT_CALLS.has(parent.callee.name)) return true
-      // Could be an event handler function passed as a prop — allow it
-      if (parent.callee?.type === 'MemberExpression') return true
-      // Nested callback (e.g. setState inside onClick) — keep traversing upward
-      // Don't bail here; let the loop continue to find the enclosing context
+const VUE_SAFE_CALLS = new Set([
+  'onMounted', 'onUpdated', 'onBeforeMount', 'onBeforeUpdate',
+  'onActivated', 'onDeactivated', 'watch', 'watchEffect', 'watchPostEffect',
+  'watchSyncEffect', 'nextTick',
+])
+
+const ANGULAR_SAFE_METHODS = new Set([
+  'ngOnInit', 'ngAfterViewInit', 'ngAfterContentInit',
+  'ngOnChanges', 'ngDoCheck',
+])
+
+// Safe call names for each framework, merged for the combined check
+function buildSafeCalls(framework) {
+  if (framework === 'vue') return new Set([...REACT_SAFE_CALLS, ...VUE_SAFE_CALLS])
+  if (framework === 'angular') return new Set([...REACT_SAFE_CALLS, ...ANGULAR_SAFE_METHODS])
+  return REACT_SAFE_CALLS
+}
+
+function makeIsInsideSafeContext(safeCalls, framework) {
+  return function isInsideSafeContext(node) {
+    let cur = node.parent
+    while (cur) {
+      // Callback passed to useEffect / onMounted / watch etc.
+      if (
+        cur.type === 'CallExpression' &&
+        cur.callee?.name &&
+        safeCalls.has(cur.callee.name)
+      ) return true
+
+      // React JSX event handler: onClick={...}, onKeyDown={...}, etc.
+      if (
+        framework !== 'angular' &&
+        cur.type === 'JSXExpressionContainer' &&
+        cur.parent?.type === 'JSXAttribute' &&
+        cur.parent?.name?.name?.startsWith('on')
+      ) return true
+
+      // Angular: method defined directly on the class body (e.g. handleClick() { announce() })
+      // These are always safe — Angular calls them only in response to events or lifecycle.
+      if (
+        framework === 'angular' &&
+        cur.type === 'MethodDefinition' &&
+        !ANGULAR_SAFE_METHODS.has(cur.key?.name) // lifecycle methods are caught above via CallExpression
+      ) return true
+
+      // Regular function not passed as a callback — safe (event listener, async handler, etc.)
+      if (
+        cur.type === 'FunctionDeclaration' ||
+        cur.type === 'FunctionExpression' ||
+        cur.type === 'ArrowFunctionExpression'
+      ) {
+        const parent = cur.parent
+        if (parent?.type !== 'CallExpression') return true
+        if (parent.callee?.name && safeCalls.has(parent.callee.name)) return true
+        // Event handler function passed as a prop / method call
+        if (parent.callee?.type === 'MemberExpression') return true
+        // Keep traversing — may be a nested callback inside an onClick
+      }
+
+      cur = cur.parent
     }
-    cur = cur.parent
+    return false
+  }
+}
+
+function makeAnnounceMessage(framework) {
+  if (framework === 'vue') {
+    return (
+      '`{{fn}}()` called outside onMounted / watch / an event handler will fire on every ' +
+      'component setup, spamming screen readers. Move it into onMounted(() => { {{fn}}(...) }) ' +
+      'or call it from an event handler. (@ulam/taho)'
+    )
+  }
+  if (framework === 'angular') {
+    return (
+      '`{{fn}}()` called outside ngOnInit / ngAfterViewInit / an event method will fire on ' +
+      'every change-detection cycle, spamming screen readers. Move it into ngOnInit() or ' +
+      'call it from an event handler method. (@ulam/taho)'
+    )
   }
-  return false
+  return (
+    '`{{fn}}()` called outside a useEffect or event handler will fire on every render, ' +
+    'spamming screen readers. Move it into useEffect(() => { {{fn}}(...) }, [dep]) ' +
+    'or call it from an event handler. (@ulam/taho)'
+  )
 }
 
-export function makeNoAnnounceInRender() {
+export function makeNoAnnounceInRender({ framework = 'react' } = {}) {
+  const safeCalls = buildSafeCalls(framework)
+  const isInsideSafeContext = makeIsInsideSafeContext(safeCalls, framework)
+
   return {
     meta: {
       type: 'problem',
-      docs: { description: 'Disallow announce() called directly in a component render body' },
-      messages: {
-        inRender:
-          '`{{fn}}()` called outside a useEffect or event handler will fire on every render, ' +
-          'spamming screen readers. Move it into useEffect(() => { {{fn}}(...) }, [dep]) ' +
-          'or call it from an event handler. (@ulam/taho)',
-      },
+      docs: { description: 'Disallow announce() called directly in a component render body or setup' },
+      messages: { inRender: makeAnnounceMessage(framework) },
       schema: [],
     },
     create(context) {
@@ -208,12 +262,27 @@ export const ULAM_RULE_FACTORIES = {
   'no-use-page-title-in-remix': makeNoUsePageTitleInRemix,
 }
 
+/** React plugin: all three ulam rules. */
 export function buildUlamRules() {
-  const rules = {}
-  for (const [name, factory] of Object.entries(ULAM_RULE_FACTORIES)) {
-    rules[name] = factory()
+  return {
+    'no-announce-in-render':      makeNoAnnounceInRender({ framework: 'react' }),
+    'no-hash-router-in-remix':    makeNoHashRouterInRemix(),
+    'no-use-page-title-in-remix': makeNoUsePageTitleInRemix(),
+  }
+}
+
+/** Vue plugin: only the announce rule, tuned for Vue lifecycle hooks. */
+export function buildUlamRulesVue() {
+  return {
+    'no-announce-in-render': makeNoAnnounceInRender({ framework: 'vue' }),
+  }
+}
+
+/** Angular plugin: only the announce rule, tuned for Angular lifecycle methods. */
+export function buildUlamRulesAngular() {
+  return {
+    'no-announce-in-render': makeNoAnnounceInRender({ framework: 'angular' }),
   }
-  return rules
 }
 
 export function buildUlamRecommendedRules(ns) {
@@ -223,3 +292,10 @@ export function buildUlamRecommendedRules(ns) {
     [`${ns}/no-use-page-title-in-remix`]: 'warn',
   }
 }
+
+/** Recommended rules for Vue/Angular — only the announce rule applies. */
+export function buildUlamRecommendedRulesFramework(ns) {
+  return {
+    [`${ns}/no-announce-in-render`]: 'error',
+  }
+}

package/neighbor-eslint-angular.mjs

@@ -25,9 +25,10 @@
 
 import { h } from './lib/helpers-angular.js'
 import { buildRules, buildRecommendedRules, buildPortabilityRules } from './lib/rules.js'
+import { buildUlamRulesAngular, buildUlamRecommendedRulesFramework } from './lib/ulam-rules.js'
 
 const NS = '@a11yfred/neighbor'
-const rules = buildRules(h)
+const rules = { ...buildRules(h), ...buildUlamRulesAngular() }
 const plugin = { meta: { name: `${NS}/angular` }, rules }
 
 let angularA11y = null
@@ -60,6 +61,7 @@ export default {
         ...(angularA11y ? getAngularA11yRules(angularA11y) : {}),
         ...buildRecommendedRules(NS),
         ...buildPortabilityRules(NS),
+        ...buildUlamRecommendedRulesFramework(NS),
       },
     },
   },

package/neighbor-eslint-vue.mjs

@@ -20,9 +20,10 @@
 
 import { h } from './lib/helpers-vue.js'
 import { buildRules, buildRecommendedRules, buildPortabilityRules } from './lib/rules.js'
+import { buildUlamRulesVue, buildUlamRecommendedRulesFramework } from './lib/ulam-rules.js'
 
 const NS = '@a11yfred/neighbor'
-const rules = buildRules(h)
+const rules = { ...buildRules(h), ...buildUlamRulesVue() }
 const plugin = { meta: { name: `${NS}/vue` }, rules }
 
 let vueA11y = null
@@ -40,6 +41,7 @@ export default {
         ...(vueA11y ? vueA11y.configs['flat/recommended'].rules : {}),
         ...buildRecommendedRules(NS),
         ...buildPortabilityRules(NS),
+        ...buildUlamRecommendedRulesFramework(NS),
       },
     },
   },

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@a11yfred/neighbor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Accessibility linting plugin for a11yfred — Stylelint (user-preference fallbacks) and ESLint (bad ARIA patterns). Won't you be my neighbor?",
   "type": "module",
   "license": "MIT",
-  "files": ["lib", "*.mjs", "LICENSE", "README.md"],
+  "files": ["lib", "*.mjs", "LICENSE", "README.md", "CHANGELOG.md"],
   "main": "./neighbor-stylelint.mjs",
   "repository": {
     "type": "git",