From de35b2935c800951e99a5e5ec71349cfa25d5cdd Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi.k.barr@gmail.com>
Date: Wed, 16 Nov 2022 09:35:39 -0600
Subject: [PATCH 1/2] feat(eslint-plugin-template):
 [accessibility-elements-content] add allowlist option

---
 .../rules/accessibility-elements-content.md   | 303 +++---------------
 .../rules/accessibility-elements-content.ts   |  35 +-
 .../accessibility-elements-content/cases.ts   |  52 ++-
 3 files changed, 108 insertions(+), 282 deletions(-)

diff --git a/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md b/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
index d1c596acb..00df825e0 100644
--- a/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
+++ b/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
@@ -23,7 +23,17 @@ Ensures that the heading, anchor and button elements have content in it
 
 ## Rule Options
 
-The rule does not have any configuration options.
+The rule accepts an options object with the following properties:
+
+```ts
+interface Options {
+  /**
+   * Default: `["aria-label","innerHtml","innerHTML","innerText","outerHTML","title"]`
+   */
+  allowlist?: string[];
+}
+
+```
 
 <br>
 
@@ -113,26 +123,24 @@ The rule does not have any configuration options.
 ~~~~~~~~~~~~~~~~~
 ```
 
-</details>
-
 <br>
 
 ---
 
 <br>
 
-<details>
-<summary>✅ - Toggle examples of <strong>correct</strong> code for this rule</summary>
-
-<br>
-
-#### Default Config
+#### Custom Config
 
 ```json
 {
   "rules": {
     "@angular-eslint/template/accessibility-elements-content": [
-      "error"
+      "error",
+      {
+        "allowlist": [
+          "aria-labelledby"
+        ]
+      }
     ]
   }
 }
@@ -140,37 +148,14 @@ The rule does not have any configuration options.
 
 <br>
 
-#### ✅ Valid Code
+#### ❌ Invalid Code
 
 ```html
-<h1>Heading Content!</h1>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
+<button [ariaLabelledBy]="label"></button>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ```
 
-<br>
-
-#### ✅ Valid Code
-
-```html
-<h2><app-content></app-content></h2>
-```
+</details>
 
 <br>
 
@@ -178,29 +163,8 @@ The rule does not have any configuration options.
 
 <br>
 
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
-<h3 [innerHtml]="dangerouslySetHTML"></h3>
-```
-
-<br>
-
----
+<details>
+<summary>✅ - Toggle examples of <strong>correct</strong> code for this rule</summary>
 
 <br>
 
@@ -221,215 +185,19 @@ The rule does not have any configuration options.
 #### ✅ Valid Code
 
 ```html
+<h1>Heading Content!</h1>
+<h2><app-content></app-content></h2>
+<h3 [innerHtml]="dangerouslySetHTML"></h3>
 <h4 [innerText]="text"></h4>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a>Anchor Content!</a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a><app-content></app-content></a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a [innerHTML]="dangerouslySetHTML"></a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a [innerText]="text"></a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a [outerHTML]="text"></a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <a aria-hidden></a>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <button [attr.aria-hidden]="true"></button>
-```
-
-<br>
-
----
-
-<br>
-
-#### Default Config
-
-```json
-{
-  "rules": {
-    "@angular-eslint/template/accessibility-elements-content": [
-      "error"
-    ]
-  }
-}
-```
-
-<br>
-
-#### ✅ Valid Code
-
-```html
 <h5 [attr.aria-label]="text"></h5>
+<h6 title="text"></h6>
 ```
 
 <br>
@@ -438,13 +206,19 @@ The rule does not have any configuration options.
 
 <br>
 
-#### Default Config
+#### Custom Config
 
 ```json
 {
   "rules": {
     "@angular-eslint/template/accessibility-elements-content": [
-      "error"
+      "error",
+      {
+        "allowlist": [
+          "appTooltipLabel",
+          "ariaLabel"
+        ]
+      }
     ]
   }
 }
@@ -455,7 +229,10 @@ The rule does not have any configuration options.
 #### ✅ Valid Code
 
 ```html
-<h6 title="text"></h6>
+<button appTooltipLabel="directive adds aria-label"></button>
+<button [appTooltipLabel]="label"></button>
+<h1 ariaLabel="Important Content"></h1>
+<a [ariaLabel]="label"></a>
 ```
 
 </details>
diff --git a/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts b/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
index 6c7985ab5..3328b4bb3 100644
--- a/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
+++ b/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
@@ -5,17 +5,24 @@ import {
 } from '../utils/create-eslint-rule';
 import { isHiddenFromScreenReader } from '../utils/is-hidden-from-screen-reader';
 
-type Options = [];
+type Options = [
+  {
+    readonly allowlist?: readonly string[];
+  },
+];
 export type MessageIds = 'accessibilityElementsContent';
 export const RULE_NAME = 'accessibility-elements-content';
-const safelistAttributes: ReadonlySet<string> = new Set([
+const DEFAULT_SAFELIST_ATTRIBUTES: readonly string[] = [
   'aria-label',
   'innerHtml',
   'innerHTML',
   'innerText',
   'outerHTML',
   'title',
-]);
+];
+const DEFAULT_OPTIONS: Options[0] = {
+  allowlist: DEFAULT_SAFELIST_ATTRIBUTES,
+};
 
 export default createESLintRule<Options, MessageIds>({
   name: RULE_NAME,
@@ -26,13 +33,25 @@ export default createESLintRule<Options, MessageIds>({
         'Ensures that the heading, anchor and button elements have content in it',
       recommended: false,
     },
-    schema: [],
+    schema: [
+      {
+        additionalProperties: false,
+        properties: {
+          allowlist: {
+            items: { type: 'string' },
+            type: 'array',
+            uniqueItems: true,
+          },
+        },
+        type: 'object',
+      },
+    ],
     messages: {
       accessibilityElementsContent: '<{{element}}> should have content',
     },
   },
-  defaultOptions: [],
-  create(context) {
+  defaultOptions: [DEFAULT_OPTIONS],
+  create(context, [{ allowlist }]) {
     const parserServices = getTemplateParserServices(context);
 
     return {
@@ -42,6 +61,10 @@ export default createESLintRule<Options, MessageIds>({
         if (isHiddenFromScreenReader(node)) return;
 
         const { attributes, inputs, name: element, sourceSpan } = node;
+        const safelistAttributes: ReadonlySet<string> = new Set([
+          ...DEFAULT_SAFELIST_ATTRIBUTES,
+          ...(allowlist ?? []),
+        ]);
         const hasAttributeSafelisted = [...attributes, ...inputs]
           .map(({ name }) => name)
           .some((inputName) => safelistAttributes.has(inputName));
diff --git a/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts b/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
index c4336e630..19f225e79 100644
--- a/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
+++ b/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
@@ -4,19 +4,34 @@ import type { MessageIds } from '../../../src/rules/accessibility-elements-conte
 const messageId: MessageIds = 'accessibilityElementsContent';
 
 export const valid = [
-  '<h1>Heading Content!</h1>',
-  '<h2><app-content></app-content></h2>',
-  '<h3 [innerHtml]="dangerouslySetHTML"></h3>',
-  '<h4 [innerText]="text"></h4>',
-  '<a>Anchor Content!</a>',
-  '<a><app-content></app-content></a>',
-  '<a [innerHTML]="dangerouslySetHTML"></a>',
-  '<a [innerText]="text"></a>',
-  '<a [outerHTML]="text"></a>',
-  '<a aria-hidden></a>',
-  '<button [attr.aria-hidden]="true"></button>',
-  '<h5 [attr.aria-label]="text"></h5>',
-  '<h6 title="text"></h6>',
+  `
+    <h1>Heading Content!</h1>
+    <h2><app-content></app-content></h2>
+    <h3 [innerHtml]="dangerouslySetHTML"></h3>
+    <h4 [innerText]="text"></h4>
+    <a>Anchor Content!</a>
+    <a><app-content></app-content></a>
+    <a [innerHTML]="dangerouslySetHTML"></a>
+    <a [innerText]="text"></a>
+    <a [outerHTML]="text"></a>
+    <a aria-hidden></a>
+    <button [attr.aria-hidden]="true"></button>
+    <h5 [attr.aria-label]="text"></h5>
+    <h6 title="text"></h6>
+  `,
+  {
+    code: `
+      <button appTooltipLabel="directive adds aria-label"></button>
+      <button [appTooltipLabel]="label"></button>
+      <h1 ariaLabel="Important Content"></h1>
+      <a [ariaLabel]="label"></a>
+    `,
+    options: [
+      {
+        allowlist: ['appTooltipLabel', 'ariaLabel'],
+      },
+    ],
+  },
 ];
 
 export const invalid = [
@@ -47,4 +62,15 @@ export const invalid = [
     messageId,
     data: { element: 'button' },
   }),
+  convertAnnotatedSourceToFailureCase({
+    messageId,
+    description:
+      'should fail if attribute/input/directive is not configured in allowlist',
+    annotatedSource: `
+        <button [ariaLabelledBy]="label"></button>
+        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      `,
+    options: [{ allowlist: ['aria-labelledby'] }],
+    data: { element: 'button' },
+  }),
 ];

From def4b217cf0f5c7a84a14e18621501838f986312 Mon Sep 17 00:00:00 2001
From: Sandi Barr <sandi.k.barr@gmail.com>
Date: Wed, 16 Nov 2022 10:54:42 -0600
Subject: [PATCH 2/2] feat(eslint-plugin-template):
 [accessibility-elements-content] camelCase allowList option

---
 .../docs/rules/accessibility-elements-content.md       |  6 +++---
 .../src/rules/accessibility-elements-content.ts        | 10 +++++-----
 .../rules/accessibility-elements-content/cases.ts      |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md b/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
index 00df825e0..c8b40585a 100644
--- a/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
+++ b/packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
@@ -30,7 +30,7 @@ interface Options {
   /**
    * Default: `["aria-label","innerHtml","innerHTML","innerText","outerHTML","title"]`
    */
-  allowlist?: string[];
+  allowList?: string[];
 }
 
 ```
@@ -137,7 +137,7 @@ interface Options {
     "@angular-eslint/template/accessibility-elements-content": [
       "error",
       {
-        "allowlist": [
+        "allowList": [
           "aria-labelledby"
         ]
       }
@@ -214,7 +214,7 @@ interface Options {
     "@angular-eslint/template/accessibility-elements-content": [
       "error",
       {
-        "allowlist": [
+        "allowList": [
           "appTooltipLabel",
           "ariaLabel"
         ]
diff --git a/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts b/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
index 3328b4bb3..7812ffd99 100644
--- a/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
+++ b/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts
@@ -7,7 +7,7 @@ import { isHiddenFromScreenReader } from '../utils/is-hidden-from-screen-reader'
 
 type Options = [
   {
-    readonly allowlist?: readonly string[];
+    readonly allowList?: readonly string[];
   },
 ];
 export type MessageIds = 'accessibilityElementsContent';
@@ -21,7 +21,7 @@ const DEFAULT_SAFELIST_ATTRIBUTES: readonly string[] = [
   'title',
 ];
 const DEFAULT_OPTIONS: Options[0] = {
-  allowlist: DEFAULT_SAFELIST_ATTRIBUTES,
+  allowList: DEFAULT_SAFELIST_ATTRIBUTES,
 };
 
 export default createESLintRule<Options, MessageIds>({
@@ -37,7 +37,7 @@ export default createESLintRule<Options, MessageIds>({
       {
         additionalProperties: false,
         properties: {
-          allowlist: {
+          allowList: {
             items: { type: 'string' },
             type: 'array',
             uniqueItems: true,
@@ -51,7 +51,7 @@ export default createESLintRule<Options, MessageIds>({
     },
   },
   defaultOptions: [DEFAULT_OPTIONS],
-  create(context, [{ allowlist }]) {
+  create(context, [{ allowList }]) {
     const parserServices = getTemplateParserServices(context);
 
     return {
@@ -63,7 +63,7 @@ export default createESLintRule<Options, MessageIds>({
         const { attributes, inputs, name: element, sourceSpan } = node;
         const safelistAttributes: ReadonlySet<string> = new Set([
           ...DEFAULT_SAFELIST_ATTRIBUTES,
-          ...(allowlist ?? []),
+          ...(allowList ?? []),
         ]);
         const hasAttributeSafelisted = [...attributes, ...inputs]
           .map(({ name }) => name)
diff --git a/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts b/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
index 19f225e79..6c9fd49a8 100644
--- a/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
+++ b/packages/eslint-plugin-template/tests/rules/accessibility-elements-content/cases.ts
@@ -28,7 +28,7 @@ export const valid = [
     `,
     options: [
       {
-        allowlist: ['appTooltipLabel', 'ariaLabel'],
+        allowList: ['appTooltipLabel', 'ariaLabel'],
       },
     ],
   },
@@ -65,12 +65,12 @@ export const invalid = [
   convertAnnotatedSourceToFailureCase({
     messageId,
     description:
-      'should fail if attribute/input/directive is not configured in allowlist',
+      'should fail if attribute/input/directive is not configured in allowList',
     annotatedSource: `
         <button [ariaLabelledBy]="label"></button>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       `,
-    options: [{ allowlist: ['aria-labelledby'] }],
+    options: [{ allowList: ['aria-labelledby'] }],
     data: { element: 'button' },
   }),
 ];