@herb-tools/linter 0.7.4 → 0.8.0

package/docs/rules/herb-disable-comment-no-redundant-all.md

@@ -0,0 +1,53 @@
+# Linter Rule: Disallow redundant use of `all` in `herb:disable` comments
+
+**Rule:** `herb-disable-comment-no-redundant-all`
+
+## Description
+
+Prevents using `all` together with specific rule names in `<%# herb:disable ... %>` comments, as this is redundant.
+
+## Rationale
+
+When you use `all` in a `<%# herb:disable ... %>` comment, it disables every linter rule for that line. Adding specific rule names alongside `all` is redundant because `all` already covers them.
+
+This rule helps maintain clean, concise disable comments by ensuring you either use `herb:disable all` by itself to disable all rules or lists only the specific rules you want to disable.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<DIV>test</DIV> <%# herb:disable all %>
+
+<DIV class='value'>test</DIV> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes %>
+
+<DIV>test</DIV> <%# herb:disable html-tag-name-lowercase %>
+```
+
+### 🚫 Bad
+
+```erb
+<DIV>test</DIV> <%# herb:disable all, html-tag-name-lowercase %>
+
+<DIV>test</DIV> <%# herb:disable html-tag-name-lowercase, all, html-attribute-double-quotes %>
+
+<DIV>test</DIV> <%# herb:disable all, all %>
+```
+
+## Fix
+
+Remove either the `all` keyword or the specific rule names:
+
+**Option 1:** Keep only `all`
+```erb
+<DIV class='value'>test</DIV> <%# herb:disable all %>
+```
+
+**Option 2:** Keep only specific rules
+```erb
+<DIV class='value'>test</DIV> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes %>
+```
+
+## References
+
+\-

package/docs/rules/herb-disable-comment-unnecessary.md

@@ -0,0 +1,44 @@
+# Linter Rule: Detect unnecessary `herb:disable` comments
+
+**Rule:** `herb-disable-comment-unnecessary`
+
+## Description
+
+Warns when a `<%# herb:disable ... %>` comment doesn't actually suppress any linter offenses on that line, indicating it's unnecessary and should be removed.
+
+## Rationale
+
+Unnecessary `<%# herb:disable ... %>` comments create noise in the codebase and can mislead developers about which rules are being suppressed. These comments often remain after the code has been refactored and no longer triggers the offense.
+
+Removing unnecessary disable comments keeps the codebase clean and ensures that suppression comments accurately reflect actual rule violations being intentionally ignored.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<DIV>test</DIV> <%# herb:disable html-tag-name-lowercase %>
+
+<DIV id='test-1'>content</DIV> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes %>
+
+<DIV id='test-2'>content</DIV> <%# herb:disable all %>
+```
+
+### 🚫 Bad
+
+```erb
+<div>test</div> <%# herb:disable html-tag-name-lowercase %>
+
+<div id="test">content</div> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes %>
+
+<div id="test-1">content</div> <%# herb:disable all %>
+
+<DIV id='test-2'>content</DIV> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes, html-no-empty-headings %>
+
+<div>test</div> <%# herb:disableall %>
+```
+
+
+## References
+
+\-

package/docs/rules/herb-disable-comment-valid-rule-name.md

@@ -0,0 +1,41 @@
+# Linter Rule: Validate rule names in `herb:disable` comments
+
+**Rule:** `herb-disable-comment-valid-rule-name`
+
+## Description
+
+Ensures that all rule names specified in `<%# herb:disable ... %>` comments are valid and exist in the linter. This catches typos, references to non-existent rules and missing comma between rule names.
+
+## Rationale
+
+Using invalid or misspelled rule names in `<%# herb:disable ... %>` comments can lead to confusion and unexpected behavior. The comment won't disable anything if the rule name doesn't exist, leaving developers wondering why linter warnings persist.
+
+By validating rule names, this rule helps catch typos early, identify removed or renamed rule and provide helpful suggestions for similar rule names using fuzzy matching.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<DIV>test</DIV> <%# herb:disable html-tag-name-lowercase %>
+
+<DIV class='value'>test</DIV> <%# herb:disable html-tag-name-lowercase, html-attribute-double-quotes %>
+
+<DIV>test</DIV> <%# herb:disable all %>
+```
+
+### 🚫 Bad
+
+```erb
+<div>test</div> <%# herb:disable this-rule-doesnt-exist %>
+
+<div>test</div> <%# herb:disable html-tag-lowercase %>
+
+<DIV>test</DIV> <%# herb:disable html-tag-name-lowercase, invalid-rule-name %>
+
+<div>test</div> <%# herb:disable html-tag-name-lowercase html-attribute-double-quotes %>
+```
+
+## References
+
+\-

package/docs/rules/html-aria-attribute-must-be-valid.md

@@ -22,20 +22,17 @@ Validating against a known list ensures you're using correct and effective ARIA
 
 ```html
 <div role="button" aria-pressed="false">Toggle</div>
-<input type="text" aria-label="Search" />
+<input type="text" aria-label="Search" autocomplete="off">
 <span role="heading" aria-level="2">Title</span>
 ```
 
 ### 🚫 Bad
 
 ```html
-<!-- typo -->
 <div role="button" aria-presed="false">Toggle</div>
 
-<!-- typo -->
-<input type="text" aria-lable="Search" />
+<input type="text" aria-lable="Search" autocomplete="off">
 
-<!-- invalid -->
 <span aria-size="large" role="heading" aria-level="2">Title</span>
 ```
 

package/docs/rules/html-aria-label-is-well-formatted.md

@@ -16,7 +16,7 @@ The `aria-label` attribute provides an accessible name for elements that will be
 
 ```erb
 <button aria-label="Close dialog">X</button>
-<input aria-label="Search products" type="search">
+<input aria-label="Search products" type="search" autocomplete="off">
 <button aria-label="Page 2 of 10">2</button>
 ```
 

package/docs/rules/html-attribute-double-quotes.md

@@ -17,7 +17,7 @@ Double quotes are the most widely used and expected style for HTML attributes. C
 ### ✅ Good
 
 ```html
-<input type="text">
+<input type="text" autocomplete="off">
 
 <a href="/profile">Profile</a>
 
@@ -31,7 +31,7 @@ Double quotes are the most widely used and expected style for HTML attributes. C
 ### 🚫 Bad
 
 ```html
-<input type='text'>
+<input type='text' autocomplete="off">
 
 <a href='/profile'>Profile</a>
 

package/docs/rules/html-attribute-equals-spacing.md

@@ -17,7 +17,7 @@ Extra whitespace around the `=` in HTML attribute assignments is unnecessary, in
 ```erb
 <div class="container"></div>
 <img src="/logo.png" alt="Logo">
-<input type="text" value="<%= @value %>">
+<input type="text" value="<%= @value %>" autocomplete="off">
 ```
 
 ### 🚫 Bad
@@ -27,7 +27,7 @@ Extra whitespace around the `=` in HTML attribute assignments is unnecessary, in
 
 <img src= "/logo.png" alt="Logo">
 
-<input  type  =  "text">
+<input  type  =  "text" autocomplete="off">
 ```
 
 ## References

package/docs/rules/html-attribute-values-require-quotes.md

@@ -23,7 +23,7 @@ Additionally, always quoting is the common convention in most HTML formatters, l
 ```html
 <div id="hello"></div>
 
-<input type="text">
+<input type="text" autocomplete="off">
 
 <a href="/profile">Profile</a>
 ```
@@ -33,9 +33,9 @@ Additionally, always quoting is the common convention in most HTML formatters, l
 ```html
 <div id=hello></div>
 
-<input type=text>
+<input type=text autocomplete="off">
 
-<a href=/profile></a>
+<a href=profile></a>
 ```
 
 ## References

package/docs/rules/html-avoid-both-disabled-and-aria-disabled.md

@@ -19,7 +19,7 @@ Elements that support the native `disabled` attribute include: `button`, `fields
 ```erb
 <!-- Use only the native disabled attribute -->
 <button disabled>Submit</button>
-<input type="text" disabled>
+<input type="text" autocomplete="off" disabled>
 
 <!-- Use only aria-disabled for custom elements -->
 <div role="button" aria-disabled="true">Custom Button</div>
@@ -34,7 +34,7 @@ Elements that support the native `disabled` attribute include: `button`, `fields
 <!-- Both disabled and aria-disabled -->
 <button disabled aria-disabled="true">Submit</button>
 
-<input type="text" disabled aria-disabled="true">
+<input type="text" autocomplete="off" disabled aria-disabled="true">
 
 <select disabled aria-disabled="true">
   <option>Option 1</option>

package/docs/rules/html-body-only-elements.md

@@ -0,0 +1,99 @@
+# Linter Rule: Require content elements inside `<body>`
+
+**Rule:** `html-body-only-elements`
+
+## Description
+
+Enforce that specific HTML elements are only placed within the `<body>` tag.
+
+## Rationale
+
+According to the HTML specification, certain elements are meant to contain content and should only appear within the `<body>` section of an HTML document. Placing content-bearing or interactive elements in the `<head>` section or outside the HTML structure can lead to:
+
+- Unpredictable browser rendering behavior
+- Accessibility issues for screen readers and assistive technologies
+- SEO problems as search engines may not properly index misplaced content
+- Validation errors and non-compliant HTML
+
+This rule enforces proper document structure by ensuring semantic and content elements are correctly placed within the `<body>` element.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<html>
+  <head>
+    <title>Page Title</title>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+    <header>
+      <h1>Welcome</h1>
+      <nav>
+        <ul>
+          <li>Home</li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <article>
+        <section>
+          <p>This is valid content.</p>
+          <table>
+            <tr><td>Data</td></tr>
+          </table>
+        </section>
+      </article>
+      <aside>
+        <form>
+          <input type="text" autocomplete="on">
+        </form>
+      </aside>
+    </main>
+
+    <footer>
+      <h2>Footer</h2>
+    </footer>
+  </body>
+</html>
+```
+
+### 🚫 Bad
+
+```erb
+<html>
+  <head>
+    <title>Page Title</title>
+    <h1>Welcome</h1>
+
+    <p>This should not be here.</p>
+
+  </head>
+
+  <body>
+    <main>Valid content</main>
+  </body>
+</html>
+```
+
+```erb
+<html>
+  <head>
+    <nav>Navigation</nav>
+
+    <form>Form</form>
+
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+## References
+
+- [HTML Living Standard - The `body` element](https://html.spec.whatwg.org/multipage/sections.html#the-body-element)
+- [MDN: HTML `document` structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

package/docs/rules/html-boolean-attributes-no-value.md

@@ -21,7 +21,7 @@ For example, instead of writing `disabled="disabled"` or `disabled="true"`, simp
 
 <button disabled>Submit</button>
 
-<select multiple>
+<select multiple></select>
 ```
 
 ### 🚫 Bad
@@ -31,7 +31,7 @@ For example, instead of writing `disabled="disabled"` or `disabled="true"`, simp
 
 <button disabled="true">Submit</button>
 
-<select multiple="multiple">
+<select multiple="multiple"></select>
 ```
 
 ## References

package/docs/rules/html-head-only-elements.md

@@ -0,0 +1,81 @@
+# Linter Rule: Require head-scoped elements inside `<head>`
+
+**Rule:** `html-head-only-elements`
+
+## Description
+
+Enforce that certain elements only appear inside the `<head>` section of the document.
+
+Elements like `<title>`, `<meta>`, `<base>`, `<link>`, and `<style>` are permitted only inside the `<head>` element. They must not appear inside `<body>` or outside of `<html>`. Placing them elsewhere produces invalid HTML and relies on browser error correction.
+
+> [!NOTE] Exception
+> `<title>` elements are allowed inside `<svg>` elements for accessibility purposes.
+
+## Rationale
+
+The HTML specification requires certain elements to appear only in the `<head>` section because they affect document metadata, resource loading, or global behavior:
+
+Placing these elements outside `<head>` leads to invalid HTML and undefined behavior across browsers.
+
+
+## Examples
+
+### ✅ Good
+
+```erb
+<head>
+  <title>My Page</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+
+<body>
+  <h1>Welcome</h1>
+</body>
+```
+
+```erb
+<head>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= favicon_link_tag 'favicon.ico' %>
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+
+  <title><%= content_for?(:title) ? yield(:title) : "Default Title" %></title>
+</head>
+```
+
+```erb
+<body>
+  <svg>
+    <title>Chart Title</title>
+    <rect width="100" height="100" />
+  </svg>
+</body>
+```
+
+### 🚫 Bad
+
+```erb
+<body>
+  <title>My Page</title>
+
+  <meta charset="UTF-8">
+
+  <link rel="stylesheet" href="/styles.css">
+
+  <h1>Welcome</h1>
+</body>
+```
+
+```erb
+<body>
+  <title><%= content_for?(:title) ? yield(:title) : "Default Title" %></title>
+</body>
+```
+
+## References
+
+* [HTML Living Standard - The `head` element](https://html.spec.whatwg.org/multipage/semantics.html#the-head-element)

package/docs/rules/html-input-require-autocomplete.md

@@ -0,0 +1,64 @@
+# Linter Rule: Require `autocomplete` attributes on `<input>` tags
+
+**Rule:** `html-input-require-autocomplete`
+
+## Description
+
+Require an `autocomplete` attribute on `<input>` elements with types that support autocomplete functionality. This rule ensures that developers explicitly declare autocomplete behavior for form inputs.
+
+
+## Rationale
+
+The HTML `autocomplete` attribute helps users complete forms by using data stored in the browser. This is particularly useful for people with motor disabilities or cognitive impairment who may have difficulties filling out forms online. Without an explicit `autocomplete` attribute, behavior varies across browsers and can lead to inconsistent user experiences.
+
+If you prefer not to specify a specific autocomplete value, use `autocomplete="on"` to enable browser defaults or `autocomplete="off"` to explicitly disable it.
+
+## Affected Input Types
+
+This rule applies to the following input types:
+
+- `color`
+- `date`
+- `datetime-local`
+- `email`
+- `month`
+- `number`
+- `password`
+- `range`
+- `search`
+- `tel`
+- `text`
+- `time`
+- `url`
+- `week`
+
+
+## Examples
+
+### ✅ Good
+
+```erb
+<input type="email" autocomplete="email">
+
+<input type="url" autocomplete="off">
+
+<input type="password" autocomplete="on">
+```
+
+
+### 🚫 Bad
+
+```erb
+<input type="email">
+
+<input type="url">
+
+<input type="password">
+```
+
+## References
+
+* [Inspiration: ERB Lint `RequireInputAutocomplete` rule](https://github.com/shopify/erb_lint?tab=readme-ov-file#requireinputautocomplete)
+* [HTML attribute: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+* [WCAG: Using HTML autocomplete attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H98)
+* [HTML Specification: Autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)

package/docs/rules/html-no-aria-hidden-on-focusable.md

@@ -17,7 +17,7 @@ Elements with `aria-hidden="true"` are completely hidden from assistive technolo
 ```erb
 <button>Submit</button>
 <a href="/link">Link</a>
-<input type="text">
+<input type="text" autocomplete="off">
 <textarea></textarea>
 
 <div aria-hidden="true">Decorative content</div>
@@ -33,7 +33,7 @@ Elements with `aria-hidden="true"` are completely hidden from assistive technolo
 
 <a href="/link" aria-hidden="true">Link</a>
 
-<input type="text" aria-hidden="true">
+<input type="text" autocomplete="off" aria-hidden="true">
 
 <textarea aria-hidden="true"></textarea>
 

package/docs/rules/html-no-duplicate-attributes.md

@@ -17,7 +17,7 @@ Catching duplicates early helps prevent subtle bugs, improves code correctness,
 ### ✅ Good
 
 ```erb
-<input type="text" name="username" id="user-id">
+<input type="text" name="username" id="user-id" autocomplete="off">
 
 <button type="submit" disabled>Submit</button>
 ```
@@ -25,7 +25,7 @@ Catching duplicates early helps prevent subtle bugs, improves code correctness,
 ### 🚫 Bad
 
 ```erb
-<input type="text" type="password" name="username">
+<input type="text" type="password" name="username" autocomplete="off">
 
 <button type="submit" type="button" disabled>Submit</button>
 ```

package/docs/rules/html-no-duplicate-meta-names.md

@@ -0,0 +1,64 @@
+# Linter Rule: Duplicate `<meta>` name attributes are not allowed
+
+**Rule:** `html-no-duplicate-meta-names`
+
+## Description
+
+Warn when multiple `<meta>` tags share the same `name` or `http-equiv` attribute within the same `<head>` block, unless they are wrapped in conditional comments.
+
+## Rationale
+
+In HTML, duplicate `<meta>` tags with the same `name` or `http-equiv` can cause unexpected behavior. For example, search engines or social sharing tools may use the wrong value. These duplicates are often the result of copy-paste or partial rendering logic and should be avoided.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<head>
+  <meta name="description" content="Welcome to our site">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+```
+
+```erb
+<head>
+  <% if mobile? %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <% else %>
+    <meta name="viewport" content="width=1024">
+  <% end %>
+</head>
+```
+
+### 🚫 Bad
+
+```erb
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=1024">
+</head>
+```
+
+```erb
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="X-UA-Compatible" content="chrome=1">
+</head>
+```
+
+```erb
+<head>
+  <meta name="viewport" content="width=1024">
+
+  <% if mobile? %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <% else %>
+    <meta http-equiv="refresh" content="30">  
+  <% end %>
+</head>
+```
+
+## References
+
+\-

package/docs/rules/html-no-empty-attributes.md

@@ -40,7 +40,7 @@ This rule helps ensure that required attributes are only added when they are pop
 ```erb
 <div id="header"></div>
 <img src="/logo.png" alt="Company logo">
-<input type="text" name="email">
+<input type="text" name="email" autocomplete="off">
 
 <!-- Dynamic attributes with meaningful values -->
 <div data-<%= key %>="<%= value %>" aria-<%= prop %>="<%= description %>">
@@ -55,8 +55,8 @@ This rule helps ensure that required attributes are only added when they are pop
 
 ```erb
 <div id=""></div>
-<img src="">
-<input name="">
+<img src="" alt="Company logo">
+<input name="" autocomplete="off">
 
 <div data-config="">Content</div>
 <button aria-label="">×</button>