@a11yfred/neighbor 1.0.4 → 2.0.0

package/lib/ulam-rules.js

@@ -254,20 +254,154 @@ export function makeNoUsePageTitleInRemix() {
   }
 }
 
+// ─── no-disabled-and-aria-disabled ───────────────────────────────────────────
+//
+// HTML5 disabled attribute and aria-disabled should not be used together on the
+// same element or nested within each other (e.g., element with disabled containing
+// a child with aria-disabled or vice versa). This creates conflicting semantics:
+// - Native disabled (on form controls) is a concrete state
+// - aria-disabled (on any element) is an accessibility annotation
+// Using both leads to inconsistent screen reader announcements and styling conflicts.
+//
+// Solution: Use only aria-disabled on all custom controls; use only disabled on
+// native form controls (button, input, select, textarea).
+
+function hasDisabledInAncestors(node) {
+  let current = node
+  while (current) {
+    if (current.type === 'JSXOpeningElement' || current.type === 'JSXSelfClosingElement') {
+      const attrs = current.attributes || []
+      const hasDisabled = attrs.some(attr =>
+        (attr.type === 'JSXAttribute' && attr.name?.name === 'disabled') ||
+        (attr.type === 'JSXSpreadAttribute')
+      )
+      if (hasDisabled) return true
+    }
+    current = current.parent
+  }
+  return false
+}
+
+function hasAriaDisabledInAncestors(node) {
+  let current = node
+  while (current) {
+    if (current.type === 'JSXOpeningElement' || current.type === 'JSXSelfClosingElement') {
+      const attrs = current.attributes || []
+      const hasAriaDis = attrs.some(attr =>
+        attr.type === 'JSXAttribute' &&
+        attr.name?.name === 'aria-disabled'
+      )
+      if (hasAriaDis) return true
+    }
+    current = current.parent
+  }
+  return false
+}
+
+function hasDisabledInChildren(node) {
+  if (!node.children) return false
+  for (const child of node.children) {
+    if (child.type === 'JSXElement') {
+      const attrs = child.openingElement?.attributes || []
+      if (attrs.some(attr => attr.type === 'JSXAttribute' && attr.name?.name === 'disabled')) {
+        return true
+      }
+      if (hasDisabledInChildren(child)) return true
+    } else if (child.type === 'JSXFragment') {
+      if (hasDisabledInChildren(child)) return true
+    }
+  }
+  return false
+}
+
+function hasAriaDisabledInChildren(node) {
+  if (!node.children) return false
+  for (const child of node.children) {
+    if (child.type === 'JSXElement') {
+      const attrs = child.openingElement?.attributes || []
+      if (attrs.some(attr => attr.type === 'JSXAttribute' && attr.name?.name === 'aria-disabled')) {
+        return true
+      }
+      if (hasAriaDisabledInChildren(child)) return true
+    } else if (child.type === 'JSXFragment') {
+      if (hasAriaDisabledInChildren(child)) return true
+    }
+  }
+  return false
+}
+
+export function makeNoDisabledAndAriaDisabled() {
+  return {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: 'Disallow disabled and aria-disabled used together on same element or nested',
+        url: 'https://www.w3.org/WAI/ARIA/apg/'
+      },
+      messages: {
+        sameElement:
+          'Element has both `disabled` and `aria-disabled="true"`. Use only `aria-disabled` for custom controls ' +
+          'or only `disabled` for native form controls (button, input, select, textarea), not both.',
+        nestedDisabledInAriaDis:
+          'Element with `aria-disabled="true"` contains a descendant with native `disabled` attribute. ' +
+          'Use either `aria-disabled` consistently across the tree or `disabled` on native controls only, ' +
+          'not nested combinations.',
+        nestedAriaDisInDisabled:
+          'Element with `disabled` contains a descendant with `aria-disabled="true"`. ' +
+          'Use either `disabled` on native form controls or `aria-disabled` consistently, not both nested.',
+      },
+      schema: [],
+    },
+    create(context) {
+      return {
+        'JSXOpeningElement, JSXSelfClosingElement'(node) {
+          const attrs = node.attributes || []
+          const hasDisabled = attrs.some(attr =>
+            attr.type === 'JSXAttribute' && attr.name?.name === 'disabled'
+          )
+          const hasAriaDis = attrs.some(attr =>
+            attr.type === 'JSXAttribute' && attr.name?.name === 'aria-disabled'
+          )
+
+          // Check: both on same element
+          if (hasDisabled && hasAriaDis) {
+            context.report({ node, messageId: 'sameElement' })
+            return
+          }
+
+          // Check: aria-disabled parent with disabled child
+          if (hasAriaDis && hasDisabledInChildren(node.parent)) {
+            context.report({ node, messageId: 'nestedDisabledInAriaDis' })
+            return
+          }
+
+          // Check: disabled parent with aria-disabled child
+          if (hasDisabled && hasAriaDisabledInChildren(node.parent)) {
+            context.report({ node, messageId: 'nestedAriaDisInDisabled' })
+            return
+          }
+        },
+      }
+    },
+  }
+}
+
 // ─── All ulam rule factories ──────────────────────────────────────────────────
 
 export const ULAM_RULE_FACTORIES = {
-  'no-announce-in-render':      makeNoAnnounceInRender,
-  'no-hash-router-in-remix':    makeNoHashRouterInRemix,
-  'no-use-page-title-in-remix': makeNoUsePageTitleInRemix,
+  'no-announce-in-render':           makeNoAnnounceInRender,
+  'no-hash-router-in-remix':         makeNoHashRouterInRemix,
+  'no-use-page-title-in-remix':      makeNoUsePageTitleInRemix,
+  'no-disabled-and-aria-disabled':   makeNoDisabledAndAriaDisabled,
 }
 
-/** React plugin: all three ulam rules. */
+/** React plugin: all ulam rules. */
 export function buildUlamRules() {
   return {
-    'no-announce-in-render':      makeNoAnnounceInRender({ framework: 'react' }),
-    'no-hash-router-in-remix':    makeNoHashRouterInRemix(),
-    'no-use-page-title-in-remix': makeNoUsePageTitleInRemix(),
+    'no-announce-in-render':           makeNoAnnounceInRender({ framework: 'react' }),
+    'no-hash-router-in-remix':         makeNoHashRouterInRemix(),
+    'no-use-page-title-in-remix':      makeNoUsePageTitleInRemix(),
+    'no-disabled-and-aria-disabled':   makeNoDisabledAndAriaDisabled(),
   }
 }
 
@@ -287,9 +421,10 @@ export function buildUlamRulesAngular() {
 
 export function buildUlamRecommendedRules(ns) {
   return {
-    [`${ns}/no-announce-in-render`]:      'error',
-    [`${ns}/no-hash-router-in-remix`]:    'warn',
-    [`${ns}/no-use-page-title-in-remix`]: 'warn',
+    [`${ns}/no-announce-in-render`]:         'error',
+    [`${ns}/no-hash-router-in-remix`]:       'warn',
+    [`${ns}/no-use-page-title-in-remix`]:    'warn',
+    [`${ns}/no-disabled-and-aria-disabled`]: 'error',
   }
 }
 

package/neighbor-content.mjs

@@ -57,7 +57,7 @@
  *   SJSU Writing Ctr sjsu.edu/writingcenter/docs/handouts/Accessible Writing Strategies.pdf
  */
 
-import { CONTENT_RULE_FACTORIES, buildContentRecommendedRules } from './lib/content-rules.js'
+import { CONTENT_RULE_FACTORIES, buildContentRecommendedRules } from '@a11yfred/neighbor/lib/content-rules.js'
 
 const NS = '@a11yfred/neighbor/content'
 

package/neighbor-eslint-angular.mjs

@@ -23,12 +23,13 @@
  *   ]
  */
 
-import { h } from './lib/helpers-angular.js'
-import { buildRules, buildRecommendedRules, buildPortabilityRules } from './lib/rules.js'
-import { buildUlamRulesAngular, buildUlamRecommendedRulesFramework } from './lib/ulam-rules.js'
+import { h } from '@a11yfred/neighbor/lib/helpers-angular.js'
+import { buildRules, buildRecommendedRules, buildPortabilityRules } from '@a11yfred/neighbor/lib/rules.js'
+import { buildUlamRulesAngular, buildUlamRecommendedRulesFramework } from '@a11yfred/neighbor/lib/ulam-rules.js'
+import { buildAngularFrameworkRules, buildAngularHostRecommendedRules } from '@a11yfred/neighbor/lib/framework-rules.js'
 
 const NS = '@a11yfred/neighbor'
-const rules = { ...buildRules(h), ...buildUlamRulesAngular() }
+const rules = { ...buildRules(h), ...buildUlamRulesAngular(), ...buildAngularFrameworkRules() }
 const plugin = { meta: { name: `${NS}/angular` }, rules }
 
 let angularA11y = null
@@ -41,14 +42,36 @@ const ANGULAR_A11Y_RULES = [
   'no-positive-tabindex', 'role-has-required-aria', 'table-scope', 'valid-aria',
 ]
 
+const UNLIKELY_ANGULAR_RULES = new Set([
+  'no-autofocus', 'no-distracting-elements'
+])
+
 function getAngularA11yRules(plugin) {
   const out = {}
   for (const rule of ANGULAR_A11Y_RULES) {
-    if (plugin.rules?.[rule]) out[`@angular-eslint/template/${rule}`] = 'error'
+    if (plugin.rules?.[rule]) {
+      out[`@angular-eslint/template/${rule}`] = UNLIKELY_ANGULAR_RULES.has(rule) ? 'off' : 'error'
+    }
   }
   return out
 }
 
+const angularRecommended = {
+  ...buildRecommendedRules(NS),
+  ...buildPortabilityRules(NS),
+  ...buildUlamRecommendedRulesFramework(NS),
+  ...buildAngularHostRecommendedRules(NS),
+}
+
+// Omit rules that are already covered by @angular-eslint/template (if installed):
+if (angularA11y) {
+  delete angularRecommended[`${NS}/no-heading-no-content`] // covered by @angular-eslint/template/elements-content
+  delete angularRecommended[`${NS}/no-anchor-no-content`] // covered by @angular-eslint/template/elements-content
+  delete angularRecommended[`${NS}/no-img-redundant-alt`] // covered by @angular-eslint/template/alt-text
+  delete angularRecommended[`${NS}/no-scope-on-td`] // covered by @angular-eslint/template/table-scope
+  delete angularRecommended[`${NS}/no-invalid-aria-prop-value`] // covered by @angular-eslint/template/valid-aria
+}
+
 export default {
   ...plugin,
   configs: {
@@ -59,9 +82,7 @@ export default {
       },
       rules: {
         ...(angularA11y ? getAngularA11yRules(angularA11y) : {}),
-        ...buildRecommendedRules(NS),
-        ...buildPortabilityRules(NS),
-        ...buildUlamRecommendedRulesFramework(NS),
+        ...angularRecommended,
       },
     },
   },

package/neighbor-eslint-lit.mjs

@@ -0,0 +1,85 @@
+/**
+ * @a11yfred/neighbor  -  ESLint plugin (Lit)
+ *
+ * Flags Lit-specific accessibility issues like autofocus within html`...` templates.
+ *
+ * Usage in eslint.config.js:
+ *   import neighborLit from '@a11yfred/neighbor/lit'
+ *
+ *   export default [
+ *     {
+ *       files: ['**/*.ts', '**/*.js'],
+ *       plugins: { '@a11yfred/neighbor': neighborLit },
+ *       rules: neighborLit.configs.recommended.rules,
+ *     },
+ *   ]
+ */
+
+import { buildLitRules, buildLitRecommendedRules } from '@a11yfred/neighbor/lib/framework-rules.js'
+import { buildRecommendedRules, buildPortabilityRules } from '@a11yfred/neighbor/lib/rules.js'
+
+const NS = '@a11yfred/neighbor'
+const rules = buildLitRules()
+const plugin = { meta: { name: `${NS}/lit` }, rules }
+
+let litA11y = null
+try { litA11y = (await import('eslint-plugin-lit-a11y')).default } catch {}
+
+const LIT_A11Y_RULES = [
+  'accessible-emoji', 'alt-text', 'anchor-is-valid', 'aria-activedescendant-has-tabindex',
+  'aria-attr-valid-value', 'aria-attrs', 'aria-role', 'aria-unsupported-elements',
+  'click-events-have-key-events', 'heading-has-content', 'iframe-title',
+  'img-redundant-alt', 'mouse-events-have-key-events', 'no-access-key',
+  'no-autofocus', 'no-distracting-elements', 'no-redundant-role',
+  'role-has-required-aria-props', 'role-supports-aria-props', 'scope', 'tabindex-no-positive',
+  'valid-lang'
+]
+
+const UNLIKELY_LIT_RULES = new Set([
+  'accessible-emoji', 'no-autofocus', 'no-distracting-elements', 'no-redundant-role'
+])
+
+function getLitA11yRules(plugin) {
+  const out = {}
+  for (const rule of LIT_A11Y_RULES) {
+    if (plugin.rules?.[rule]) {
+      out[`lit-a11y/${rule}`] = UNLIKELY_LIT_RULES.has(rule) ? 'off' : 'error'
+    }
+  }
+  return out
+}
+
+const litRecommended = {
+  ...buildRecommendedRules(NS),
+  ...buildPortabilityRules(NS),
+  ...buildLitRecommendedRules(NS),
+}
+
+// Omit rules that are already covered by lit-a11y (if installed):
+if (litA11y) {
+  delete litRecommended[`${NS}/no-heading-no-content`] // covered by lit-a11y/heading-has-content
+  delete litRecommended[`${NS}/no-iframe-no-title`] // covered by lit-a11y/iframe-title
+  delete litRecommended[`${NS}/no-img-redundant-alt`] // covered by lit-a11y/img-redundant-alt
+  delete litRecommended[`${NS}/no-access-key`] // covered by lit-a11y/no-access-key
+  delete litRecommended[`${NS}/no-aria-activedescendant-no-tabindex`] // covered by lit-a11y/aria-activedescendant-has-tabindex
+  delete litRecommended[`${NS}/no-anchor-no-content`] // covered by lit-a11y/anchor-is-valid
+  delete litRecommended[`${NS}/no-invalid-aria-prop-value`] // covered by lit-a11y/aria-attr-valid-value
+  delete litRecommended[`${NS}/no-role-supports-aria-props`] // covered by lit-a11y/role-supports-aria-props
+  delete litRecommended[`${NS}/no-scope-on-td`] // covered by lit-a11y/scope
+}
+
+export default {
+  ...plugin,
+  configs: {
+    recommended: {
+      plugins: {
+        [NS]: plugin,
+        ...(litA11y ? { 'lit-a11y': litA11y } : {}),
+      },
+      rules: {
+        ...(litA11y ? getLitA11yRules(litA11y) : {}),
+        ...litRecommended,
+      },
+    },
+  },
+}

package/neighbor-eslint-remix3.mjs

@@ -0,0 +1,49 @@
+/**
+ * @a11yfred/neighbor  -  ESLint plugin (Remix 3)
+ *
+ * Flags the same ARIA anti-patterns as neighbor-eslint.mjs, plus specific
+ * ulam rules tailored for Remix (e.g., no-use-page-title-in-remix).
+ *
+ * Usage in eslint.config.js:
+ *   import neighbor from '@a11yfred/neighbor/remix3'
+ *
+ *   export default [
+ *     {
+ *       files: ['**/*.tsx', '**/*.jsx'],
+ *       plugins: { '@a11yfred/neighbor': neighbor },
+ *       rules: neighbor.configs.recommended.rules,
+ *     },
+ *   ]
+ */
+
+import { h } from '@a11yfred/neighbor/lib/helpers-jsx.js'
+import { buildRules, buildRecommendedRules, buildReactFrameworkRules } from '@a11yfred/neighbor/lib/rules.js'
+import { buildUlamRules, buildUlamRecommendedRules } from '@a11yfred/neighbor/lib/ulam-rules.js'
+import { buildRemixRules, buildRemixRecommendedRules } from '@a11yfred/neighbor/lib/framework-rules.js'
+
+const NS = '@a11yfred/neighbor'
+const rules = { ...buildRules(h), ...buildUlamRules(), ...buildRemixRules() }
+
+const plugin = { meta: { name: `${NS}/remix3` }, rules }
+
+let jsxA11y = null
+try { jsxA11y = (await import('eslint-plugin-jsx-a11y')).default } catch {}
+
+export default {
+  ...plugin,
+  configs: {
+    recommended: {
+      plugins: {
+        [NS]: plugin,
+        ...(jsxA11y ? { 'jsx-a11y': jsxA11y } : {}),
+      },
+      rules: {
+        ...(jsxA11y ? jsxA11y.configs.recommended.rules : {}),
+        ...buildRecommendedRules(NS),
+        ...buildUlamRecommendedRules(NS),
+        ...buildReactFrameworkRules(NS),
+        ...buildRemixRecommendedRules(NS),
+      },
+    },
+  },
+}

package/neighbor-eslint-vue.mjs

@@ -18,9 +18,9 @@
  *   ]
  */
 
-import { h } from './lib/helpers-vue.js'
-import { buildRules, buildRecommendedRules, buildPortabilityRules } from './lib/rules.js'
-import { buildUlamRulesVue, buildUlamRecommendedRulesFramework } from './lib/ulam-rules.js'
+import { h } from '@a11yfred/neighbor/lib/helpers-vue.js'
+import { buildRules, buildRecommendedRules, buildPortabilityRules, buildVueFrameworkRules } from '@a11yfred/neighbor/lib/rules.js'
+import { buildUlamRulesVue, buildUlamRecommendedRulesFramework } from '@a11yfred/neighbor/lib/ulam-rules.js'
 
 const NS = '@a11yfred/neighbor'
 const rules = { ...buildRules(h), ...buildUlamRulesVue() }
@@ -29,6 +29,24 @@ const plugin = { meta: { name: `${NS}/vue` }, rules }
 let vueA11y = null
 try { vueA11y = (await import('eslint-plugin-vuejs-accessibility')).default } catch {}
 
+const vueRecommended = {
+  ...buildRecommendedRules(NS),
+  ...buildPortabilityRules(NS),
+  ...buildUlamRecommendedRulesFramework(NS),
+  ...buildVueFrameworkRules(NS),
+}
+
+// Omit rules that are already covered by vuejs-accessibility (if installed):
+if (vueA11y) {
+  delete vueRecommended[`${NS}/no-heading-no-content`] // covered by vuejs-accessibility/heading-has-content
+  delete vueRecommended[`${NS}/no-iframe-no-title`] // covered by vuejs-accessibility/iframe-has-title
+  delete vueRecommended[`${NS}/no-access-key`] // covered by vuejs-accessibility/no-access-key
+  delete vueRecommended[`${NS}/no-img-redundant-alt`] // covered by vuejs-accessibility/alt-text
+  delete vueRecommended[`${NS}/no-anchor-no-content`] // covered by vuejs-accessibility/anchor-has-content
+  delete vueRecommended[`${NS}/no-invalid-aria-prop-value`] // covered by vuejs-accessibility/aria-props
+  delete vueRecommended[`${NS}/no-role-supports-aria-props`] // covered by vuejs-accessibility/aria-role
+}
+
 export default {
   ...plugin,
   configs: {
@@ -39,9 +57,11 @@ export default {
       },
       rules: {
         ...(vueA11y ? vueA11y.configs['flat/recommended'].rules : {}),
-        ...buildRecommendedRules(NS),
-        ...buildPortabilityRules(NS),
-        ...buildUlamRecommendedRulesFramework(NS),
+        'vuejs-accessibility/accessible-emoji': 'off',
+        'vuejs-accessibility/no-autofocus': 'off',
+        'vuejs-accessibility/no-distracting-elements': 'off',
+        'vuejs-accessibility/no-redundant-roles': 'off',
+        ...vueRecommended,
       },
     },
   },

package/neighbor-eslint-webcomponents.mjs

@@ -0,0 +1,41 @@
+/**
+ * @a11yfred/neighbor  -  ESLint plugin (Vanilla Web Components / HTML)
+ *
+ * Flags ARIA anti-patterns in vanilla HTML or Web Component templates.
+ * Requires @html-eslint/parser as the project's ESLint parser for .html files.
+ *
+ * Usage in eslint.config.js:
+ *   import htmlParser from '@html-eslint/parser'
+ *   import neighbor from '@a11yfred/neighbor/webcomponents'
+ *
+ *   export default [
+ *     {
+ *       files: ['**/*.html'],
+ *       languageOptions: { parser: htmlParser },
+ *       plugins: { '@a11yfred/neighbor': neighbor },
+ *       rules: neighbor.configs.recommended.rules,
+ *     },
+ *   ]
+ */
+
+import { h } from '@a11yfred/neighbor/lib/helpers-webcomponents.js'
+import { buildRules, buildRecommendedRules } from '@a11yfred/neighbor/lib/rules.js'
+
+const NS = '@a11yfred/neighbor'
+const rules = buildRules(h)
+
+const plugin = { meta: { name: `${NS}/webcomponents` }, rules }
+
+export default {
+  ...plugin,
+  configs: {
+    recommended: {
+      plugins: {
+        [NS]: plugin,
+      },
+      rules: {
+        ...buildRecommendedRules(NS),
+      },
+    },
+  },
+}

package/neighbor-eslint.mjs

@@ -28,28 +28,35 @@
  *   input missing label                → jsx-a11y/label-has-associated-control
  */
 
-import jsxA11y from 'eslint-plugin-jsx-a11y'
-import { h } from './lib/helpers-jsx.js'
-import { buildRules, buildRecommendedRules } from './lib/rules.js'
-import { buildUlamRules, buildUlamRecommendedRules } from './lib/ulam-rules.js'
+import { h } from '@a11yfred/neighbor/lib/helpers-jsx.js'
+import { buildRules, buildRecommendedRules, buildReactFrameworkRules } from '@a11yfred/neighbor/lib/rules.js'
+import { buildUlamRules, buildUlamRecommendedRules } from '@a11yfred/neighbor/lib/ulam-rules.js'
 
 const NS = '@a11yfred/neighbor'
 const rules = { ...buildRules(h), ...buildUlamRules() }
 
 const plugin = { meta: { name: NS }, rules }
 
+let jsxA11y = null
+try { jsxA11y = (await import('eslint-plugin-jsx-a11y')).default } catch {}
+
 export default {
   ...plugin,
   configs: {
     recommended: {
       plugins: {
         [NS]: plugin,
-        'jsx-a11y': jsxA11y,
+        ...(jsxA11y ? { 'jsx-a11y': jsxA11y } : {}),
       },
       rules: {
-        ...jsxA11y.configs.recommended.rules,
+        ...(jsxA11y ? jsxA11y.configs.recommended.rules : {}),
+        'jsx-a11y/accessible-emoji': 'off',
+        'jsx-a11y/no-autofocus': 'off',
+        'jsx-a11y/no-distracting-elements': 'off',
+        'jsx-a11y/no-redundant-roles': 'off',
         ...buildRecommendedRules(NS),
         ...buildUlamRecommendedRules(NS),
+        ...buildReactFrameworkRules(NS),
       },
     },
   },