From 221a1895ee2e7fe8be232021a43626d58bdedb94 Mon Sep 17 00:00:00 2001
From: Ruben Sibon <r.sibon@amsterdam.nl>
Date: Fri, 1 Nov 2024 16:23:19 +0100
Subject: [PATCH] feat(image)!: alt prop is required

---
 packages/react/src/Image/Image.test.tsx    | 10 +++++-----
 packages/react/src/Image/Image.tsx         |  2 ++
 storybook/src/docs/components/AppIcons.tsx | 16 ++++++++--------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/Image/Image.test.tsx b/packages/react/src/Image/Image.test.tsx
index dbb18575a1..47272ef775 100644
--- a/packages/react/src/Image/Image.test.tsx
+++ b/packages/react/src/Image/Image.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Image', () => {
   it('renders', () => {
-    const { container } = render(<Image />)
+    const { container } = render(<Image alt={'Image'} />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,7 +14,7 @@ describe('Image', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<Image />)
+    const { container } = render(<Image alt={'Image'} />)
 
     const component = container.querySelector(':only-child')
 
@@ -22,7 +22,7 @@ describe('Image', () => {
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<Image className="extra" />)
+    const { container } = render(<Image alt={'Image'} className="extra" />)
 
     const component = container.querySelector(':only-child')
 
@@ -31,7 +31,7 @@ describe('Image', () => {
   })
 
   it('renders a class name to display the image as large as its container', () => {
-    const { container } = render(<Image cover />)
+    const { container } = render(<Image alt={'Image'} cover />)
 
     const component = container.querySelector(':only-child')
 
@@ -41,7 +41,7 @@ describe('Image', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLImageElement>()
 
-    const { container } = render(<Image ref={ref} />)
+    const { container } = render(<Image alt={'Image'} ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx
index 38a857e0dd..394064563a 100644
--- a/packages/react/src/Image/Image.tsx
+++ b/packages/react/src/Image/Image.tsx
@@ -8,6 +8,8 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, ImgHTMLAttributes } from 'react'
 
 export type ImageProps = {
+  /** Descriptive text for the image. */
+  alt: string
   /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
   cover?: boolean
 } & ImgHTMLAttributes<HTMLImageElement>
diff --git a/storybook/src/docs/components/AppIcons.tsx b/storybook/src/docs/components/AppIcons.tsx
index b417b8e6d8..80eaf3ec2a 100644
--- a/storybook/src/docs/components/AppIcons.tsx
+++ b/storybook/src/docs/components/AppIcons.tsx
@@ -3,7 +3,7 @@ import { Image } from '@amsterdam/design-system-react'
 export const AppleTouchIcon = () => (
   <div className="ams-docs-gallery">
     <figure className="ams-docs-figure">
-      <Image src="favicon/apple-touch-icon.png" width={180} height={180} />
+      <Image alt="apple-touch-icon.png (180px)" src="favicon/apple-touch-icon.png" width={180} height={180} />
       <figcaption>apple-touch-icon.png (180px)</figcaption>
     </figure>
   </div>
@@ -12,19 +12,19 @@ export const AppleTouchIcon = () => (
 export const Favicon = () => (
   <div className="ams-docs-gallery">
     <figure className="ams-docs-figure">
-      <Image src="favicon/favicon.ico" width={16} height={16} />
+      <Image alt="favicon.ico (16px)" src="favicon/favicon.ico" width={16} height={16} />
       <figcaption>favicon.ico (16px)</figcaption>
     </figure>
     <figure className="ams-docs-figure">
-      <Image src="favicon/favicon.ico" width={32} height={32} />
+      <Image alt="favicon.ico (32px)" src="favicon/favicon.ico" width={32} height={32} />
       <figcaption>favicon.ico (32px)</figcaption>
     </figure>
     <figure className="ams-docs-figure">
-      <Image src="favicon/favicon.ico" width={48} height={48} />
+      <Image alt="favicon.ico (48px)" src="favicon/favicon.ico" width={48} height={48} />
       <figcaption>favicon.ico (48px)</figcaption>
     </figure>
     <figure className="ams-docs-figure">
-      <Image src="favicon/favicon.ico" width={64} height={64} />
+      <Image alt="favicon.ico (64px)" src="favicon/favicon.ico" width={64} height={64} />
       <figcaption>favicon.ico (64px)</figcaption>
     </figure>
   </div>
@@ -33,7 +33,7 @@ export const Favicon = () => (
 export const SvgIcon = () => (
   <div className="ams-docs-gallery">
     <figure className="ams-docs-figure">
-      <Image src="favicon/icon.svg" width={64} height={64} />
+      <Image alt="icon.svg (64px)" src="favicon/icon.svg" width={64} height={64} />
       <figcaption>icon.svg (64px)</figcaption>
     </figure>
   </div>
@@ -42,11 +42,11 @@ export const SvgIcon = () => (
 export const WebAppIcons = () => (
   <div className="ams-docs-gallery">
     <figure className="ams-docs-figure">
-      <Image src="app-icons/icon-192.png" width={192} height={192} />
+      <Image alt="icon-192.png (192px)" src="app-icons/icon-192.png" width={192} height={192} />
       <figcaption>icon-192.png (192px)</figcaption>
     </figure>
     <figure className="ams-docs-figure">
-      <Image src="app-icons/icon-512.png" width={512} height={512} />
+      <Image alt="icon-512.png (512px)" src="app-icons/icon-512.png" width={512} height={512} />
       <figcaption>icon-512.png (512px)</figcaption>
     </figure>
   </div>