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

…ribute (#27218) * fix: define a new constant for empty alt * fix: generate empty alt attribute for EMPTY_ALT Currently EMPTY_ALT is defined as _SKIP_ * chore: prettifier the codes * chore: add documentation * chore: add keyword description in README * fix: incorprate review comments * fix: add more unit tests * fix: fix unit test error Co-authored-by: Zhen Wang <zhen.wang1@ibm.com>
gatsbyjs · Oct 2, 2020 · 9f0b545 · 9f0b545
1 parent 4d73034
commit 9f0b545
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 3 deletions.
diff --git a/docs/docs/mdx/plugins.md b/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)

diff --git a/packages/gatsby-remark-images/README.md b/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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/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(``)
+  })
+})
diff --git a/packages/gatsby-remark-images/src/constants.js b/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`
diff --git a/packages/gatsby-remark-images/src/index.js b/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