Only flag mismatched name attributes

mdn · Jul 22, 2020 · df0874d · df0874d
1 parent b0654f2
commit df0874d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/...-ng/rules/html-h2-avoid-name-attribute.js → .../html-h2-avoid-name-attribute-mismatch.js b/...-ng/rules/html-h2-avoid-name-attribute.js → .../html-h2-avoid-name-attribute-mismatch.js
@@ -1,19 +1,30 @@
 const { selectAll } = require("hast-util-select");
+const toText = require("hast-util-to-text");
 
 const source = "html-h2-avoid-name-attribute";
-const id = "h2-name-attr";
+const id = "h2-name-attr-mismatch";
 const reason = (node) =>
-  `H2 has name attribute (h2[name="${node.properties.name}"])`;
+  `H2 has name attribute mismatch (h2[name="${node.properties.name}"])`;
 
 /**
  * Warn about H2s with name attributes, since this can lead to surprises.
  */
 function htmlH2AvoidNameAttributePlugin() {
   return function warnOnH2NameAttr(tree, file) {
     for (const node of selectAll("h2[name]", tree)) {
-      file.message(reason(node), node, `${source}:${id}`);
+      if (isMismatch(node)) {
+        file.message(reason(node), node, `${source}:${id}`);
+      }
     }
   };
 }
 
+function isMismatch(node) {
+  return toAttr(toText(node)) !== node.properties.name;
+}
+
+function toAttr(str) {
+  return str.replace(/ /g, "_");
+}
+
 module.exports = htmlH2AvoidNameAttributePlugin;
diff --git a/...test/html-h2-avoid-name-attribute.test.js → ...-h2-avoid-name-attribute-mismatch.test.js b/...test/html-h2-avoid-name-attribute.test.js → ...-h2-avoid-name-attribute-mismatch.test.js
@@ -1,18 +1,27 @@
 const { process } = require("./framework/utils");
 
-describe("html-h2-avoid-name-attribute", () => {
+describe("html-h2-name-attribute-mismatch", () => {
   const recipe = { body: ["data.browser_compatibility"] };
-  const messageId = /h2-name-attr/;
+  const messageId = /h2-name-attr-mismatch/;
 
   test("warning-on-h2-name-attr", () => {
     const file = process(
-      `<h2 id="Browser_compatability" name="Browser_compatability">Browser compatability</h2>`,
+      `<h2 id="Browser_compatability" name="Browser_Compatability">Browser compatability</h2>`,
       recipe
     );
 
     expect(file).hasMessageWithId(messageId);
   });
 
+  test("no-warning-without-h2-attr-mismatch", () => {
+    const file = process(
+      `<h2 id="Browser_compatability" name="Browser_compatability">Browser compatability</h2>`,
+      recipe
+    );
+
+    expect(file).not.hasMessageWithId(messageId);
+  });
+
   test("no-warning-without-h2-attr", () => {
     const file = process(
       `<h2 id="Browser_compatability">Browser compatability</h2>`,