[Emotion] Convert EuiImage

src-docs/src/views/image/float.js → src-docs/src/views/image/float.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { EuiImage, EuiText } from '../../../../src/components';
+// @ts-ignore faker has no Typescript defs
 import { fake } from 'faker';
 
 export default () => (
@@ -10,9 +11,9 @@ export default () => (
       float="right"
       margin="l"
       hasShadow
-      caption="Random nature image"
+      caption="A randomized image"
       allowFullScreen
-      alt="Random nature image"
+      alt="" // Because the image is randomized, there is no meaningful alt text we can generate here.
       src="https://picsum.photos/800/500"
     />
     <p>{fake('{{lorem.paragraphs}}')}</p>
@@ -24,8 +25,8 @@ export default () => (
       margin="l"
       hasShadow
       allowFullScreen
-      caption="Another random image"
-      alt="Random nature image"
+      caption="Another randomized image"
+      alt="" // Because the image is randomized, there is no meaningful alt text we can generate here.
       src="https://picsum.photos/300/300"
     />
     <p>{fake('{{lorem.paragraphs}}')}</p>

src-docs/src/views/image/image.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { EuiImage } from '../../../../src/components';
+
+export default () => (
+  <EuiImage
+    size="l"
+    hasShadow
+    caption={
+      <p>
+        <em>Mastigias papua</em>, also known as spotted jelly
+      </p>
+    }
+    alt="Many small white-spotted pink jellyfish floating in a dark aquarium"
+    src="https://images.unsplash.com/photo-1650253618249-fb0d32d3865c?w=900&h=900&fit=crop&q=60"
+  />
+);

src-docs/src/views/image/image_example.js

@@ -2,42 +2,47 @@ import React, { Fragment } from 'react';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCallOut, EuiImage } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiCallOut,
+  EuiLink,
+  EuiImage,
+} from '../../../../src/components';
 EuiImage.__docgenInfo.props.src.required = true;
 
 import imageConfig from './playground';
 
 import Image from './image';
 const imageSource = require('!!raw-loader!./image');
 const imageSnippet = `<EuiImage
-  alt={description}
-  src={someSrc}
+  alt={alt}
+  src={src}
 />
 `;
 
 import ImageSizes from './image_size';
 const imageSizesSource = require('!!raw-loader!./image_size');
 const imageSizesSnippet = `<EuiImage
   size="l"
-  alt={description}
-  src={someSrc}
+  alt={alt}
+  src={src}
 />
 `;
 
 import ImageZoom from './image_zoom';
 const imageZoomSource = require('!!raw-loader!./image_zoom');
 const imageZoomSnippet = `<EuiImage
   allowFullScreen
-  alt={description}
-  src={someSrc}
+  alt={alt}
+  src={src}
 />
 `;
 
 import ImageFloat from './float';
 const imageFloatSource = require('!!raw-loader!./float');
 const imageFloatSnippet = `<EuiImage
-  alt={description}
-  src={someSrc}
+  alt={alt}
+  src={src}
   float="left"
   margin="l"
 />
@@ -54,10 +59,36 @@ export const ImageExample = {
         },
       ],
       text: (
-        <p>
-          Use <strong>EuiImage</strong> when you need to place a static image
-          into a page with an optional caption.
-        </p>
+        <>
+          <p>
+            Use <strong>EuiImage</strong> when you need to place a static image
+            into a page with an optional caption.
+          </p>
+          <EuiCallOut
+            iconType="accessibility"
+            title="Writing meaningful image alt text"
+          >
+            <p>
+              This page has several examples of alt text written to aid screen
+              reader users, as well as several examples of when <em>not</em> to
+              include alt text. When an image is decorative, or if the image is
+              adequately described by surrounding text, it is better to pass an
+              empty <EuiCode>{'""'}</EuiCode> string instead.
+            </p>
+            <p>
+              When an image is not already sufficiently described, the alt text
+              passed should help non-visual users understand the purpose of the
+              image within the context of the overall page. See{' '}
+              <EuiLink
+                href="https://webaim.org/techniques/alttext/"
+                target="_blank"
+              >
+                WebAIM
+              </EuiLink>{' '}
+              for a more detailed guide to writing effective alt text.
+            </p>
+          </EuiCallOut>
+        </>
       ),
       props: { EuiImage },
       demo: <Image />,

src-docs/src/views/image/image_size.js → src-docs/src/views/image/image_size.tsx

@@ -2,68 +2,74 @@ import React from 'react';
 
 import { EuiImage, EuiSpacer } from '../../../../src/components';
 
+const src =
+  'https://images.unsplash.com/photo-1477747219299-60f95c811fef?w=1000&h=1000&fit=crop&q=60';
+const alt =
+  'A cozy breakfast scene. In the background is a plate of waffles and blueberries. In the middle ground is a glass of orange juice and a small cup of cream. In the foreground is a plate of Eggs Benedict with a side of salad and cherry tomatoes.';
+
 export default () => (
   <div>
     <EuiImage
       hasShadow
       allowFullScreen
       size={50}
       caption="Custom size (50)"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
+      wrapperProps={{ className: 'eui-textLeft' }}
     />
     <EuiSpacer />
     <EuiImage
       size="s"
       hasShadow
       allowFullScreen
       caption="Small"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
     <EuiSpacer />
     <EuiImage
       size="m"
       hasShadow
       allowFullScreen
       caption="Medium"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
     <EuiSpacer />
     <EuiImage
       size="l"
       hasShadow
       allowFullScreen
       caption="Large"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
     <EuiSpacer />
     <EuiImage
       size="xl"
       hasShadow
       allowFullScreen
       caption="Extra large"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
     <EuiSpacer />
     <EuiImage
       hasShadow
       allowFullScreen
       caption="Original"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
     <EuiSpacer />
     <EuiImage
       hasShadow
       allowFullScreen
       size="fullWidth"
       caption="Full width"
-      alt="Accessible image alt goes here"
-      src="https://source.unsplash.com/1000x1000/?Nature"
+      alt={alt}
+      src={src}
     />
   </div>
 );

src-docs/src/views/image/image_zoom.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  EuiImage,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup justifyContent="spaceEvenly">
+    <EuiFlexItem grow={false}>
+      <EuiImage
+        size="m"
+        hasShadow
+        allowFullScreen
+        caption="Albert Einstein, theoretical physicist"
+        alt="" // Because this image is sufficiently described by its caption, there is no need to repeat it via alt text
+        src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiImage
+        allowFullScreen
+        caption={
+          <>
+            Browser usage on{' '}
+            <EuiLink
+              href="https://commons.wikimedia.org/wiki/File:Wikimedia_browser_share_pie_chart.png"
+              target="_blank"
+            >
+              Wikimedia (CC BY 3.0)
+            </EuiLink>
+          </>
+        }
+        alt="Pie chart describing browser usage on Wikimedia on October 2011. Internet Explorer occupies 34 percent, Firefox occupies 23 percent, Chrome occupies 20 percent, Safari occupies 11 percent, Opera occupies 5%, Android occupies 1.9 percent, and other browsers occupy 3.5 percent."
+        src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Wikimedia_browser_share_pie_chart.png"
+        fullScreenIconColor="dark"
+        size={300}
+        style={{ padding: '20px 30px', background: 'white' }}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);