fix(gatsby-remark-images): enable creating img tag with empty alt attribute

docs/docs/mdx/plugins.md

@@ -59,6 +59,14 @@ by Gatsby image processing.
 ![my image](./my-awesome-image.png)
 ```
 
+By default, the text `my image` will be used as the alt attribute of the
+generated `img` tag. If an empty alt attribute like `alt=""` is wished,
+a reserved keyword `GATSBY_EMPTY_ALT` can be used.
+
+```markdown
+![GATSBY_EMPTY_ALT](./my-awesome-image.png)
+```
+
 ## Remark plugins
 
 You can use [remark plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md)

packages/gatsby-remark-images/README.md

@@ -50,6 +50,13 @@ You can reference an image using the relative path, where that path is relative
 ![Alt text here](./image.jpg)
 ```
 
+By default, the text `Alt text here` will be used as the alt attribute of the generated `img` tag. If an empty alt attribute like `alt=""` is wished,
+a reserved keyword `GATSBY_EMPTY_ALT` can be used.
+
+```markdown
+![GATSBY_EMPTY_ALT](./image.png)
+```
+
 ## Options
 
 | Name                    | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

packages/gatsby-remark-images/src/__tests__/index.js

@@ -671,3 +671,41 @@ describe(`disableBgImage`, () => {
     expect(node.value).toMatchSnapshot()
   })
 })
+
+describe(`image alt attribute`, () => {
+  it(`should be generated correctly`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![testing-if-alt-is-correct](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath))
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`img`).attr(`alt`)).toEqual(`testing-if-alt-is-correct`)
+  })
+
+  it(`should use escaped filename as fallback`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath))
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`img`).attr(`alt`)).toEqual(`my image`)
+  })
+
+  it(`should be able to consider EMPTY_ALT`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![GATSBY_EMPTY_ALT](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath))
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`img`).attr(`alt`)).toEqual(``)
+  })
+})

packages/gatsby-remark-images/src/constants.js

@@ -12,6 +12,8 @@ exports.DEFAULT_OPTIONS = {
   disableBgImage: false,
 }
 
+exports.EMPTY_ALT = `GATSBY_EMPTY_ALT`
+
 exports.imageClass = `gatsby-resp-image-image`
 exports.imageWrapperClass = `gatsby-resp-image-wrapper`
 exports.imageBackgroundClass = `gatsby-resp-image-background-image`

packages/gatsby-remark-images/src/index.js

@@ -1,5 +1,6 @@
 const {
   DEFAULT_OPTIONS,
+  EMPTY_ALT,
   imageClass,
   imageBackgroundClass,
   imageWrapperClass,
@@ -168,10 +169,13 @@ module.exports = (
     const fileName = srcSplit[srcSplit.length - 1]
     const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
     const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
+    const isEmptyAlt = node.alt === EMPTY_ALT
 
-    const alt = _.escape(
-      overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
-    )
+    const alt = isEmptyAlt
+      ? ``
+      : _.escape(
+          overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
+        )
 
     const title = node.title ? _.escape(node.title) : alt