@a11yfred/neighbor 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Changelog
+
+## 0.3.0 — 2026-05-12
+
+### New rule
+
+| Rule | What it catches |
+|---|---|
+| `ulam/no-forced-colors-none` | `forced-color-adjust: none` inside `@media (forced-colors)` — actively opts out of Windows High Contrast Mode |
+
+### Severity changes
+
+10 rules moved from `warn` to `off` in the recommended config — they flag real problems but are too noisy for most codebases by default. All remain available to opt in individually:
+
+`no-application-role`, `no-grid-role`, `no-aria-roledescription`, `no-aria-readonly`, `no-tab-without-controls`, `no-href-hash`, `warn-role-alert`, `prefer-aria-disabled`, `no-target-blank-without-label`, `no-dialog-without-close`
+
+`no-tooltip-role-misuse` and `no-menu-role-on-nav` remain on as warns.
+
+### Docs
+
+- WCAG SC and HTML spec links added throughout README and RULES.md
+- CONTRIBUTING.md, PR template, and issue templates added
+- README table of contents added
+- @ulam described as a JavaScript framework (not React-based)
+
+---
+
+## 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/CONTRIBUTING.md

@@ -0,0 +1,115 @@
+# Contributing to @a11yfred/neighbor
+
+Neighbor is maintained by [@a11yfred](https://github.com/a11yfred). Contributions are welcome from the accessibility community — practitioners, AT users, spec readers, and people who have found a gap in existing tooling.
+
+## What belongs here
+
+A rule belongs in neighbor if it meets all three criteria:
+
+1. **Statically detectable** — the violation can be identified from markup/code alone, without a browser or AT. Runtime-only failures (color contrast, focus order in the DOM) belong in axe-core.
+2. **Not already covered** — jsx-a11y, vuejs-accessibility, @angular-eslint/template, or axe-core doesn't already flag it in a recommended config.
+3. **Expert-backed** — there's a WCAG SC, ARIA spec citation, or clear consensus from accessibility practitioners (Roselli, O'Hara, Lauke, Sutton, Pickering, Groves, Eggert, etc.).
+
+If you're unsure, open an issue before writing a rule. A brief description and a source is enough to start a conversation.
+
+## What doesn't belong here
+
+- Rules that require runtime information (computed styles, DOM layout, AT output)
+- Rules already in jsx-a11y recommended — neighbor extends it, not replaces it
+- Opinionated style rules without a clear accessibility impact
+- Rules with very high false-positive rates on real codebases (see the rejected rules list in [RULES.md](RULES.md))
+
+## Setup
+
+```bash
+git clone https://github.com/a11yfred/neighbor.git
+cd neighbor
+npm install
+```
+
+No build step. Rules are plain ES modules — edit and run ESLint directly.
+
+## How rules are structured
+
+All ESLint rules live in [`lib/rules.js`](lib/rules.js) as factory functions:
+
+```js
+export function makeMyNewRule(h) {
+  return {
+    meta: {
+      type: 'problem',             // 'problem' | 'suggestion'
+      docs: { description: '...' },
+      messages: { myMessage: '...' },
+      schema: [],
+    },
+    create(context) {
+      return {
+        [h.elementVisitor](node) {
+          // h adapts the rule to React/Vue/Angular ASTs
+        },
+      }
+    },
+  }
+}
+```
+
+The `h` adapter gives you a uniform interface across all three frameworks:
+
+| Helper | Returns |
+|---|---|
+| `h.getAttr(node, name)` | attribute node or `null` |
+| `h.getAttrStringValue(attr)` | string or `null` (null for dynamic expressions) |
+| `h.getElementName(node)` | lowercase tag name, or `null` for custom components |
+| `h.hasAttr(node, name)` | boolean |
+| `h.getRoleValue(node)` | role string or `null` |
+| `h.hasAccessibleName(node)` | boolean — checks `aria-label` / `aria-labelledby` |
+| `h.isInteractiveElement(node)` | boolean |
+| `h.getParent(node)` | parent element node or `null` |
+| `h.getAncestors(node)` | iterable of ancestor element nodes, root-ward |
+| `h.getChildOpeningElements(node)` | iterable of direct child element nodes |
+| `h.getInnerHtmlAttr(node)` | `dangerouslySetInnerHTML` / `v-html` / `[innerHTML]` node or `null` |
+| `h.elementVisitor` | AST node type string for `create()` visitor key |
+| `h.elementWithChildrenVisitor` | visitor key for rules that need child access |
+
+**Angular caveat:** `getParent()` and `getAncestors()` return `null`/nothing for Angular — the template parser doesn't attach parent pointers. Rules that require ancestor walking should degrade gracefully (skip the check, don't throw).
+
+After writing your factory:
+
+1. Add it to `RULE_FACTORIES` at the bottom of `lib/rules.js`
+2. Add it to `buildRecommendedRules()` at the appropriate severity (`'error'` / `'warn'` / `'off'`)
+3. If it's Vue/Angular-only (porting a jsx-a11y gap), add it to `buildPortabilityRules()` instead
+
+Stylelint rules live in [`neighbor-stylelint.mjs`](neighbor-stylelint.mjs) and use the PostCSS AST directly. See the existing rules for the pattern.
+
+## Severity guidance
+
+| Severity | When to use |
+|---|---|
+| `error` | Unambiguous AT breakage — a phantom control, broken name computation, HTML spec violation. No legitimate override. |
+| `warn` | Strong guidance with a clear accessibility basis, but real codebases occasionally have justified exceptions. |
+| `off` | Real problem, but fires too often on legitimate patterns to be on by default. Make it available; let teams opt in. |
+
+When in doubt, start at `warn`. It's easier to promote a rule to `error` than to demote it after people have already configured it.
+
+## Commit style
+
+```
+feat: add no-my-new-rule (short description)
+fix: correct false positive in no-existing-rule
+docs: update RULES.md for no-my-new-rule
+```
+
+No ticket numbers required.
+
+## Opening a PR
+
+Use the PR template. The key things:
+
+- **What problem does this flag?** Link a WCAG SC, ARIA spec section, or expert source.
+- **Why can't axe-core catch it at runtime instead?** (If it can, it probably belongs there.)
+- **What are the false-positive cases?** Be honest — we'd rather move a rule to `off` than reject it.
+- **Does it degrade gracefully for Angular?** (Parent walking unavailable.)
+
+## Questions
+
+Open an issue or reach out in the [Web A11y Slack](https://web-a11y.slack.com). The `#tools` channel is a good place to discuss rule ideas before writing code.

package/README.md

@@ -2,6 +2,31 @@
 
 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.
 
+Some rules are specific to **@ulam** — an upcoming JavaScript framework by the same author. Those rules are prefixed `no-announce-in-render`, `no-hash-router-in-remix`, and `no-use-page-title-in-remix`. They activate only when @ulam-related imports are detected and are harmless in non-@ulam projects.
+
+## Contents
+
+- [Install](#install)
+- [Entry points](#entry-points)
+- [Setup](#setup)
+  - [React / JSX](#react--jsx)
+  - [Remix 2](#remix-2)
+  - [Remix 3](#remix-3)
+  - [Vue](#vue)
+  - [Angular](#angular)
+  - [Stylelint](#stylelint)
+- [Peer dependencies](#peer-dependencies)
+- [What neighbor adds](#what-neighbor-adds)
+  - [ESLint — React / JSX](#eslint--react--jsx)
+  - [ESLint — Remix 2](#eslint--remix-2)
+  - [ESLint — Vue SFCs](#eslint--vue-sfcs)
+  - [ESLint — Angular templates](#eslint--angular-templates)
+  - [Stylelint — CSS](#stylelint--css)
+- [Rule severity](#rule-severity)
+- [Contributing](CONTRIBUTING.md)
+- [See also](#see-also)
+- [License](#license)
+
 ## Install
 
 ```bash
@@ -12,7 +37,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 +64,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 +116,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 +136,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',
+    },
+  },
 ]
 ```
 
@@ -106,81 +190,97 @@ 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 |
+| `aria-disabled` keeps element reachable | `prefer-aria-disabled` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `aria-disabled` must block click handler | `no-unblocked-aria-disabled` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `aria-label` on a generic element with no role | `no-aria-label-on-generic` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `role="alert"` overuse | `warn-role-alert` | [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages) |
+| `aria-live="assertive"` outside `role="alert"` | `no-assertive-live-overuse` | [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages) |
+| `role="dialog"` requires accessible name | `no-roles-without-name` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="group"` with form controls requires name | `no-group-without-name` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `role="tooltip"` requires `id` on the tooltip | `no-tooltip-role-misuse` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
 | `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 |
+| `role="menu"` on nav triggers wrong AT mode | `no-menu-role-on-nav` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `role="presentation"` on a focusable element | `no-presentation-on-focusable` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `role="log"` must not contain interactive children | `no-log-with-interactive-children` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="img"` requires accessible name | `no-image-role-without-name` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="tab"` requires `aria-selected` | `no-tabs-without-structure` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="tab"` should declare `aria-controls` | `no-tab-without-controls` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="combobox"` requires `aria-expanded` | `no-combobox-without-expanded` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="slider"` requires value range attributes | `no-slider-without-range` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="spinbutton"` requires value range attributes | `no-spinbutton-without-range` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="listbox"` requires `role="option"` children | `no-listbox-without-option` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="tree"` requires `role="treeitem"` children | `no-tree-without-treeitem` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `role="feed"` requires `role="article"` children | `no-feed-without-article` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
 | `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 |
+| `aria-owns` on a void element | `no-aria-owns-on-void` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `aria-activedescendant` requires a non-empty static ID | `no-aria-activedescendant-without-id` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `aria-required` only valid on form-control roles | `no-aria-required-on-non-form` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `<a>` with only aria-hidden children | `no-aria-hidden-in-link` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `<button>` with only aria-hidden children | `no-empty-button` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `<input>` placeholder used as sole label | `no-placeholder-only` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `<input>` with invalid type value | `no-input-type-invalid` | [1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose) |
+| `<button>` in a form missing explicit type | `no-button-type-missing` | [HTML spec](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element) |
+| `<summary>` outside `<details>` | `no-summary-without-details` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `<a href="#">` used as a button | `no-href-hash` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `target="_blank"` without new-tab disclosure | `no-target-blank-without-label` | [3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input) |
+| Duplicate `id` breaks ARIA relationships | `no-duplicate-id` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| Positive `tabIndex` breaks tab order | `no-positive-tabindex` | [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) |
+| Heading inside an interactive element | `no-heading-inside-interactive` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `title` attribute as the only accessible name | `no-title-as-label` | [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) |
+| `<video>` or `<audio autoplay>` without controls | `no-autoplay-without-controls` | [1.4.2](https://www.w3.org/WAI/WCAG21/Understanding/audio-control) |
+| Mouse-only events without keyboard equivalents | `no-mouse-only-events` | [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
+| `aria-labelledby`/`describedby` references missing `id` | `no-labelledby-missing-target` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| `dangerouslySetInnerHTML` outside a live region | `no-dynamic-content-without-live` | [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages) |
+| Multiple `<label>` elements for the same control | `form-field-multiple-labels` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `<th>` or header role with no accessible text | `no-empty-table-header` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `announce()` called in component render body | `no-announce-in-render` | [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages) |
+
+### 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 |
 | --- | --- | --- |
-| 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 |
+| Ambiguous link text ("click here", "read more") | `no-anchor-ambiguous-text` | [2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) |
+| `<a>` with no content and no accessible name | `no-anchor-no-content` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| Invalid ARIA attribute values | `no-invalid-aria-prop-value` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| Invalid `autocomplete` token | `no-autocomplete-invalid` | [1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose) |
+| Heading with no content | `no-heading-no-content` | [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) |
+| `<iframe>` without `title` | `no-iframe-no-title` | [4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
+| Alt text contains "image", "photo" | `no-img-redundant-alt` | [1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) |
+| `accessKey` attribute | `no-access-key` | [2.1.4](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts) |
+| `scope` on `<td>` (only valid on `<th>`) | `no-scope-on-td` | [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) |
+| `announce()` called outside `onMounted`/`watch`/handler | `no-announce-in-render` | [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages) |
 
 ### 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
 
 | 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 |
+| `ulam/user-preferences` | Warns when motion, transparency, or alpha colors are used without `@media (prefers-*)` fallbacks — [SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) / [SC 2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) |
+| `ulam/no-outline-none` | Disallows bare `outline: none` or `outline: 0` outside `:focus` selectors — [SC 2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) |
+| `ulam/no-forced-colors-none` | Disallows `forced-color-adjust: none` inside `@media (forced-colors)` — opts out of Windows High Contrast Mode — [SC 1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast) |
 
 ## Rule severity
 
@@ -188,6 +288,7 @@ Neighbor adds the same rule set as Vue, adapted for Angular's template AST.
 | --- | --- |
 | `error` | Definite AT breakage or HTML spec violation |
 | `warn` | Strong guidance, occasional legitimate overrides exist |
+| `off` | Available but disabled — too noisy for most codebases, enable if it fits your project |
 
 All rules can be overridden in your config.
 

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,20 +2369,26 @@ 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',
-    [`${ns}/no-application-role`]:                        'warn',
-    [`${ns}/no-grid-role`]:                               'warn',
     [`${ns}/no-menu-role-on-nav`]:                        'warn',
-    [`${ns}/no-aria-roledescription`]:                    'warn',
-    [`${ns}/no-aria-readonly`]:                           'warn',
-    [`${ns}/no-tab-without-controls`]:                    'warn',
-    [`${ns}/no-href-hash`]:                               'warn',
-    [`${ns}/warn-role-alert`]:                            'warn',
-    [`${ns}/prefer-aria-disabled`]:                       'warn',
-    [`${ns}/no-target-blank-without-label`]:              'warn',
-    [`${ns}/no-dialog-without-close`]:                    'warn',
+    // off by default — available to opt in, but noisy in real codebases
+    // enable individually if the pattern applies to your project
+    [`${ns}/no-application-role`]:                        'off',
+    [`${ns}/no-grid-role`]:                               'off',
+    [`${ns}/no-aria-roledescription`]:                    'off',
+    [`${ns}/no-aria-readonly`]:                           'off',
+    [`${ns}/no-tab-without-controls`]:                    'off',
+    [`${ns}/no-href-hash`]:                               'off',
+    [`${ns}/warn-role-alert`]:                            'off',
+    [`${ns}/prefer-aria-disabled`]:                       'off',
+    [`${ns}/no-target-blank-without-label`]:              'off',
+    [`${ns}/no-dialog-without-close`]:                    'off',
   }
 }
 

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/neighbor-stylelint.mjs

@@ -193,4 +193,64 @@ const noOutlineNone = {
   meta: noOutlineNoneMeta,
 };
 
-export default [userPreferences, noOutlineNone];
+// ─── Rule: ulam/no-forced-colors-none ────────────────────────────────────────
+// forced-color-adjust: none inside @media (forced-colors) actively opts out of
+// Windows High Contrast Mode and other forced-colors user settings. For users
+// who depend on forced colors this is their last resort for viewing content —
+// overriding it is a serious accessibility regression.
+//
+// Legitimate narrow exceptions exist (e.g. color pickers where all swatches
+// would collapse to CanvasText). Those should be scoped tightly to the specific
+// element, not a whole section, and are typically few enough to suppress inline.
+//
+// Ref: Sarah Higley — forced-color-adjust: none (sarahmhigley.com)
+//      Adrian Roselli — WHCM and System Colors (adrianroselli.com)
+//      WCAG SC 1.4.11 Non-text Contrast; SC 1.4.3 Contrast (Minimum)
+
+const noForcedColorsNoneRuleName = 'ulam/no-forced-colors-none';
+
+const noForcedColorsNoneMessages = {
+  none: (selector) =>
+    `forced-color-adjust: none on "${selector}" inside @media (forced-colors) opts out of ` +
+    `Windows High Contrast Mode, removing all forced-color overrides for these elements. ` +
+    `Users who depend on forced colors lose visibility entirely. ` +
+    `Remove forced-color-adjust: none, or scope it to the narrowest possible element ` +
+    `(e.g. a color-picker swatch) and add a comment explaining why. ` +
+    `(Higley / Roselli — WCAG SC 1.4.11 / SC 1.4.3)`,
+};
+
+const noForcedColorsNoneMeta = { url: 'https://github.com/a11yfred/neighbor' };
+
+/** Returns true if the node is directly inside a @media (forced-colors) block. */
+function insideForcedColorsMedia(node) {
+  let current = node.parent;
+  while (current) {
+    if (
+      current.type === 'atrule' &&
+      current.name === 'media' &&
+      /forced-colors/.test(current.params)
+    ) return true;
+    current = current.parent;
+  }
+  return false;
+}
+
+/** @type {import('stylelint').Rule} */
+function noForcedColorsNoneRule(_primaryOption) {
+  return (root, result) => {
+    root.walkDecls(/^forced-color-adjust$/i, (decl) => {
+      if (decl.value.trim().toLowerCase() !== 'none') return;
+      if (!insideForcedColorsMedia(decl)) return;
+      const selector = decl.parent?.selector ?? decl.parent?.name ?? '(unknown)';
+      decl.warn(result, noForcedColorsNoneMessages.none(selector), { rule: noForcedColorsNoneRuleName });
+    });
+  };
+}
+
+const noForcedColorsNone = {
+  ruleName: noForcedColorsNoneRuleName,
+  rule: noForcedColorsNoneRule,
+  meta: noForcedColorsNoneMeta,
+};
+
+export default [userPreferences, noOutlineNone, noForcedColorsNone];

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@a11yfred/neighbor",
-  "version": "0.1.0",
+  "version": "0.3.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", "CONTRIBUTING.md"],
   "main": "./neighbor-stylelint.mjs",
   "repository": {
     "type": "git",