feat: add no-heading-inside-button rule

docs/rules.md

@@ -43,9 +43,11 @@
 | [no-abstract-roles](rules/no-abstract-roles)               | Disallow to use of abstract roles                                      |     |
 | [no-accesskey-attrs](rules/no-accesskey-attrs)             | Disallow to use of accesskey attribute                                 |     |
 | [no-aria-hidden-body](rules/no-aria-hidden-body)           | Disallow to use aria-hidden attributes on the `body` element.          |     |
+| [no-heading-inside-button](rules/no-heading-inside-button) | Disallows the use of heading elements inside <button>.                 |     |
 | [no-non-scalable-viewport](rules/no-non-scalable-viewport) | Disallow use of `user-scalable=no` in `<meta name="viewport">`.        |     |
 | [no-positive-tabindex](rules/no-positive-tabindex)         | Disallow use of positive `tabindex`.                                   |     |
 | [no-skip-heading-levels](rules/no-skip-heading-levels)     | Disallow skipping heading levels                                       |     |
+| [require-form-method](rules/require-form-method)           | Require `method` attribute in `<form>`                                 |     |
 | [require-frame-title](rules/require-frame-title)           | Require `title` in `<frame>`, `<iframe>`                               |     |
 | [require-img-alt](rules/require-img-alt)                   | Require `alt` attribute at `<img>` tag                                 | ⭐  |
 | [require-input-label](rules/require-input-label)           | Enforces use of label for form elements(`input`, `textarea`, `select`) |     |

docs/rules/no-heading-inside-button.md

@@ -0,0 +1,31 @@
+# no-heading-inside-button
+
+This rule disallows the use of heading elements inside `<button>`.
+
+## Why?
+
+Assistive technologies, such as screen readers, interpret headings as navigational landmarks. Including headings inside buttons may cause unexpected behavior, making it harder for users to understand and navigate the interface.
+
+## How to use
+
+```js,.eslintrc.js
+module.exports = {
+    rules: {
+        "@html-eslint/no-heading-inside-button": "error",
+    }
+}
+```
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```html,incorrect
+<button><h1>Click Me</h1></button>
+```
+
+Examples of **correct** code for this rule:
+
+```html,incorrect
+<button><span>Click Me</h1></button>
+```

packages/eslint-plugin/lib/rules/index.js

@@ -40,6 +40,7 @@ const sortAttrs = require("./sort-attrs");
 const preferHttps = require("./prefer-https");
 const requireInputLabel = require("./require-input-label");
 const requireFormMethod = require("./require-form-method");
+const noHeadingInsideButton = require("./no-heading-inside-button");
 
 module.exports = {
   "require-lang": requireLang,
@@ -78,6 +79,7 @@ module.exports = {
   "no-trailing-spaces": noTrailingSpaces,
   "no-restricted-attr-values": noRestrictedAttrValues,
   "no-script-style-type": noScriptStyleType,
+  "no-heading-inside-button": noHeadingInsideButton,
   lowercase: lowercase,
   "require-open-graph-protocol": requireOpenGraphProtocol,
   "require-form-method": requireFormMethod,

packages/eslint-plugin/lib/rules/no-heading-inside-button.js

@@ -0,0 +1,54 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findParent, isTag } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+const HEADING_NAMES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallows the use of heading elements inside <button>.",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected heading inside button",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (!HEADING_NAMES.has(node.name.toLowerCase())) {
+          return;
+        }
+        const button = findParent(
+          node,
+          (parent) => isTag(parent) && parent.name.toLowerCase() === "button"
+        );
+
+        if (button) {
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    });
+  },
+};

packages/eslint-plugin/tests/rules/no-heading-inside-button.test.js

@@ -0,0 +1,64 @@
+const createRuleTester = require("../rule-tester");
+const rule = require("../../lib/rules/no-heading-inside-button");
+
+const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
+
+ruleTester.run("no-heading-inside-button", rule, {
+  valid: [
+    {
+      code: `<button>click</button>`,
+    },
+    {
+      code: `<button><span>click</span></button>`,
+    },
+    {
+      code: `<div><h1>title</h1></div>`,
+    },
+  ],
+  invalid: [
+    {
+      code: `<button><h1>title</h1></button>`,
+
+      errors: [
+        {
+          messageId: "unexpected",
+        },
+      ],
+    },
+    {
+      code: `<button><h6>title</h6></button>`,
+      errors: [
+        {
+          messageId: "unexpected",
+        },
+      ],
+    },
+    {
+      code: `<button><span><h1>title</h1></span></button>`,
+      errors: [
+        {
+          messageId: "unexpected",
+        },
+      ],
+    },
+  ],
+});
+
+templateRuleTester.run("[template] no-heading-inside-button", rule, {
+  valid: [
+    {
+      code: `html\`<button>click</button>\``,
+    },
+  ],
+  invalid: [
+    {
+      code: `html\`<button><h1>click</h1></button>\``,
+      errors: [
+        {
+          messageId: "unexpected",
+        },
+      ],
+    },
+  ],
+});