feat(image)!: alt prop is required

Amsterdam · Nov 1, 2024 · 221a189 · 221a189
1 parent 7fa06e6
commit 221a189
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git 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,15 +14,15 @@ 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')
 
     expect(component).toHaveClass('ams-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
@@ -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
@@ -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>