Update ImageInput component prop types (#2067)

sumup-oss · Apr 27, 2023 · 4f78573 · 4f78573
1 parent 06faaae
commit 4f78573
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/khaki-baboons-deliver.md b/.changeset/khaki-baboons-deliver.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Changed the signature of the ImageInput's `component` prop. The `component` should now accept `aria-hidden` instead of `alt`.
diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -43,10 +43,11 @@ export interface ImageInputProps
    */
   label: string;
   /**
-   * The visual component to render as an image input. It should accept an src
-   * prop to render the image.
+   * The visual component to render as an image input.
+   * It should accept a `src` prop to render the image, and `aria-hidden` to
+   * hide it from assistive technology.
    */
-  component: (props: { src?: string; alt: string }) => JSX.Element;
+  component: (props: { 'src'?: string; 'aria-hidden': 'true' }) => JSX.Element;
   /**
    * A callback function to call when the user has selected an image.
    */
@@ -458,7 +459,7 @@ export const ImageInput = ({
           onDrop={handleDrop}
         >
           <span css={hideVisually()}>{label}</span>
-          <Component src={src || previewImage} alt="" />
+          <Component src={src || previewImage} aria-hidden="true" />
         </Label>
         {src ? (
           <ActionButton

diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -1151,6 +1151,7 @@ exports[`ImageInput > Styles > should render with an existing image 1`] = `
         </span>
         <img
           alt=""
+          aria-hidden="true"
           class="circuit-5"
           src="/images/illustration-coffee.jpg"
         />
-Original file line number
+Diff line change
@@ Expand Up @@
             </span>
             <img
               alt=""
+              aria-hidden="true"
               class="circuit-5"
               src="/images/illustration-coffee.jpg"
             />
@@ Expand Down @@