Update MD045/no-alt-text to report instances of HTML "img" tags missi…

…ng an "alt" attribute (fixes #992).
DavidAnson · Oct 19, 2023 · 531e58e · 531e58e
1 parent 0afedae
commit 531e58e
Show file tree

Hide file tree

Showing 18 changed files with 274 additions and 25 deletions.
diff --git a/demo/markdownlint-browser.js b/demo/markdownlint-browser.js
@@ -46,8 +46,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var micromark = __webpack_require__(/*! ./micromark.cjs */ "../helpers/micromark.cjs");
 var _require = __webpack_require__(/*! ./shared.js */ "../helpers/shared.js"),
-  newLineRe = _require.newLineRe;
+  newLineRe = _require.newLineRe,
+  nextLinesRe = _require.nextLinesRe;
 module.exports.newLineRe = newLineRe;
+module.exports.nextLinesRe = nextLinesRe;
 
 // Regular expression for matching common front matter (YAML and TOML)
 module.exports.frontMatterRe =
@@ -1064,6 +1066,9 @@ module.exports.expandTildePath = expandTildePath;
 // See NEWLINES_RE in markdown-it/lib/rules_core/normalize.js
 module.exports.newLineRe = /\r\n?|\n/g;
 
+// Regular expression for matching next lines
+module.exports.nextLinesRe = /[\r\n][\s\S]*$/;
+
 /***/ }),
 
 /***/ "markdown-it":
@@ -5043,11 +5048,11 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var _require = __webpack_require__(/*! ../helpers */ "../helpers/helpers.js"),
-  addError = _require.addError;
+  addError = _require.addError,
+  nextLinesRe = _require.nextLinesRe;
 var _require2 = __webpack_require__(/*! ../helpers/micromark.cjs */ "../helpers/micromark.cjs"),
   filterByTypes = _require2.filterByTypes,
   getHtmlTagInfo = _require2.getHtmlTagInfo;
-var nextLinesRe = /[\r\n][\s\S]*$/;
 module.exports = {
   "names": ["MD033", "no-inline-html"],
   "description": "Inline HTML",
@@ -5986,15 +5991,23 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var _require = __webpack_require__(/*! ../helpers */ "../helpers/helpers.js"),
-  addError = _require.addError;
+  addError = _require.addError,
+  nextLinesRe = _require.nextLinesRe;
 var _require2 = __webpack_require__(/*! ../helpers/micromark.cjs */ "../helpers/micromark.cjs"),
-  filterByTypes = _require2.filterByTypes;
+  filterByTypes = _require2.filterByTypes,
+  getHtmlTagInfo = _require2.getHtmlTagInfo;
+
+// Regular expression for identifying alt attribute
+var altRe = /\salt=/i;
 module.exports = {
   "names": ["MD045", "no-alt-text"],
   "description": "Images should have alternate text (alt text)",
   "tags": ["accessibility", "images"],
   "function": function MD045(params, onError) {
-    var images = filterByTypes(params.parsers.micromark.tokens, ["image"]);
+    var tokens = params.parsers.micromark.tokens;
+
+    // Process Markdown images
+    var images = filterByTypes(tokens, ["image"]);
     var _iterator = _createForOfIteratorHelper(images),
       _step;
     try {
@@ -6008,11 +6021,33 @@ module.exports = {
           addError(onError, image.startLine, undefined, undefined, range);
         }
       }
+
+      // Process HTML images
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
+    var htmlTexts = filterByTypes(tokens, ["htmlText"]);
+    var _iterator2 = _createForOfIteratorHelper(htmlTexts),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var htmlText = _step2.value;
+        var startColumn = htmlText.startColumn,
+          startLine = htmlText.startLine,
+          text = htmlText.text;
+        var htmlTagInfo = getHtmlTagInfo(htmlText);
+        if (htmlTagInfo && htmlTagInfo.name.toLowerCase() === "img" && !altRe.test(text)) {
+          var _range = [startColumn, text.replace(nextLinesRe, "").length];
+          addError(onError, startLine, undefined, undefined, _range);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
   }
 };
 

diff --git a/doc-build/md045.md b/doc-build/md045.md
@@ -17,6 +17,12 @@ Or with reference syntax as:
 [ref]: image.jpg "Optional title"
 ```
 
+Or with HTML as:
+
+```html
+<img src="image.jpg" alt="Alternate text" />
+```
+
 Guidance for writing alternate text is available from the [W3C][w3c],
 [Wikipedia][wikipedia], and [other locations][phase2technology].
 

diff --git a/doc/Rules.md b/doc/Rules.md
@@ -1955,6 +1955,12 @@ Or with reference syntax as:
 [ref]: image.jpg "Optional title"
 ```
 
+Or with HTML as:
+
+```html
+<img src="image.jpg" alt="Alternate text" />
+```
+
 Guidance for writing alternate text is available from the [W3C][w3c],
 [Wikipedia][wikipedia], and [other locations][phase2technology].
 

diff --git a/doc/md045.md b/doc/md045.md
@@ -23,6 +23,12 @@ Or with reference syntax as:
 [ref]: image.jpg "Optional title"
 ```
 
+Or with HTML as:
+
+```html
+<img src="image.jpg" alt="Alternate text" />
+```
+
 Guidance for writing alternate text is available from the [W3C][w3c],
 [Wikipedia][wikipedia], and [other locations][phase2technology].
 

diff --git a/helpers/helpers.js b/helpers/helpers.js
@@ -4,8 +4,10 @@
 
 const micromark = require("./micromark.cjs");
 
-const { newLineRe } = require("./shared.js");
+const { newLineRe, nextLinesRe } = require("./shared.js");
+
 module.exports.newLineRe = newLineRe;
+module.exports.nextLinesRe = nextLinesRe;
 
 // Regular expression for matching common front matter (YAML and TOML)
 module.exports.frontMatterRe =

diff --git a/helpers/shared.js b/helpers/shared.js
@@ -5,3 +5,6 @@
 // Regular expression for matching common newline characters
 // See NEWLINES_RE in markdown-it/lib/rules_core/normalize.js
 module.exports.newLineRe = /\r\n?|\n/g;
+
+// Regular expression for matching next lines
+module.exports.nextLinesRe = /[\r\n][\s\S]*$/;
diff --git a/lib/md033.js b/lib/md033.js
@@ -2,12 +2,10 @@
 
 "use strict";
 
-const { addError } = require("../helpers");
+const { addError, nextLinesRe } = require("../helpers");
 const { filterByTypes, getHtmlTagInfo } =
   require("../helpers/micromark.cjs");
 
-const nextLinesRe = /[\r\n][\s\S]*$/;
-
 module.exports = {
   "names": [ "MD033", "no-inline-html" ],
   "description": "Inline HTML",

diff --git a/lib/md045.js b/lib/md045.js
@@ -2,15 +2,21 @@
 
 "use strict";
 
-const { addError } = require("../helpers");
-const { filterByTypes } = require("../helpers/micromark.cjs");
+const { addError, nextLinesRe } = require("../helpers");
+const { filterByTypes, getHtmlTagInfo } = require("../helpers/micromark.cjs");
+
+// Regular expression for identifying alt attribute
+const altRe = /\salt=/i;
 
 module.exports = {
   "names": [ "MD045", "no-alt-text" ],
   "description": "Images should have alternate text (alt text)",
   "tags": [ "accessibility", "images" ],
   "function": function MD045(params, onError) {
-    const images = filterByTypes(params.parsers.micromark.tokens, [ "image" ]);
+    const { tokens } = params.parsers.micromark;
+
+    // Process Markdown images
+    const images = filterByTypes(tokens, [ "image" ]);
     for (const image of images) {
       const labelTexts = filterByTypes(image.children, [ "labelText" ]);
       if (labelTexts.some((labelText) => labelText.text.length === 0)) {
@@ -26,5 +32,29 @@ module.exports = {
         );
       }
     }
+
+    // Process HTML images
+    const htmlTexts = filterByTypes(tokens, [ "htmlText" ]);
+    for (const htmlText of htmlTexts) {
+      const { startColumn, startLine, text } = htmlText;
+      const htmlTagInfo = getHtmlTagInfo(htmlText);
+      if (
+        htmlTagInfo &&
+        (htmlTagInfo.name.toLowerCase() === "img") &&
+        !altRe.test(text)
+      ) {
+        const range = [
+          startColumn,
+          text.replace(nextLinesRe, "").length
+        ];
+        addError(
+          onError,
+          startLine,
+          undefined,
+          undefined,
+          range
+        );
+      }
+    }
   }
 };
diff --git a/test/h1-image-as-top-level-heading.md b/test/h1-image-as-top-level-heading.md
@@ -1,4 +1,4 @@
-<h1 align="center"><img src="https://placekitten.com/300/150"/></h1>
+<h1 align="center"><img src="https://placekitten.com/300/150" alt="A kitten" /></h1>
 
 Text
 

diff --git a/test/html-tags.md b/test/html-tags.md
@@ -88,7 +88,7 @@ Text ``text <em> text`` text
 Text
 
 Text <a href="#anchor">inline {MD033}</a> text
-text <img src="src.png"/> text {MD033}
+text <img src="src.png" alt="Description" /> text {MD033}
 
 Text
 

diff --git a/test/no-alt-text.md b/test/no-alt-text.md
@@ -28,5 +28,43 @@ Multi-line image with alternate text ![Alternate text](image.jpg "Title"
 Multi-line image without alternate text ![](image.jpg "Title"
 ) {MD045:28}
 
+<!-- markdownlint-disable no-inline-html -->
+
+Image tag with alt attribute set to text
+<img src="image.png" alt="Descriptive text" />
+
+Image tag with alt attribute not set
+<img src="image.png" alt> {MD045}
+
+Image tag with alt attribute set to decorative with an empty double-quote string
+<img src="image.png" alt="" />
+
+Image tag with alt attribute set to decorative with an empty single-quote string
+<img src="image.png" alt='' />
+
+Image tag with no alt attribute <img src="image.png" /> {MD045}
+
+Multi-line image tag with no alt text
+<img
+  src="image.png"> {MD045:48}
+
+Multi-line image tag with alt attribute not set
+<img
+  src="image.png"
+  alt> {MD045:52}
+
+Multi-line image tag with alt text
+<img
+  src="image.png"
+  alt="Description"
+  >
+
+Uppercase image tag with alt attribute set
+<IMG SRC="cat.png" ALT="Descriptive text">
+
+Uppercase image tag with no alt set <IMG SRC="cat.png" /> {MD045}
+
+<!-- markdownlint-restore no-inline-html -->
+
 [notitle]: image.jpg
 [title]: image.jpg "Title"
diff --git a/test/proper-names-no-html.md b/test/proper-names-no-html.md
@@ -6,7 +6,7 @@ Bad text javascript. {MD044}
 
 Bad code `javascript`. {MD044}
 
-<img src="img/javascript/image.png">
+<img src="img/javascript/image.png" alt="Description">
 
 <script type="text/javascript">
 javascript {MD044}

diff --git a/test/proper-names.md b/test/proper-names.md
@@ -89,7 +89,7 @@ Text referencing MultipleCase name.
 Text referencing MULTIPLECASE name. {MD044}
 Text referencing mULTIPLEcASE name.
 
-<img src="img/javascript/image.png" error="{MD044}">
+<img src="img/javascript/image.png" alt="Description" error="{MD044}">
 
 <script type="text/javascript">
 {MD044:94}

diff --git a/test/snapshots/markdownlint-test-micromark.mjs.snap b/test/snapshots/markdownlint-test-micromark.mjs.snap
diff --git a/test/snapshots/markdownlint-test-repos.js.md b/test/snapshots/markdownlint-test-repos.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://avajs.dev).
 
 > Expected linting violations
 
-    ''
+    'test-repos/apache-airflow/tests/system/providers/apache/hive/example_twitter_README.md: 36: MD045/no-alt-text Images should have alternate text (alt text)'
 
 ## https://github.com/dotnet/docs
 
@@ -37,7 +37,13 @@ Generated by [AVA](https://avajs.dev).
 
 > Expected linting violations
 
-    `test-repos/mdn-content/files/en-us/web/svg/attribute/d/index.md: 234: MD007/ul-indent Unordered list indentation [Expected: 0; Actual: 10]␊
+    `test-repos/mdn-content/files/en-us/web/css/angle/index.md: 38: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/css/angle/index.md: 49: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/css/angle/index.md: 60: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/css/angle/index.md: 71: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/css/transform-function/rotate3d/index.md: 67: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/css/transform-function/rotate3d/index.md: 251: MD045/no-alt-text Images should have alternate text (alt text)␊
+    test-repos/mdn-content/files/en-us/web/svg/attribute/d/index.md: 234: MD007/ul-indent Unordered list indentation [Expected: 0; Actual: 10]␊
     test-repos/mdn-content/files/en-us/web/svg/attribute/d/index.md: 556: MD007/ul-indent Unordered list indentation [Expected: 0; Actual: 12]␊
     test-repos/mdn-content/files/en-us/web/svg/attribute/d/index.md: 769: MD007/ul-indent Unordered list indentation [Expected: 0; Actual: 12]␊
     test-repos/mdn-content/files/en-us/web/svg/attribute/d/index.md: 838: MD007/ul-indent Unordered list indentation [Expected: 0; Actual: 12]`
@@ -58,6 +64,7 @@ Generated by [AVA](https://avajs.dev).
     test-repos/mochajs-mocha/MAINTAINERS.md: 34: MD051/link-fragments Link fragments should be valid [Context: "[Projects](#projects)"]␊
     test-repos/mochajs-mocha/PROJECT_CHARTER.md: 51: MD051/link-fragments Link fragments should be valid [Context: "[§2: Scope](#%c2%a72-scope)"]␊
     test-repos/mochajs-mocha/PROJECT_CHARTER.md: 56: MD051/link-fragments Link fragments should be valid [Context: "[§2: Scope](#%c2%a72-scope)"]␊
+    test-repos/mochajs-mocha/README.md: 36: MD045/no-alt-text Images should have alternate text (alt text)␊
     test-repos/mochajs-mocha/docs/index.md: 32: MD051/link-fragments Link fragments should be valid [Context: "[global variable leak detection](#-check-leaks)"]␊
     test-repos/mochajs-mocha/docs/index.md: 33: MD051/link-fragments Link fragments should be valid [Context: "[optionally run tests that match a regexp](#-grep-regexp-g-regexp)"]␊
     test-repos/mochajs-mocha/docs/index.md: 34: MD051/link-fragments Link fragments should be valid [Context: "[auto-exit to prevent "hanging" with an active loop](#-exit)"]␊
@@ -205,4 +212,4 @@ Generated by [AVA](https://avajs.dev).
 
 > Expected linting violations
 
-    ''
+    'test-repos/webpack-webpack-js-org/README.md: 3: MD045/no-alt-text Images should have alternate text (alt text)'
diff --git a/test/snapshots/markdownlint-test-repos.js.snap b/test/snapshots/markdownlint-test-repos.js.snap
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,7 +88,7 @@ Text ``text <em> text`` text @@
     Text
     Text <a href="#anchor">inline {MD033}</a> text
-    text <img src="src.png"/> text {MD033}
+    text <img src="src.png" alt="Description" /> text {MD033}
     Text
@@ Expand Down @@