fix(gatsby-image): Added aria-hidden attribute to layout elements (#20593)

* fixed

* fixed index and added testing

Author: grgr-dkrk

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -7,11 +7,13 @@ exports[`<Image /> should have a transition-delay of 1sec 1`] = `
     style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
   >
     <div
+      aria-hidden="true"
       style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 1000ms;"
       title="Title for the image"
     />
     <img
       alt=""
+      aria-hidden="true"
       class="placeholder"
       itemprop="item-prop-for-the-image"
       src="string_of_base64"
@@ -54,11 +56,13 @@ exports[`<Image /> should render fixed size images 1`] = `
     style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
   >
     <div
+      aria-hidden="true"
       style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 500ms;"
       title="Title for the image"
     />
     <img
       alt=""
+      aria-hidden="true"
       class="placeholder"
       itemprop="item-prop-for-the-image"
       src="string_of_base64"
@@ -101,14 +105,17 @@ exports[`<Image /> should render fluid images 1`] = `
     style="position: relative; overflow: hidden; display: inline;"
   >
     <div
+      aria-hidden="true"
       style="width: 100%; padding-bottom: 66.66666666666667%;"
     />
     <div
+      aria-hidden="true"
       style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 500ms;"
       title="Title for the image"
     />
     <img
       alt=""
+      aria-hidden="true"
       class="placeholder"
       itemprop="item-prop-for-the-image"
       src="string_of_base64"
@@ -152,6 +159,7 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
     style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
   >
     <div
+      aria-hidden="true"
       style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 500ms;"
       title="Title for the image"
     />
@@ -165,6 +173,7 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
       />
       <img
         alt=""
+        aria-hidden="true"
         class="placeholder"
         itemprop="item-prop-for-the-image"
         src="other_string_of_base64"
@@ -216,9 +225,11 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
     style="position: relative; overflow: hidden; display: inline;"
   >
     <div
+      aria-hidden="true"
       style="width: 100%; padding-bottom: 50%;"
     />
     <div
+      aria-hidden="true"
       style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 500ms;"
       title="Title for the image"
     />
@@ -232,6 +243,7 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
       />
       <img
         alt=""
+        aria-hidden="true"
         class="placeholder"
         itemprop="item-prop-for-the-image"
         src="string_of_base64"

packages/gatsby-image/src/__tests__/index.js

@@ -292,4 +292,29 @@ describe(`<Image />`, () => {
     expect(onLoadMock).toHaveBeenCalledTimes(1)
     expect(onErrorMock).toHaveBeenCalledTimes(1)
   })
+
+  it(`should have an "aria-hidden" attribute on the fluid element`, () => {
+    const divTag = setup(true).querySelector(`.gatsby-image-wrapper > div`)
+    expect(divTag.getAttribute(`aria-hidden`)).toBe(`true`)
+  })
+
+  it(`should have an "aria-hidden" attribute on the background element`, () => {
+    const BgTag = setup(true).querySelector(`.gatsby-image-wrapper > div + div`)
+    expect(BgTag.getAttribute(`aria-hidden`)).toBe(`true`)
+  })
+
+  it(`should have an "aria-hidden" attribute on the Placeholder component when fluid`, () => {
+    const placeholderImageTag = setup(true).querySelector(`img`)
+    expect(placeholderImageTag.getAttribute(`aria-hidden`)).toBe(`true`)
+  })
+
+  it(`should have an "aria-hidden" attribute on the Placeholder component when fixed`, () => {
+    const placeholderImageTag = setup().querySelector(`img`)
+    expect(placeholderImageTag.getAttribute(`aria-hidden`)).toBe(`true`)
+  })
+
+  it(`should not have an "aria-hidden" attribute on the Image`, () => {
+    const placeholderImageTag = setup().querySelector(`picture img`)
+    expect(placeholderImageTag.getAttribute(`aria-hidden`)).toBe(null)
+  })
 })

packages/gatsby-image/src/index.js

@@ -254,8 +254,14 @@ const noscriptImg = props => {
 // Earlier versions of gatsby-image during the 2.x cycle did not wrap
 // the `Img` component in a `picture` element. This maintains compatibility
 // until a breaking change can be introduced in the next major release
-const Placeholder = ({ src, imageVariants, generateSources, spreadProps }) => {
-  const baseImage = <Img src={src} {...spreadProps} />
+const Placeholder = ({
+  src,
+  imageVariants,
+  generateSources,
+  spreadProps,
+  ariaHidden,
+}) => {
+  const baseImage = <Img src={src} {...spreadProps} ariaHidden={ariaHidden} />
 
   return imageVariants.length > 1 ? (
     <picture>
@@ -277,11 +283,14 @@ const Img = React.forwardRef((props, ref) => {
     onError,
     loading,
     draggable,
+    // `ariaHidden`props is used to exclude placeholders from the accessibility tree.
+    ariaHidden,
     ...otherProps
   } = props
 
   return (
     <img
+      aria-hidden={ariaHidden}
       sizes={sizes}
       srcSet={srcSet}
       src={src}
@@ -467,6 +476,7 @@ class Image extends React.Component {
         >
           {/* Preserve the aspect ratio. */}
           <Tag
+            aria-hidden
             style={{
               width: `100%`,
               paddingBottom: `${100 / image.aspectRatio}%`,
@@ -476,6 +486,7 @@ class Image extends React.Component {
           {/* Show a solid background color. */}
           {bgColor && (
             <Tag
+              aria-hidden
               title={title}
               style={{
                 backgroundColor: bgColor,
@@ -493,6 +504,7 @@ class Image extends React.Component {
           {/* Show the blurry base64 image. */}
           {image.base64 && (
             <Placeholder
+              ariaHidden
               src={image.base64}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -503,6 +515,7 @@ class Image extends React.Component {
           {/* Show the traced SVG image. */}
           {image.tracedSVG && (
             <Placeholder
+              ariaHidden
               src={image.tracedSVG}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -577,6 +590,7 @@ class Image extends React.Component {
           {/* Show a solid background color. */}
           {bgColor && (
             <Tag
+              aria-hidden
               title={title}
               style={{
                 backgroundColor: bgColor,
@@ -591,6 +605,7 @@ class Image extends React.Component {
           {/* Show the blurry base64 image. */}
           {image.base64 && (
             <Placeholder
+              ariaHidden
               src={image.base64}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -601,6 +616,7 @@ class Image extends React.Component {
           {/* Show the traced SVG image. */}
           {image.tracedSVG && (
             <Placeholder
+              ariaHidden
               src={image.tracedSVG}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}