[docs] Warn: eslint-jsx-plugin-a11y misses styled components, gastby-image

[akattow]

The Gatsby docs on Making Your Site Accessible include a section on linting with eslint-jsx-plugin-a11y. Many Gatsby starters also use CSS-in-JS libraries (Emotion, Styled-Components). However, styled components (in both libraries) do not work with eslint-jsx-plugin-a11y - it is an open issue.

Additionally, the plugin does not catch errors on Gatsby <Img /> elements, e.g. missing alt tags.

Should the section on linting include a note warning users about this? As Gatsby continues to introduce more developers to React and CSS-in-JS, many readers may not already know this.

If this is something that should be added to the docs, I am happy to do so!

[LekoArts]

Thank you for opening this!

Many Gatsby starters also use CSS-in-JS libraries (Emotion, Styled-Components). However, styled components (in both libraries) do not work with eslint-jsx-plugin-a11y - it is an open issue.

I feel like this would be out of scope of this document. CSS-in-JS seems to be popular when you're inside this bubble, however there are still a lot of people that use other solutions and to which this comment wouldn't apply. This doc doesn't lay claim to show all edge cases and problems of certain solutions.

Additionally, the plugin does not catch errors on Gatsby elements, e.g. missing alt tags.

The component sets the alt tag by default to alt="" so it's not missing :)

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!