feat(gatsby-plugin-image): Better error message for missing alt (#29981)

* feat(gatsby-plugin-image): Better error message for missing alt

* Handle invalid types too

* Add support in StaticImage

Co-authored-by: gatsbybot <[email protected]>

Author: ascorbic

packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

@@ -18,6 +18,7 @@ import { PlaceholderProps } from "./placeholder"
 import { MainImageProps } from "./main-image"
 import { Layout } from "../image-utils"
 import { getSizer } from "./layout-wrapper"
+import { propTypes } from "./gatsby-image.server"
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export interface GatsbyImageProps
@@ -215,4 +216,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
 ) {
   return <GatsbyImageHydrator {...props} />
 }
+
+GatsbyImage.propTypes = propTypes
+
 GatsbyImage.displayName = `GatsbyImage`

packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx

@@ -1,9 +1,15 @@
-import React, { ElementType, FunctionComponent, CSSProperties } from "react"
+import React, {
+  ElementType,
+  FunctionComponent,
+  CSSProperties,
+  WeakValidationMap,
+} from "react"
 import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"
 import { getWrapperProps, getMainProps, getPlaceholderProps } from "./hooks"
 import { Placeholder } from "./placeholder"
 import { MainImage, MainImageProps } from "./main-image"
 import { LayoutWrapper } from "./layout-wrapper"
+import PropTypes from "prop-types"
 
 const removeNewLines = (str: string): string => str.replace(/\n/g, ``)
 
@@ -123,3 +129,21 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     </GatsbyImageHydrator>
   )
 }
+
+export const altValidator: PropTypes.Validator<string> = (
+  props: GatsbyImageProps,
+  propName,
+  componentName,
+  ...rest
+): Error | undefined => {
+  if (!props.alt && props.alt !== ``) {
+    return new Error(
+      `The "alt" prop is required in ${componentName}. If the image is purely presentational then pass an empty string: e.g. alt="". Learn more: https://a11y-style-guide.com/style-guide/section-media.html`
+    )
+  }
+  return PropTypes.string(props, propName, componentName, ...rest)
+}
+export const propTypes = {
+  image: PropTypes.object.isRequired,
+  alt: altValidator,
+} as WeakValidationMap<GatsbyImageProps>

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -1,5 +1,8 @@
 import React, { FunctionComponent, ReactElement } from "react"
-import { GatsbyImage as GatsbyImageServer } from "./gatsby-image.server"
+import {
+  altValidator,
+  GatsbyImage as GatsbyImageServer,
+} from "./gatsby-image.server"
 import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"
 import PropTypes from "prop-types"
 import { ISharpGatsbyImageArgs } from "../image-utils"
@@ -83,7 +86,7 @@ const validLayouts = new Set([`fixed`, `fullWidth`, `constrained`])
 
 export const propTypes = {
   src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
+  alt: altValidator,
   width: checkDimensionProps,
   height: checkDimensionProps,
   sizes: PropTypes.string,