add test cases and update docs

Author: khiga8

docs/rules/GH003-no-empty-string-alt.md

@@ -2,11 +2,11 @@
 
 ## Rule details
 
-This rule is _off_ by default and is only applicable for GitHub rendered markdown.
+⚠️ This rule is _off_ by default and is only applicable for GitHub rendered markdown.
 
 Currently, all images on github.com are automatically wrapped in an anchor tag.
 
-As a result, images that are intentionally marked as decorative (via `alt=""``) end up as a link without an accessible name. This is confusing for assistive technology users. 
+As a result, images that are intentionally marked as decorative (via `alt=""``) end up rendering as a link without an accessible name. This is confusing and inaccessible for assistive technology users. 
 
 This rule can be enabled to enforce that the alt attribute is always set to descriptive text. 
 

src/rules/no-empty-string-alt.js

@@ -8,7 +8,12 @@ module.exports = {
   function: function GH003(params, onError) {
     const htmlTagsWithImages = params.parsers.markdownit.tokens.filter(
       (token) => {
-        return token.type === "html_block" && token.content.includes("<img");
+        return (
+          (token.type === "html_block" && token.content.includes("<img")) ||
+          (token.type === "inline" &&
+            token.content.includes("<img") &&
+            token.children.some((child) => child.type === "html_inline"))
+        );
       },
     );
     const inlineImages = params.parsers.markdownit.tokens.filter(
@@ -17,8 +22,8 @@ module.exports = {
         token.children.some((child) => child.type === "image"),
     );
 
-    const htmlAltRegex = new RegExp(/alt=""|alt=''/i);
-    const markdownAltRegex = new RegExp(/!\[""\]|!\[''\]/i);
+    const htmlAltRegex = new RegExp(/alt=""|alt=''/, "gid");
+    const markdownAltRegex = new RegExp(/!\[""\]|!\[''\]/, "gid");
 
     for (const token of [...htmlTagsWithImages, ...inlineImages]) {
       const lineRange = token.map;
@@ -27,15 +32,18 @@ module.exports = {
 
       for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
-        let fails;
+        let matches;
         if (token.type === "inline") {
-          fails = markdownAltRegex.test(line);
+          matches = line.matchAll(markdownAltRegex);
         } else {
-          fails = htmlAltRegex.test(line);
+          matches = line.matchAll(htmlAltRegex);
         }
-        if (fails) {
+        for (const match of matches) {
+          const matchingContent = match[0];
+          const startIndex = match.indices[0][0];
           onError({
             lineNumber: lineNumber + i,
+            range: [startIndex + 1, matchingContent.length],
           });
         }
       }

test/no-empty-string-alt.test.js

@@ -6,6 +6,8 @@ describe("GH003: No Empty String Alt", () => {
     test("inline", async () => {
       const strings = [
         "![Chart with a single root node reading 'Example'](https://user-images.githubusercontent.com/abcdef.png)",
+        "`![''](image.png)`", // code block
+        '`![""](image.png)`', // code block
       ];
 
       const results = await runTest(strings, noEmptyStringAltRule);
@@ -17,6 +19,7 @@ describe("GH003: No Empty String Alt", () => {
     test("html image", async () => {
       const strings = [
         '<img alt="A helpful description" src="https://user-images.githubusercontent.com/abcdef.png">',
+        "`<img alt='' src='image.png'`", // code block
       ];
 
       const results = await runTest(strings, noEmptyStringAltRule);
@@ -76,9 +79,12 @@ describe("GH003: No Empty String Alt", () => {
       expect(results[0].ruleDescription).toMatch(
         "Please provide an alternative text for the image.",
       );
+      expect(results[0].errorRange).toEqual([1, 5]);
+
       expect(results[1].ruleDescription).toMatch(
         "Please provide an alternative text for the image.",
       );
+      expect(results[1].errorRange).toEqual([6, 6]);
     });
   });
 });