@a11yfred/neighbor 1.1.2 → 2.0.0

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),
       },
     },
   },

package/neighbor-stylelint.mjs

@@ -14,6 +14,15 @@
  */
 
 import stylelint from 'stylelint';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+let a11yLoaded = false;
+try {
+  require.resolve('stylelint-a11y');
+  a11yLoaded = true;
+} catch {}
+
 const { utils: { report } } = stylelint;
 
 const defined = (x) => x !== undefined && x !== null;
@@ -126,6 +135,8 @@ function rule(primaryOption) {
 
       // animation or transition
       if (prop === 'animation' || prop === 'transition' || prop === 'animation-name') {
+        // If stylelint-a11y is installed, it already checks prefers-reduced-motion
+        if (a11yLoaded) return;
         // Skip "none" values  -  they're already the reduced state
         if (/^none\b/i.test(value.trim())) return;
         report(decl, messages.animation(prop, value));
@@ -172,7 +183,7 @@ function isFocusSelector(selector) {
   return /:focus(?:-visible|-within)?/i.test(selector);
 }
 
-/** Returns true if the node is inside a @media (pointer: fine/coarse) block — keyboard users are unaffected. */
+/** Returns true if the node is inside a @media (pointer: fine/coarse) block - keyboard users are unaffected. */
 function insidePointerMedia(node) {
   let current = node.parent;
   while (current) {
@@ -199,13 +210,16 @@ function insideFocusSelector(decl) {
 /** @type {import('stylelint').Rule} */
 function noOutlineNoneRule(_primaryOption) {
   return (root, result) => {
+    // Redundant with stylelint-a11y/no-outline-none
+    if (a11yLoaded) return;
+
     root.walkDecls(/^outline$/i, (decl) => {
       const value = decl.value.trim().toLowerCase();
       if (value !== 'none' && value !== '0') return;
 
       // Allow inside :focus / :focus-visible (author is intentionally restyling focus)
       if (insideFocusSelector(decl)) return;
-      // Allow inside @media (pointer: fine/coarse) — keyboard users are unaffected
+      // Allow inside @media (pointer: fine/coarse) - keyboard users are unaffected
       if (insidePointerMedia(decl)) return;
 
       report({ message: noOutlineNoneMessages.removed(decl.value), node: decl, result, ruleName: noOutlineNoneRuleName });
@@ -279,4 +293,128 @@ const noForcedColorsNone = {
   meta: noForcedColorsNoneMeta,
 };
 
-export default [userPreferences, noOutlineNone, noForcedColorsNone];
+// ─── Rule: neighbor/no-text-justify ──────────────────────────────────────────
+// text-align: justify creates inconsistent spacing ("rivers of white space").
+// This makes it significantly harder for users with cognitive disabilities like dyslexia to read.
+// Ref: WCAG SC 1.4.8 Visual Presentation (AAA)
+
+const noTextJustifyRuleName = 'neighbor/no-text-justify';
+
+const noTextJustifyMessages = {
+  justify: () =>
+    `text-align: justify creates uneven spacing that is difficult for users with dyslexia or cognitive disabilities to read. Use left, right, or center instead. (WCAG 1.4.8)`,
+};
+
+const noTextJustifyMeta = { url: 'https://github.com/a11yfred/neighbor' };
+
+/** @type {import('stylelint').Rule} */
+function noTextJustifyRule(_primaryOption) {
+  return (root, result) => {
+    // Redundant with stylelint-a11y/no-text-align-justify
+    if (a11yLoaded) return;
+
+    root.walkDecls(/^text-align$/i, (decl) => {
+      if (decl.value.trim().toLowerCase() !== 'justify') return;
+      report({ message: noTextJustifyMessages.justify(), node: decl, result, ruleName: noTextJustifyRuleName });
+    });
+  };
+}
+
+const noTextJustify = {
+  ruleName: noTextJustifyRuleName,
+  rule: noTextJustifyRule,
+  meta: noTextJustifyMeta,
+};
+
+// ─── Rule: neighbor/no-user-select-all-none ──────────────────────────────────
+// user-select: none prevents users from highlighting text.
+// This breaks screen readers, translation tools, and custom highlighting tools that users rely on.
+// Allowed on global resets (*), html, body, p, h1-h6, span, div.
+
+const noUserSelectAllNoneRuleName = 'neighbor/no-user-select-all-none';
+
+const noUserSelectAllNoneMessages = {
+  none: (selector) =>
+    `user-select: none on "${selector}" prevents users from selecting text. This breaks translation tools, text-to-speech, and custom highlighting. Only use this on buttons or interactive UI elements, never on text elements or global selectors.`,
+};
+
+const noUserSelectAllNoneMeta = { url: 'https://github.com/a11yfred/neighbor' };
+
+/** @type {import('stylelint').Rule} */
+function noUserSelectAllNoneRule(_primaryOption) {
+  return (root, result) => {
+    const textSelectors = new Set(['*', 'html', 'body', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'div', 'main', 'article', 'section']);
+    root.walkDecls(/^user-select$/i, (decl) => {
+      if (decl.value.trim().toLowerCase() !== 'none') return;
+      
+      const parentSelector = decl.parent?.selector ?? '';
+      // Check if it's applying to a broad or text-specific tag
+      const selectors = parentSelector.split(',').map(s => s.trim().toLowerCase());
+      
+      let violates = false;
+      for (const sel of selectors) {
+        // Strip pseudo-classes
+        const baseSel = sel.replace(/:[a-z-]+(\([^)]+\))?/g, '');
+        if (textSelectors.has(baseSel)) {
+          violates = true;
+          break;
+        }
+      }
+      
+      if (violates) {
+        report({ message: noUserSelectAllNoneMessages.none(parentSelector), node: decl, result, ruleName: noUserSelectAllNoneRuleName });
+      }
+    });
+  };
+}
+
+const noUserSelectAllNone = {
+  ruleName: noUserSelectAllNoneRuleName,
+  rule: noUserSelectAllNoneRule,
+  meta: noUserSelectAllNoneMeta,
+};
+
+// ─── Rule: neighbor/no-absolute-viewport-text ────────────────────────────────
+// font-size: 5vw does not scale when the user zooms in their browser.
+// This violates WCAG 1.4.4 Resize Text.
+// Must be used with calc() or clamp() alongside a fixed unit like rem/em.
+
+const noAbsoluteViewportTextRuleName = 'neighbor/no-absolute-viewport-text';
+
+const noAbsoluteViewportTextMessages = {
+  viewport: (value) =>
+    `font-size: ${value} uses pure viewport units. This text will not get bigger when users zoom in with their browser. Wrap it in calc() or clamp() with rem or em to allow resizing. (WCAG 1.4.4)`,
+};
+
+const noAbsoluteViewportTextMeta = { url: 'https://github.com/a11yfred/neighbor' };
+
+/** @type {import('stylelint').Rule} */
+function noAbsoluteViewportTextRule(_primaryOption) {
+  return (root, result) => {
+    root.walkDecls(/^font-size$/i, (decl) => {
+      const value = decl.value.trim().toLowerCase();
+      // If it has calc/clamp/max/min, it's likely mixing units, which is okay
+      if (value.includes('calc(') || value.includes('clamp(') || value.includes('max(') || value.includes('min(')) return;
+      
+      // If it ends directly with vw, vh, vmin, or vmax
+      if (/^\d*\.?\d+(vw|vh|vmin|vmax)$/.test(value)) {
+        report({ message: noAbsoluteViewportTextMessages.viewport(value), node: decl, result, ruleName: noAbsoluteViewportTextRuleName });
+      }
+    });
+  };
+}
+
+const noAbsoluteViewportText = {
+  ruleName: noAbsoluteViewportTextRuleName,
+  rule: noAbsoluteViewportTextRule,
+  meta: noAbsoluteViewportTextMeta,
+};
+
+export default [
+  userPreferences,
+  noOutlineNone,
+  noForcedColorsNone,
+  noTextJustify,
+  noUserSelectAllNone,
+  noAbsoluteViewportText,
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a11yfred/neighbor",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Accessibility linting for a11yfred  -  ESLint (markup + content), Stylelint (CSS). Won't you be my neighbor?",
   "type": "module",
   "license": "MIT",
@@ -16,7 +16,12 @@
     "RULES-CSS.md",
     "RULES-CONTENT.md"
   ],
-  "main": "./neighbor-stylelint.mjs",
+  "main": "./lib/rules.js",
+  "scripts": {
+    "build": "node scripts/generate-vale.mjs",
+    "test": "echo \"No test specified\" && exit 0",
+    "lint": "echo \"No lint specified\" && exit 0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/a11yfred/neighbor.git"
@@ -26,13 +31,8 @@
     "url": "https://github.com/a11yfred/neighbor/issues"
   },
   "exports": {
-    ".": "./neighbor-stylelint.mjs",
-    "./stylelint": "./neighbor-stylelint.mjs",
-    "./eslint": "./neighbor-eslint.mjs",
-    "./eslint-vue": "./neighbor-eslint-vue.mjs",
-    "./eslint-angular": "./neighbor-eslint-angular.mjs",
-    "./content": "./neighbor-content.mjs",
-    "./rules": "./lib/content-rules.js"
+    "./rules": "./lib/content-rules.js",
+    "./lib/*": "./lib/*.js"
   },
   "keywords": [
     "stylelint",
@@ -79,9 +79,8 @@
     }
   },
   "devDependencies": {
-    "@a11yfred/neighbor": "^1.0.3",
     "eslint": "^9.39.4",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "stylelint": "^17.11.0"
   }
-}
+}