feat(eslint-plugin-template): [accessibility-interactive-supports-foc…

…us] prefix rule name
angular-eslint · Sep 18, 2022 · b2d6a47 · b2d6a47
1 parent 8a263ac
commit b2d6a47
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 39 deletions.
diff --git a/.../docs/rules/interactive-supports-focus.md → ...cessibility-interactive-supports-focus.md b/.../docs/rules/interactive-supports-focus.md → ...cessibility-interactive-supports-focus.md
@@ -3,8 +3,8 @@
   DO NOT EDIT.
 
   This markdown file was autogenerated using a mixture of the following files as the source of truth for its data:
-  - ../../src/rules/interactive-supports-focus.ts
-  - ../../tests/rules/interactive-supports-focus/cases.ts
+  - ../../src/rules/accessibility-interactive-supports-focus.ts
+  - ../../tests/rules/accessibility-interactive-supports-focus/cases.ts
 
   In order to update this file, it is therefore those files which need to be updated, as well as potentially the generator script:
   - ../../../../tools/scripts/generate-rule-docs.ts
@@ -13,7 +13,7 @@
 
 <br>
 
-# `@angular-eslint/template/interactive-supports-focus`
+# `@angular-eslint/template/accessibility-interactive-supports-focus`
 
 Ensures that elements with interactive handlers like `(click)` are focusable.
 
@@ -43,7 +43,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -70,7 +70,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -97,7 +97,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -124,7 +124,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -151,7 +151,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -178,7 +178,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -205,7 +205,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -232,7 +232,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -259,7 +259,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -286,7 +286,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -313,7 +313,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -329,6 +329,33 @@ The rule does not have any configuration options.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<div [attr.contenteditable]="false" (keyup)="onKeyUp()">Cannot be focused</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
 </details>
 
 <br>
@@ -347,7 +374,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -373,7 +400,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -401,7 +428,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -428,7 +455,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -455,7 +482,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -482,7 +509,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -510,7 +537,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -543,7 +570,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -571,7 +598,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -598,7 +625,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -628,7 +655,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -654,7 +681,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -682,7 +709,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -709,7 +736,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -736,7 +763,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -765,7 +792,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -794,7 +821,7 @@ The rule does not have any configuration options.
 ```json
 {
   "rules": {
-    "@angular-eslint/template/interactive-supports-focus": [
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
       "error"
     ]
   }
@@ -821,6 +848,34 @@ The rule does not have any configuration options.
 <div role="textbox" tabindex="0" (click)="onClick()"></div>
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/accessibility-interactive-supports-focus": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<div contenteditable="true" (keyup)="onKeyUp()">Edit this text</div>
+<div [attr.contenteditable]="true" (keydown)="onKeyDown()">Edit this text</div>
+<div contenteditable (keypress)="onKeyPress()">Edit this too!</div>
+```
+
 </details>
 
 <br>
diff --git a/packages/eslint-plugin-template/src/configs/all.json b/packages/eslint-plugin-template/src/configs/all.json
@@ -3,6 +3,7 @@
   "rules": {
     "@angular-eslint/template/accessibility-alt-text": "error",
     "@angular-eslint/template/accessibility-elements-content": "error",
+    "@angular-eslint/template/accessibility-interactive-supports-focus": "error",
     "@angular-eslint/template/accessibility-label-for": "error",
     "@angular-eslint/template/accessibility-label-has-associated-control": "error",
     "@angular-eslint/template/accessibility-table-scope": "error",
@@ -13,7 +14,6 @@
     "@angular-eslint/template/cyclomatic-complexity": "error",
     "@angular-eslint/template/eqeqeq": "error",
     "@angular-eslint/template/i18n": "error",
-    "@angular-eslint/template/interactive-supports-focus": "error",
     "@angular-eslint/template/mouse-events-have-key-events": "error",
     "@angular-eslint/template/no-any": "error",
     "@angular-eslint/template/no-autofocus": "error",

diff --git a/packages/eslint-plugin-template/src/index.ts b/packages/eslint-plugin-template/src/index.ts
@@ -9,6 +9,9 @@ import accessibilityAltText, {
 import accessibilityElementsContent, {
   RULE_NAME as accessibilityElementsContentRuleName,
 } from './rules/accessibility-elements-content';
+import accessibilityInteractiveSupportsFocus, {
+  RULE_NAME as accessibilityInteractiveSupportsFocusRuleName,
+} from './rules/accessibility-interactive-supports-focus';
 import accessibilityLabelFor, {
   RULE_NAME as accessibilityLabelForRuleName,
 } from './rules/accessibility-label-for';
@@ -35,9 +38,6 @@ import cyclomaticComplexity, {
 } from './rules/cyclomatic-complexity';
 import eqeqeq, { RULE_NAME as eqeqeqRuleName } from './rules/eqeqeq';
 import i18n, { RULE_NAME as i18nRuleName } from './rules/i18n';
-import interactiveSupportsFocus, {
-  RULE_NAME as interactiveSupportsFocusRuleName,
-} from './rules/interactive-supports-focus';
 import mouseEventsHaveKeyEvents, {
   RULE_NAME as mouseEventsHaveKeyEventsRuleName,
 } from './rules/mouse-events-have-key-events';
@@ -78,6 +78,8 @@ export default {
   rules: {
     [accessibilityAltTextRuleName]: accessibilityAltText,
     [accessibilityElementsContentRuleName]: accessibilityElementsContent,
+    [accessibilityInteractiveSupportsFocusRuleName]:
+      accessibilityInteractiveSupportsFocus,
     [accessibilityLabelForRuleName]: accessibilityLabelFor,
     [accessibilityLabelHasAssociatedControlRuleName]:
       accessibilityLabelHasAssociatedControl,
@@ -89,7 +91,6 @@ export default {
     [cyclomaticComplexityRuleName]: cyclomaticComplexity,
     [eqeqeqRuleName]: eqeqeq,
     [i18nRuleName]: i18n,
-    [interactiveSupportsFocusRuleName]: interactiveSupportsFocus,
     [mouseEventsHaveKeyEventsRuleName]: mouseEventsHaveKeyEvents,
     [noAnyRuleName]: noAny,
     [noAutofocusRuleName]: noAutofocus,