Using GATSBY_EMPTY_ALT ignored for figcaption-generation by gatsby-remark-image ie creates non-sense figcaption

[ronalde]

The fix described in issue #20179 introduces a regression, especially from an accessibility perspective. When declaring an empty alt-attribute for an image using the keyword GATSBY_EMPTY_ALT in markdown (![GATSBY_EMPTY_ALT](rel/path.jpg) and having set showCaptions: true in the plugin-options in gatsby-config.js, the plugin produces unwanted HTML:

<figure class="gatsby-resp-image-figure" ...>
    <span class="gatsby-resp-image-wrapper" style="...">
      <span class="gatsby-resp-image-background-image" style="..."></span>
        <img class="gatsby-resp-image-image" alt="" title="" src="/path.jpg" ...>
    </span>
</figure>
<figcaption class="gatsby-resp-image-figcaption"><p>GATSBY<em>EMPTY</em>ALT</p></figcaption>

• the package produces the empty value for the alt-attribute value of the img-element like instructed (line 4);
• but it inserts an (obviously) unwanted figcaption-element below the figure-element (line 7) that contains unwanted (and non-sense) content: <p>GATSBY<em>EMPTY</em>ALT</p>.

This seems to fix the problem for current 4.x versions:

--- unpatched.index.js	2021-03-15 10:09:19.898810753 +0100
+++ patched.index.js	2021-03-15 10:11:28.041596794 +0100
@@ -114,7 +114,7 @@
           switch (_context.prev = _context.next) {
             case 0:
               getCaptionString = function getCaptionString() {
-                var captionOptions = Array.isArray(options.showCaptions) ? options.showCaptions : options.showCaptions === true ? ["title", "alt"] : false;
+                var captionOptions = Array.isArray(options.showCaptions) ? options.showCaptions : ( options.showCaptions === true && node.alt !== EMPTY_ALT) ? ["title", "alt"] : false;
 
                 if (captionOptions) {
                   for (var _iterator = _createForOfIteratorHelperLoose(captionOptions), _step; !(_step = _iterator()).done;) {

Furthermore, this feature should be documented in `README.md:

--- /tmp/README.md	2021-03-15 16:05:28.328713216 +0100
+++ node_modules/gatsby-remark-images/README.md	2021-03-15 16:12:26.848647108 +0100
@@ -50,8 +50,7 @@
By default, the text `Alt text here` will be used as the alt attribute of the generated `img` tag
-.
+ and for the contents of the generated `figcaption` element.
If an empty alt attribute like `alt=""`
- is wished,
+ and no figcaption is wished,
a reserved keyword `GATSBY_EMPTY_ALT` can be used.

--- /tmp/README.md	2021-03-15 16:05:28.328713216 +0100
+++ node_modules/gatsby-remark-images/README.md	2021-03-15 16:12:26.848647108 +0100
@@ -63,7 +62,7 @@
| `showCaptions`          | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. 
...
If you just want to use the title (and omit captions for images that have alt attributes but no title), pass `['title']`. 
+ If the alt tag contains the reserved `GATSBY_EMPTY_ALT` value no `figcaption` will be produced. |

Originally posted by @ronalde in #20179 (comment)

[nategiraudeau]

@ronalde, can I work on this issue?

[ronalde]

@nategiraudeau Please do!

[Piyush-Chandel7]

Hello I Can fix this, but please can explain what exactly the problem is?? What exactly you wanted to get fixed??

[ronalde]

@nategiraudeau Thanks for your swift and clean PR!
Do you know what's blocking the linting pipeline (and how to solve that)?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[nategiraudeau]

@ronalde can this issue be reopened? I was able to fix the problem with the linter that was blocking the pull request from being merged.

[ronalde]

I don't know @nategiraudeau. I've added a comment with that question for @vladar at PR; it now seems to be blocked by the final step "cloud tests".

[nategiraudeau]

The Cloud Tests don't normally ever finish if all the other tests have passed. So the pull request is ready to merged.