Add HTML support for MD045: no-alt-text

demo/markdownlint-browser.js

@@ -47,7 +47,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 var micromark = __webpack_require__(/*! ./micromark.cjs */ "../helpers/micromark.cjs");
 var _require = __webpack_require__(/*! ./shared.js */ "../helpers/shared.js"),
   newLineRe = _require.newLineRe;
+var _require2 = __webpack_require__(/*! ./shared.js */ "../helpers/shared.js"),
+  nextLinesRe = _require2.nextLinesRe;
 module.exports.newLineRe = newLineRe;
+module.exports.nextLinesRe = nextLinesRe;
 
 // Regular expression for matching common front matter (YAML and TOML)
 module.exports.frontMatterRe =
@@ -1064,6 +1067,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 +5049,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 +5992,21 @@ 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;
+    var images = filterByTypes(tokens, ["image"]);
     var _iterator = _createForOfIteratorHelper(images),
       _step;
     try {
@@ -6013,6 +6025,24 @@ module.exports = {
     } finally {
       _iterator.f();
     }
+    var htmls = filterByTypes(tokens, ["htmlText"]);
+    var _iterator2 = _createForOfIteratorHelper(htmls),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var html = _step2.value;
+        var htmlTagInfo = getHtmlTagInfo(html);
+        var isImage = htmlTagInfo && htmlTagInfo.name.toLowerCase() === "img";
+        if (isImage && !altRe.test(html.text)) {
+          var _range = [html.startColumn, html.text.replace(nextLinesRe, "").length];
+          addError(onError, html.startLine, undefined, undefined, _range);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
   }
 };
 

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].
 

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].
 

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].
 

helpers/helpers.js

@@ -5,7 +5,10 @@
 const micromark = require("./micromark.cjs");
 
 const { newLineRe } = require("./shared.js");
+const { 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 =

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]*$/;

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",

lib/md045.js

@@ -2,15 +2,19 @@
 
 "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.tokens;
+    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 +30,24 @@ module.exports = {
         );
       }
     }
+
+    const htmls = filterByTypes(tokens, [ "htmlText" ]);
+    for (const html of htmls) {
+      const htmlTagInfo = getHtmlTagInfo(html);
+      const isImage = htmlTagInfo && htmlTagInfo.name.toLowerCase() === "img";
+      if (isImage && !altRe.test(html.text)) {
+        const range = [
+          html.startColumn,
+          html.text.replace(nextLinesRe, "").length
+        ];
+        addError(
+          onError,
+          html.startLine,
+          undefined,
+          undefined,
+          range
+        );
+      }
+    }
   }
 };

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
 

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
 

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"

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}

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}

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)'