From 014ee05f3897689b5c7a45f4318c6902ea724c27 Mon Sep 17 00:00:00 2001
From: Milos Djermanovic <milos.djermanovic@gmail.com>
Date: Mon, 20 May 2024 23:56:18 +0200
Subject: [PATCH] [Fix] `no-invalid-html-attribute`: ensure error messages are
 correct

---
 CHANGELOG.md                                 |   1 +
 lib/rules/no-invalid-html-attribute.js       | 120 +++++++++++++------
 tests/lib/rules/no-invalid-html-attribute.js | 117 ++++++++++++++++--
 3 files changed, 193 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56a0c34334..a2c437523f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: avoid a crash with a non-TSTypeReference type ([#3718][] @developer-bandi)
 * [`jsx-no-leaked-render`]: invalid report if left side is boolean ([#3746][] @akulsr0)
 * [`jsx-closing-bracket-location`]: message shows `{{details}}` when there are no details ([#3759][] @mdjermanovic)
+* [`no-invalid-html-attribute`]: ensure error messages are correct ([#3759][] @mdjermanovic, @ljharb)
 
 [#3759]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3759
 [#3746]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3746
diff --git a/lib/rules/no-invalid-html-attribute.js b/lib/rules/no-invalid-html-attribute.js
index 1dd4d0f44b..98c33fbc3f 100644
--- a/lib/rules/no-invalid-html-attribute.js
+++ b/lib/rules/no-invalid-html-attribute.js
@@ -238,8 +238,8 @@ const messages = {
   suggestRemoveDefault: '"remove {{attributeName}}"',
   suggestRemoveEmpty: '"remove empty attribute {{attributeName}}"',
   suggestRemoveInvalid: '“remove invalid attribute {{reportingValue}}”',
-  suggestRemoveWhitespaces: 'remove whitespaces in “{{reportingValue}}”',
-  suggestRemoveNonString: 'remove non-string value in “{{reportingValue}}”',
+  suggestRemoveWhitespaces: 'remove whitespaces in “{{attributeName}}”',
+  suggestRemoveNonString: 'remove non-string value in “{{attributeName}}”',
 };
 
 function splitIntoRangedParts(node, regex) {
@@ -259,13 +259,18 @@ function splitIntoRangedParts(node, regex) {
 
 function checkLiteralValueNode(context, attributeName, node, parentNode, parentNodeName) {
   if (typeof node.value !== 'string') {
+    const data = { attributeName, reportingValue: node.value };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node,
-      data: { attributeName },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveNonString', messages.suggestRemoveNonString),
-          { fix(fixer) { return fixer.remove(parentNode); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(parentNode); },
+          }
         ),
       ],
     });
@@ -273,13 +278,18 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
   }
 
   if (!node.value.trim()) {
+    const data = { attributeName, reportingValue: node.value };
+
     report(context, messages.noEmpty, 'noEmpty', {
       node,
-      data: { attributeName },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveEmpty', messages.suggestRemoveEmpty),
-          { fix(fixer) { return fixer.remove(node.parent); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(node.parent); },
+          }
         ),
       ],
     });
@@ -291,32 +301,44 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
     const allowedTags = VALID_VALUES.get(attributeName).get(singlePart.value);
     const reportingValue = singlePart.reportingValue;
 
-    const suggest = [
-      Object.assign(
-        getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
-        { fix(fixer) { return fixer.removeRange(singlePart.range); } }
-      ),
-    ];
-
     if (!allowedTags) {
       const data = {
         attributeName,
         reportingValue,
       };
+
       report(context, messages.neverValid, 'neverValid', {
         node,
         data,
-        suggest,
+        suggest: [
+          Object.assign(
+            getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
+            {
+              data,
+              fix(fixer) { return fixer.removeRange(singlePart.range); },
+            }
+          ),
+        ],
       });
     } else if (!allowedTags.has(parentNodeName)) {
+      const data = {
+        attributeName,
+        reportingValue,
+        elementName: parentNodeName,
+      };
+
       report(context, messages.notValidFor, 'notValidFor', {
         node,
-        data: {
-          attributeName,
-          reportingValue,
-          elementName: parentNodeName,
-        },
-        suggest,
+        data,
+        suggest: [
+          Object.assign(
+            getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
+            {
+              data,
+              fix(fixer) { return fixer.removeRange(singlePart.range); },
+            }
+          ),
+        ],
       });
     }
   }
@@ -360,7 +382,10 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
         suggest: [
           Object.assign(
             getMessageData('suggestRemoveWhitespaces', messages.suggestRemoveWhitespaces),
-            { fix(fixer) { return fixer.removeRange(whitespacePart.range); } }
+            {
+              data: { attributeName },
+              fix(fixer) { return fixer.removeRange(whitespacePart.range); },
+            }
           ),
         ],
       });
@@ -371,7 +396,10 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
         suggest: [
           Object.assign(
             getMessageData('suggestRemoveWhitespaces', messages.suggestRemoveWhitespaces),
-            { fix(fixer) { return fixer.replaceTextRange(whitespacePart.range, '\u0020'); } }
+            {
+              data: { attributeName },
+              fix(fixer) { return fixer.replaceTextRange(whitespacePart.range, '\u0020'); },
+            }
           ),
         ],
       });
@@ -390,16 +418,21 @@ function checkAttribute(context, node) {
       COMPONENT_ATTRIBUTE_MAP.get(attribute).values(),
       (tagName) => `"<${tagName}>"`
     ).join(', ');
+    const data = {
+      attributeName: attribute,
+      tagNames,
+    };
+
     report(context, messages.onlyMeaningfulFor, 'onlyMeaningfulFor', {
       node: node.name,
-      data: {
-        attributeName: attribute,
-        tagNames,
-      },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix(fixer) { return fixer.remove(node); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(node); },
+          }
         ),
       ],
     });
@@ -409,13 +442,15 @@ function checkAttribute(context, node) {
   function fix(fixer) { return fixer.remove(node); }
 
   if (!node.value) {
+    const data = { attributeName: attribute };
+
     report(context, messages.emptyIsMeaningless, 'emptyIsMeaningless', {
       node: node.name,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveEmpty', messages.suggestRemoveEmpty),
-          { fix }
+          { data, fix }
         ),
       ],
     });
@@ -435,24 +470,28 @@ function checkAttribute(context, node) {
   }
 
   if (node.value.expression.type === 'ObjectExpression') {
+    const data = { attributeName: attribute };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node: node.value,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix }
+          { data, fix }
         ),
       ],
     });
   } else if (node.value.expression.type === 'Identifier' && node.value.expression.name === 'undefined') {
+    const data = { attributeName: attribute };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node: node.value,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix }
+          { data, fix }
         ),
       ],
     });
@@ -476,16 +515,21 @@ function checkPropValidValue(context, node, value, attribute) {
 
   const validTagSet = validTags.get(value.value);
   if (!validTagSet) {
+    const data = {
+      attributeName: attribute,
+      reportingValue: value.value,
+    };
+
     report(context, messages.neverValid, 'neverValid', {
       node: value,
-      data: {
-        attributeName: attribute,
-        reportingValue: value.value,
-      },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
-          { fix(fixer) { return fixer.replaceText(value, value.raw.replace(value.value, '')); } }
+          {
+            data,
+            fix(fixer) { return fixer.replaceText(value, value.raw.replace(value.value, '')); },
+          }
         ),
       ],
     });
diff --git a/tests/lib/rules/no-invalid-html-attribute.js b/tests/lib/rules/no-invalid-html-attribute.js
index f1e20aa9a6..b171d823a4 100644
--- a/tests/lib/rules/no-invalid-html-attribute.js
+++ b/tests/lib/rules/no-invalid-html-attribute.js
@@ -247,12 +247,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'alternatex',
             attributeName: 'rel',
+            reportingValue: 'alternatex',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex' },
               output: '<a rel=""></a>',
             },
           ],
@@ -266,12 +267,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'alternatex',
             attributeName: 'rel',
+            reportingValue: 'alternatex',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex' },
               output: 'React.createElement("a", { rel: "" })',
             },
           ],
@@ -291,6 +293,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex' },
               output: 'React.createElement("a", { rel: [""] })',
             },
           ],
@@ -304,12 +307,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'alternatex',
             attributeName: 'rel',
+            reportingValue: 'alternatex',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex' },
               output: '<a rel=" alternate"></a>',
             },
           ],
@@ -323,12 +327,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'alternatex alternate',
             attributeName: 'rel',
+            reportingValue: 'alternatex alternate',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex alternate' },
               output: 'React.createElement("a", { rel: "" })',
             },
           ],
@@ -348,6 +353,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex alternate' },
               output: 'React.createElement("a", { rel: [""] })',
             },
           ],
@@ -367,6 +373,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternatex' },
               output: '<a rel="alternate "></a>',
             },
           ],
@@ -386,6 +393,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternate alternatex' },
               output: 'React.createElement("a", { rel: "" })',
             },
           ],
@@ -405,6 +413,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternate alternatex' },
               output: 'React.createElement("a", { rel: [""] })',
             },
           ],
@@ -424,6 +433,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveDefault',
+              data: { attributeName: 'rel' },
               output: '<html ></html>',
             },
           ],
@@ -443,6 +453,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           // suggestions: [
           //   {
           //     messageId: 'suggestRemoveDefault',
+          //     data: { attributeName: 'rel' },
           //     output: 'React.createElement("html", { })',
           //   },
           // ],
@@ -460,6 +471,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveEmpty',
+              data: { attributeName: 'rel' },
               output: '<a ></a>',
             },
           ],
@@ -508,6 +520,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveDefault',
+              data: { attributeName: 'rel' },
               output: '<span ></span>',
             },
           ],
@@ -524,6 +537,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveNonString',
+              data: { attributeName: 'rel' },
               output: '<a ></a>',
             },
           ],
@@ -540,6 +554,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveNonString',
+              data: { attributeName: 'rel' },
               output: '<a ></a>',
             },
           ],
@@ -552,10 +567,11 @@ ruleTester.run('no-invalid-html-attribute', rule, {
       errors: [
         {
           messageId: 'onlyStrings',
-          data: { attributeName: 'rel' },
+          data: { attributeName: 'rel', reportingValue: 'true' },
           suggestions: [
             {
               messageId: 'suggestRemoveNonString',
+              data: { attributeName: 'rel', reportingValue: 'true' },
               output: '<a ></a>',
             },
           ],
@@ -572,6 +588,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveDefault',
+              data: { attributeName: 'rel' },
               output: '<a ></a>',
             },
           ],
@@ -588,6 +605,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveDefault',
+              data: { attributeName: 'rel' },
               output: '<a ></a>',
             },
           ],
@@ -607,6 +625,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'foobar' },
               output: '<a rel="noreferrer noopener "></a>',
             },
           ],
@@ -623,6 +642,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel="noreferrer noopener"></a>',
             },
           ],
@@ -639,6 +659,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel="noreferrer noopener"></a>',
             },
           ],
@@ -655,6 +676,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel="noreferrer noopener"></a>',
             },
           ],
@@ -674,6 +696,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'foobar' },
               output: '<a rel={"noreferrer noopener "}></a>',
             },
           ],
@@ -693,6 +716,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'foobar' },
               output: 'React.createElement("a", { rel: ["noreferrer", "noopener", "" ] })',
             },
           ],
@@ -712,6 +736,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'foobar' },
               output: '<a rel={" noreferrer noopener"}></a>',
             },
           ],
@@ -731,6 +756,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'foobar' },
               output: '<a rel={" batgo       noopener"}></a>',
             },
           ],
@@ -745,6 +771,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'batgo' },
               output: '<a rel={"foobar        noopener"}></a>',
             },
           ],
@@ -753,6 +780,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'spaceDelimited',
           data: { attributeName: 'rel' },
+          suggestions: [
+            {
+              messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
+              output: '<a rel={"foobar batgo noopener"}></a>',
+            },
+          ],
         },
       ],
     },
@@ -765,6 +799,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel={"noopener"}></a>',
             },
           ],
@@ -781,6 +816,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel={"noopener"}></a>',
             },
           ],
@@ -800,6 +836,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'batgo' },
               output: '<a rel={"  noopener"}></a>',
             },
           ],
@@ -808,6 +845,13 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'spaceDelimited',
           data: { attributeName: 'rel' },
+          suggestions: [
+            {
+              messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
+              output: '<a rel={"batgo noopener"}></a>',
+            },
+          ],
         },
       ],
     },
@@ -823,6 +867,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'batgo' },
               output: '<a rel={" noopener"}></a>',
             },
           ],
@@ -839,6 +884,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<a rel={"noopener"}></a>',
             },
           ],
@@ -859,6 +905,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'canonical' },
               output: '<a rel=""></a>',
             },
           ],
@@ -879,6 +926,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'dns-prefetch' },
               output: '<a rel=""></a>',
             },
           ],
@@ -899,6 +947,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'icon' },
               output: '<a rel=""></a>',
             },
           ],
@@ -925,12 +974,16 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'foo',
             attributeName: 'rel',
+            reportingValue: 'foo',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: {
+                attributeName: 'rel',
+                reportingValue: 'foo',
+              },
               output: '<link rel="shortcut "></link>',
             },
           ],
@@ -956,6 +1009,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<link rel="shortcut icon"></link>',
             },
           ],
@@ -969,12 +1023,16 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'neverValid',
           data: {
-            reportingValue: 'foo',
             attributeName: 'rel',
+            reportingValue: 'foo',
           },
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: {
+                attributeName: 'rel',
+                reportingValue: 'foo',
+              },
               output: '<link rel="shortcut  "></link>',
             },
           ],
@@ -983,6 +1041,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         {
           messageId: 'notAlone',
           data: {
+            attributeName: 'rel',
             reportingValue: 'shortcut',
             missingValue: 'icon',
           },
@@ -993,6 +1052,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveWhitespaces',
+              data: { attributeName: 'rel' },
               output: '<link rel="shortcut foo"></link>',
             },
           ],
@@ -1013,6 +1073,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'manifest' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1033,6 +1094,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'modulepreload' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1053,6 +1115,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'pingback' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1073,6 +1136,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preconnect' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1093,6 +1157,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prefetch' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1113,6 +1178,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preload' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1133,6 +1199,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prerender' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1153,6 +1220,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'stylesheet' },
               output: '<a rel=""></a>',
             },
           ],
@@ -1173,6 +1241,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'canonical' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1193,6 +1262,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'dns-prefetch' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1213,6 +1283,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'icon' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1233,6 +1304,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'manifest' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1253,6 +1325,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'modulepreload' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1273,6 +1346,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'pingback' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1293,6 +1367,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preconnect' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1313,6 +1388,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prefetch' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1333,6 +1409,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preload' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1353,6 +1430,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prerender' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1373,6 +1451,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'stylesheet' },
               output: '<area rel=""></area>',
             },
           ],
@@ -1393,6 +1472,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'bookmark' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1413,6 +1493,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'external' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1433,6 +1514,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'nofollow' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1453,6 +1535,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'noopener' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1472,6 +1555,8 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           },
           suggestions: [
             {
+              messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'noreferrer' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1492,6 +1577,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'opener' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1512,6 +1598,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'tag' },
               output: '<link rel=""></link>',
             },
           ],
@@ -1532,6 +1619,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'alternate' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1552,6 +1640,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'author' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1572,6 +1661,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'bookmark' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1592,6 +1682,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'canonical' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1612,6 +1703,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'dns-prefetch' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1632,6 +1724,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'icon' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1652,6 +1745,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'manifest' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1672,6 +1766,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'modulepreload' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1692,6 +1787,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'pingback' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1712,6 +1808,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preconnect' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1732,6 +1829,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prefetch' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1752,6 +1850,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'preload' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1772,6 +1871,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'prerender' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1792,6 +1892,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'stylesheet' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1812,6 +1913,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveInvalid',
+              data: { reportingValue: 'tag' },
               output: '<form rel=""></form>',
             },
           ],
@@ -1832,6 +1934,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
           suggestions: [
             {
               messageId: 'suggestRemoveEmpty',
+              data: { attributeName: 'rel' },
               output: '<form ></form>',
             },
           ],