Linter: Improve html-img-require-alt rule (#1311)

This pull request improves the `html-img-require-alt` linter rule with
the insights and doc updates from `erblint-github` via issue #1220.

Author: marcoroth

javascript/packages/linter/docs/rules/html-img-require-alt.md

@@ -31,12 +31,14 @@ Omitting the `alt` attribute entirely leads to poor accessibility and can negati
 ```erb
 <img src="/logo.png">
 
-<img src="/avatar.jpg" alt> <!-- TODO -->
+<img src="/avatar.jpg" alt>
 
 <%= image_tag image_path("logo.png") %> <!-- TODO -->
 ```
 
 ## References
 
-* [W3C: Alternative Text](https://www.w3.org/WAI/tutorials/images/)
-* [WCAG 2.1: Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#non-text-content)
+- [W3C WAI Images Tutorial](https://www.w3.org/WAI/tutorials/images/)
+- [WCAG 2.1: Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#non-text-content)
+- [Primer: Alternative text for images](https://primer.style/accessibility/design-guidance/alternative-text-for-images/)
+- [erblint-github: `GitHub::Accessibility::ImageHasAlt`](https://github.com/github/erblint-github/blob/main/docs/rules/accessibility/image-has-alt.md)

javascript/packages/linter/src/rules/html-img-require-alt.ts

@@ -1,5 +1,5 @@
 import { BaseRuleVisitor } from "./rule-utils.js"
-import { hasAttribute, getTagLocalName } from "@herb-tools/core"
+import { hasAttribute, getAttribute, hasAttributeValue, getTagLocalName } from "@herb-tools/core"
 
 import { ParserRule } from "../types.js"
 import type { UnboundLintOffense, LintContext, FullRuleConfig } from "../types.js"
@@ -23,6 +23,16 @@ class ImgRequireAltVisitor extends BaseRuleVisitor {
         'Missing required `alt` attribute on `<img>` tag. Add `alt=""` for decorative images or `alt="description"` for informative images.',
         node.tag_name!.location
       )
+      return
+    }
+
+    const altAttribute = getAttribute(node, "alt")
+
+    if (altAttribute && !hasAttributeValue(altAttribute)) {
+      this.addOffense(
+        'The `alt` attribute has no value. Add `alt=""` for decorative images or `alt="description"` for informative images.',
+        altAttribute.location
+      )
     }
   }
 }

javascript/packages/linter/test/rules/html-img-require-alt.test.ts

@@ -45,4 +45,9 @@ describe("html-img-require-alt", () => {
   test("passes for case-insensitive alt attribute", () => {
     expectNoOffenses('<img src="/logo.png" ALT="Logo">')
   })
+
+  test("fails for img with alt attribute without value", () => {
+    expectError('The `alt` attribute has no value. Add `alt=""` for decorative images or `alt="description"` for informative images.')
+    assertOffenses('<img src="/avatar.jpg" alt>')
+  })
 })