Improving EuiImage accessibility (#2447)

* Improving EuiImage accessibility * Adding changelog and minor css fix * Adding i18n * Update src/components/image/image.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * Adding alt value into i18n * Moving rest into img tag * Fixing test
elastic · Oct 18, 2019 · fa562a7 · fa562a7
1 parent 33177d3
commit fa562a7
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Improved a11y in `EuiImage` ([#2447](https://github.com/elastic/eui/pull/2447))
 - Made EuiIcon a PureComponent, to speed up React re-render performance ([#2448](https://github.com/elastic/eui/pull/2448))
 - Added ability for `EuiColorStops` to accept user-defined range bounds ([#2396](https://github.com/elastic/eui/pull/2396))
 - Added `external` prop to `EuiLink` ([#2442](https://github.com/elastic/eui/pull/2442))

diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap
@@ -2,30 +2,34 @@
 
 exports[`EuiImage is rendered 1`] = `
 <figure
-  aria-label="aria-label"
   class="euiImage euiImage--large testClass1 testClass2"
-  data-test-subj="test subject string"
+  role="figure"
 >
   <img
     alt="alt"
+    aria-label="aria-label"
     class="euiImage__img"
+    data-test-subj="test subject string"
     src="/cat.jpg"
   />
 </figure>
 `;
 
 exports[`EuiImage is rendered and allows full screen 1`] = `
-<button
+<figure
   class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
-  type="button"
+  role="figure"
 >
-  <figure
-    aria-label="aria-label"
-    data-test-subj="test subject string"
+  <button
+    aria-label="Open full screen alt image"
+    class="euiImage__button"
+    type="button"
   >
     <img
       alt="alt"
+      aria-label="aria-label"
       class="euiImage__img"
+      data-test-subj="test subject string"
       src="/cat.jpg"
     />
     <svg
@@ -36,6 +40,6 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
       width="16"
       xmlns="http://www.w3.org/2000/svg"
     />
-  </figure>
-</button>
+  </button>
+</figure>
 `;
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
@@ -17,40 +17,35 @@
     }
   }
 
-  &.euiImage--allowFullScreen {
-    &:focus .euiImage__img {
+  .euiImage__button {
+    cursor: pointer;
+
+    // transition the shadow
+    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+    &:focus  {
       outline: 2px solid $euiFocusRingColor;
     }
 
     &:hover .euiImage__icon {
       visibility: visible;
       fill-opacity: 1;
     }
+  }
 
-    &:hover .euiImage__caption,
-    &:focus .euiImage__caption {
+  &.euiImage--allowFullScreen {
+    &:hover .euiImage__caption {
       text-decoration: underline;
     }
 
-    &:not(.euiImage--hasShadow):hover,
-    &:not(.euiImage--hasShadow):focus {
-      .euiImage__img {
-        @include euiBottomShadowMedium;
-      }
-    }
-
-    &.euiImage--hasShadow:hover,
-    &.euiImage--hasShadow:focus {
-      .euiImage__img {
-        @include euiBottomShadow;
-      }
+    &:not(.euiImage--hasShadow) .euiImage__button:hover,
+    &:not(.euiImage--hasShadow) .euiImage__button:focus {
+      @include euiBottomShadowMedium;
     }
 
-    .euiImage__img {
-      cursor: pointer;
-
-      // transition the shadow
-      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+    &.euiImage--hasShadow .euiImage__button:hover,
+    &.euiImage--hasShadow .euiImage__button:focus {
+      @include euiBottomShadow;
     }
   }
 
@@ -79,6 +74,7 @@
 // The image itself is full width within the container.
 .euiImage__img {
   width: 100%;
+  vertical-align: middle;
 }
 
 .euiImage__caption {
@@ -103,32 +99,29 @@
   max-width: 80vw;
   animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
 
-  .euiImage-isFullScreen__icon {
+  &:hover {
+    .euiImage__button {
+      @include euiBottomShadow;
+    }
+
+    .euiImage__caption {
+      text-decoration: underline;
+    }
+  }
+
+  &__icon {
     position: absolute;
     right: $euiSize;
     top: $euiSize;
   }
 
-  .euiImage-isFullScreen__img {
+  &__img {
     max-height: 80vh;
     max-width: 80vw;
+    vertical-align: middle;
     cursor: pointer;
     transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
-
-  &:hover .euiImage-isFullScreen__img {
-    @include euiBottomShadow;
-    cursor: pointer;
-  }
-
-  &:focus .euiImage-isFullScreen__img {
-    outline: 2px solid $euiFocusRingColor;
-  }
-
-  &:hover .euiImage__caption,
-  &:focus-within .euiImage__caption {
-    text-decoration: underline;
-  }
 }
 
 @keyframes euiImageFullScreen {

diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
@@ -6,6 +6,8 @@ import { EuiOverlayMask } from '../overlay_mask';
 
 import { EuiIcon } from '../icon';
 
+import { EuiI18n } from '../i18n';
+
 import { EuiFocusTrap } from '../focus_trap';
 
 import { keyCodes } from '../../services';
@@ -112,41 +114,67 @@ export class EuiImage extends Component<EuiImageProps, State> {
     const fullScreenDisplay = (
       <EuiOverlayMask onClick={this.closeFullScreen}>
         <EuiFocusTrap clickOutsideDisables={true}>
-          <button
-            type="button"
-            className="euiImage-isFullScreen"
-            onClick={this.closeFullScreen}
-            onKeyDown={this.onKeyDown}>
-            <figure>
-              <img src={url} className="euiImage-isFullScreen__img" alt={alt} />
-              {optionalCaption}
-
-              <EuiIcon
-                type="cross"
-                color={fullScreenIconColorMap[fullScreenIconColor]}
-                className="euiImage-isFullScreen__icon"
-              />
-            </figure>
-          </button>
+          <figure
+            className="euiImage euiImage-isFullScreen"
+            role="figure"
+            aria-label={caption}>
+            <EuiI18n
+              token="euiImage.closeImage"
+              values={{ alt }}
+              default="Close full screen {alt} image">
+              {(closeImage: string) => (
+                <button
+                  type="button"
+                  aria-label={closeImage}
+                  className="euiImage__button"
+                  onClick={this.closeFullScreen}
+                  onKeyDown={this.onKeyDown}>
+                  <img
+                    src={url}
+                    alt={alt}
+                    className="euiImage-isFullScreen__img"
+                    {...rest}
+                  />
+                  <EuiIcon
+                    type="cross"
+                    color={fullScreenIconColorMap[fullScreenIconColor]}
+                    className="euiImage-isFullScreen__icon"
+                  />
+                </button>
+              )}
+            </EuiI18n>
+            {optionalCaption}
+          </figure>
         </EuiFocusTrap>
       </EuiOverlayMask>
     );
 
     if (allowFullScreen) {
       return (
-        <button type="button" onClick={this.openFullScreen} className={classes}>
-          <figure {...rest}>
-            <img src={url} className="euiImage__img" alt={alt} />
-            {optionalCaption}
-            {allowFullScreenIcon}
-            {isFullScreenActive && fullScreenDisplay}
-          </figure>
-        </button>
+        <figure className={classes} role="figure" aria-label={caption}>
+          <EuiI18n
+            token="euiImage.openImage"
+            values={{ alt }}
+            default="Open full screen {alt} image">
+            {(openImage: string) => (
+              <button
+                type="button"
+                aria-label={openImage}
+                className="euiImage__button"
+                onClick={this.openFullScreen}>
+                <img src={url} alt={alt} className="euiImage__img" {...rest} />
+                {allowFullScreenIcon}
+                {isFullScreenActive && fullScreenDisplay}
+              </button>
+            )}
+          </EuiI18n>
+          {optionalCaption}
+        </figure>
       );
     } else {
       return (
-        <figure className={classes} {...rest}>
-          <img src={url} className="euiImage__img" alt={alt} />
+        <figure className={classes} role="figure" aria-label={caption}>
+          <img src={url} className="euiImage__img" alt={alt} {...rest} />
           {optionalCaption}
         </figure>
       );