From c5c1d9f80c3ad6d0c3ad66dda1378412c6492786 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Sep 2019 12:18:05 +0100
Subject: [PATCH 1/9] Improving structure

---
 .../image/__snapshots__/image.test.js.snap    | 23 ++++-
 src/components/image/image.js                 | 96 +++++++++----------
 src/components/image/image.test.js            |  8 ++
 3 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/src/components/image/__snapshots__/image.test.js.snap b/src/components/image/__snapshots__/image.test.js.snap
index 10a6524c3f6..ec70a501698 100644
--- a/src/components/image/__snapshots__/image.test.js.snap
+++ b/src/components/image/__snapshots__/image.test.js.snap
@@ -1,18 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiImage is rendered 1`] = `
+<figure
+  aria-label="aria-label"
+  class="euiImage euiImage--large testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <img
+    alt="alt"
+    class="euiImage__img"
+  />
+</figure>
+`;
+
+exports[`EuiImage is rendered and allows full screen 1`] = `
 <button
   type="button"
 >
   <figure
     aria-label="aria-label"
-    class="euiImage euiImage--large testClass1 testClass2"
+    class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
     data-test-subj="test subject string"
   >
     <img
       alt="alt"
       class="euiImage__img"
     />
+    <svg
+      class="euiIcon euiIcon--medium euiIcon--ghost euiIcon-isLoading euiImage__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
   </figure>
 </button>
 `;
diff --git a/src/components/image/image.js b/src/components/image/image.js
index c31d158e84b..54d354ba6ec 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -31,7 +31,7 @@ export class EuiImage extends Component {
     super(props);
 
     this.state = {
-      isFullScreen: false,
+      isFullScreenActive: false,
     };
   }
 
@@ -45,13 +45,13 @@ export class EuiImage extends Component {
 
   closeFullScreen = () => {
     this.setState({
-      isFullScreen: false,
+      isFullScreenActive: false,
     });
   };
 
   openFullScreen = () => {
     this.setState({
-      isFullScreen: true,
+      isFullScreenActive: true,
     });
   };
 
@@ -68,6 +68,8 @@ export class EuiImage extends Component {
       ...rest
     } = this.props;
 
+    const { isFullScreenActive } = this.state;
+
     const classes = classNames(
       'euiImage',
       sizeToClassNameMap[size],
@@ -85,59 +87,55 @@ export class EuiImage extends Component {
       );
     }
 
-    let optionalIcon;
+    const allowFullScreeIcon = (
+      <EuiIcon
+        type="fullScreen"
+        color={fullScreenIconColorMap[fullScreenIconColor]}
+        className="euiImage__icon"
+      />
+    );
 
-    if (allowFullScreen) {
-      optionalIcon = (
-        <EuiIcon
-          type="fullScreen"
-          color={fullScreenIconColorMap[fullScreenIconColor]}
-          className="euiImage__icon"
-        />
-      );
-    }
+    const fullScreenDisplay = (
+      <EuiOverlayMask onClick={this.closeFullScreen}>
+        <EuiFocusTrap clickOutsideDisables={true}>
+          <button
+            type="button"
+            onClick={this.closeFullScreen}
+            onKeyDown={this.onKeyDown}>
+            <figure
+              ref={node => {
+                this.figure = node;
+              }}
+              className="euiImageFullScreen">
+              <img src={url} className="euiImageFullScreen__img" alt={alt} />
+              {optionalCaption}
+            </figure>
+          </button>
+        </EuiFocusTrap>
+      </EuiOverlayMask>
+    );
 
-    let fullScreenDisplay;
-
-    if (this.state.isFullScreen) {
-      fullScreenDisplay = (
-        <EuiOverlayMask onClick={this.closeFullScreen}>
-          <EuiFocusTrap clickOutsideDisables={true}>
-            <button
-              type="button"
-              onClick={this.closeFullScreen}
-              onKeyDown={this.onKeyDown}>
-              <figure
-                ref={node => {
-                  this.figure = node;
-                }}
-                className="euiImageFullScreen">
-                <img src={url} className="euiImageFullScreen__img" alt={alt} />
-                {optionalCaption}
-              </figure>
-            </button>
-          </EuiFocusTrap>
-        </EuiOverlayMask>
+    if (allowFullScreen) {
+      return (
+        <button
+          type="button"
+          onClick={allowFullScreen ? this.openFullScreen : undefined}>
+          <figure className={classes} {...rest}>
+            <img src={url} className="euiImage__img" alt={alt} />
+            {optionalCaption}
+            {allowFullScreeIcon}
+            {isFullScreenActive && fullScreenDisplay}
+          </figure>
+        </button>
       );
-    }
-
-    return (
-      <button
-        type="button"
-        onClick={allowFullScreen ? this.openFullScreen : undefined}>
+    } else {
+      return (
         <figure className={classes} {...rest}>
           <img src={url} className="euiImage__img" alt={alt} />
           {optionalCaption}
-
-          {/*
-          If the below fullScreen image renders, it actually attaches to the body because of
-          EuiOverlayMask's React portal usage.
-        */}
-          {optionalIcon}
-          {fullScreenDisplay}
         </figure>
-      </button>
-    );
+      );
+    }
   }
 }
 
diff --git a/src/components/image/image.test.js b/src/components/image/image.test.js
index e235f0ce345..36c7ba1d575 100644
--- a/src/components/image/image.test.js
+++ b/src/components/image/image.test.js
@@ -12,4 +12,12 @@ describe('EuiImage', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('is rendered and allows full screen', () => {
+    const component = render(
+      <EuiImage alt="alt" size="l" allowFullScreen {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

From fafcac08a80c60f4f3e02a119ef58911caae297e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Sep 2019 13:31:43 +0100
Subject: [PATCH 2/9] Adding hover and focus styles

---
 .../image/__snapshots__/image.test.js.snap    |  2 +-
 src/components/image/_image.scss              | 19 ++++++++++++++++++-
 src/components/image/image.js                 |  5 +++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/image/__snapshots__/image.test.js.snap b/src/components/image/__snapshots__/image.test.js.snap
index ec70a501698..f6126c54257 100644
--- a/src/components/image/__snapshots__/image.test.js.snap
+++ b/src/components/image/__snapshots__/image.test.js.snap
@@ -15,11 +15,11 @@ exports[`EuiImage is rendered 1`] = `
 
 exports[`EuiImage is rendered and allows full screen 1`] = `
 <button
+  class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
   type="button"
 >
   <figure
     aria-label="aria-label"
-    class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
     data-test-subj="test subject string"
   >
     <img
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 0f09b6ce8b4..3d76dff0f8c 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -17,9 +17,26 @@
     }
   }
 
-  &.euiImage--allowFullScreen:hover {
+  &.euiImage--allowFullScreen {
+    &:not(.euiImage--hasShadow):hover,
+    &:not(.euiImage--hasShadow):focus {
+      .euiImage__img {
+        @include euiSlightShadowHover;
+      }
+    }
+
+    &.euiImage--hasShadow:hover,
+    &.euiImage--hasShadow:focus {
+      .euiImage__img {
+        @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
+      }
+    }
+
     .euiImage__img {
       cursor: pointer;
+
+      // transition the shadow
+      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
     }
 
     .euiImage__icon {
diff --git a/src/components/image/image.js b/src/components/image/image.js
index 54d354ba6ec..9993a1c1cfa 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -119,8 +119,9 @@ export class EuiImage extends Component {
       return (
         <button
           type="button"
-          onClick={allowFullScreen ? this.openFullScreen : undefined}>
-          <figure className={classes} {...rest}>
+          onClick={allowFullScreen ? this.openFullScreen : undefined}
+          className={classes}>
+          <figure {...rest}>
             <img src={url} className="euiImage__img" alt={alt} />
             {optionalCaption}
             {allowFullScreeIcon}

From a45eefec720595635d58c9b863046bd316316091 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Sep 2019 14:02:32 +0100
Subject: [PATCH 3/9] Updating changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8cfab9f7481..9835edce92e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added href prop to `EuiTab` and converted to TypeScript ([#2275](https://github.com/elastic/eui/pull/2275))
+- Added hover and focus states when allowFullScreen is true in `EuiImage`([#2287](https://github.com/elastic/eui/pull/2287))
 
 **Bug fixes**
 

From 7f4ed16a8992fcb45801911d2860dcf280f06da6 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 6 Sep 2019 17:01:19 +0100
Subject: [PATCH 4/9] BEM

---
 src/components/image/_image.scss | 6 +++---
 src/components/image/image.js    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 3d76dff0f8c..de89f838111 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -88,18 +88,18 @@
 }
 
 // The FullScreen image that optionally pops up on click.
-.euiImageFullScreen {
+.euiImage-isFullScreen {
   max-height: 80vh;
   max-width: 80vw;
   animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
 
-  .euiImageFullScreen__img {
+  .euiImage-isFullScreen__img {
     max-height: 80vh;
     max-width: 80vw;
     cursor: pointer;
   }
 
-  &:hover .euiImageFullScreen__img {
+  &:hover .euiImage-isFullScreen__img {
     cursor: pointer;
   }
 }
diff --git a/src/components/image/image.js b/src/components/image/image.js
index 9993a1c1cfa..d591f813c6e 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -106,8 +106,8 @@ export class EuiImage extends Component {
               ref={node => {
                 this.figure = node;
               }}
-              className="euiImageFullScreen">
-              <img src={url} className="euiImageFullScreen__img" alt={alt} />
+              className="euiImage-isFullScreen">
+              <img src={url} className="euiImage-isFullScreen__img" alt={alt} />
               {optionalCaption}
             </figure>
           </button>

From 32ee77789e420dbb45a1e5e6ea297d3a46405e59 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 9 Sep 2019 12:41:36 +0100
Subject: [PATCH 5/9] Focus and full screen hover styles

---
 src/components/image/_image.scss | 13 +++++++++++++
 src/components/image/image.js    |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index de89f838111..2c367121fd4 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -18,6 +18,10 @@
   }
 
   &.euiImage--allowFullScreen {
+    &:focus .euiImage__img {
+      @include euiFocusRing
+    }
+
     &:not(.euiImage--hasShadow):hover,
     &:not(.euiImage--hasShadow):focus {
       .euiImage__img {
@@ -89,17 +93,26 @@
 
 // The FullScreen image that optionally pops up on click.
 .euiImage-isFullScreen {
+  position: relative;
   max-height: 80vh;
   max-width: 80vw;
   animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
 
+  .euiImage-isFullScreen__icon {
+    position: absolute;
+    right: $euiSize;
+    top: $euiSize;
+  }
+
   .euiImage-isFullScreen__img {
     max-height: 80vh;
     max-width: 80vw;
     cursor: pointer;
+    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
 
   &:hover .euiImage-isFullScreen__img {
+    @include euiSlightShadowHover;
     cursor: pointer;
   }
 }
diff --git a/src/components/image/image.js b/src/components/image/image.js
index d591f813c6e..40f099dfb2d 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -109,6 +109,12 @@ export class EuiImage extends Component {
               className="euiImage-isFullScreen">
               <img src={url} className="euiImage-isFullScreen__img" alt={alt} />
               {optionalCaption}
+
+              <EuiIcon
+                type="cross"
+                color={fullScreenIconColorMap[fullScreenIconColor]}
+                className="euiImage-isFullScreen__icon"
+              />
             </figure>
           </button>
         </EuiFocusTrap>

From 0258da9efed7f0f1142ff40427a1654f6196a927 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 10 Sep 2019 14:27:28 +0100
Subject: [PATCH 6/9] Adding a11y improvements

---
 .../image/__snapshots__/image.test.js.snap    | 28 +++----
 src/components/image/_image.scss              | 82 +++++++++++++------
 src/components/image/image.js                 | 56 ++++++-------
 3 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/src/components/image/__snapshots__/image.test.js.snap b/src/components/image/__snapshots__/image.test.js.snap
index f6126c54257..9ee9be0a206 100644
--- a/src/components/image/__snapshots__/image.test.js.snap
+++ b/src/components/image/__snapshots__/image.test.js.snap
@@ -1,31 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiImage is rendered 1`] = `
-<figure
-  aria-label="aria-label"
+<div
   class="euiImage euiImage--large testClass1 testClass2"
-  data-test-subj="test subject string"
 >
   <img
     alt="alt"
     class="euiImage__img"
   />
-</figure>
+</div>
 `;
 
 exports[`EuiImage is rendered and allows full screen 1`] = `
-<button
+<div
   class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
-  type="button"
 >
-  <figure
-    aria-label="aria-label"
-    data-test-subj="test subject string"
+  <img
+    alt="alt"
+    class="euiImage__img"
+  />
+  <button
+    aria-label="Show alt image full screen"
+    class="euiImage__button"
+    type="button"
   >
-    <img
-      alt="alt"
-      class="euiImage__img"
-    />
     <svg
       class="euiIcon euiIcon--medium euiIcon--ghost euiIcon-isLoading euiImage__icon"
       focusable="false"
@@ -34,6 +32,6 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
       width="16"
       xmlns="http://www.w3.org/2000/svg"
     />
-  </figure>
-</button>
+  </button>
+</div>
 `;
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index be20d59812a..68eb665bdc4 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -11,6 +11,10 @@
   min-height: 1px; /* 1 */
   line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
 
+  .euiImage__img {
+    width: 100%;
+  }
+
   &.euiImage--hasShadow {
     .euiImage__img {
       @include euiBottomShadowMedium;
@@ -18,35 +22,47 @@
   }
 
   &.euiImage--allowFullScreen {
-    &:focus .euiImage__img {
-      @include euiFocusRing
+    .euiImage__button {
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .euiImage__icon {
+      // transition the shadow
+      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+    }
+
+    &:focus-within .euiImage__img {
+      border: 2px solid $euiFocusRingColor;
+    }
+
+    &:hover .euiImage__icon {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &:hover .euiImage__caption,
+    &:focus-within .euiImage__caption {
+      text-decoration: underline;
     }
 
     &:not(.euiImage--hasShadow):hover,
-    &:not(.euiImage--hasShadow):focus {
+    &:not(.euiImage--hasShadow):focus-within {
       .euiImage__img {
-        @include euiSlightShadowHover;
+        @include euiBottomShadowMedium;
       }
     }
 
     &.euiImage--hasShadow:hover,
-    &.euiImage--hasShadow:focus {
+    &.euiImage--hasShadow:focus-within {
       .euiImage__img {
-        @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
+        @include euiBottomShadow;
       }
     }
-
-    .euiImage__img {
-      cursor: pointer;
-
-      // transition the shadow
-      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-    }
-
-    .euiImage__icon {
-      visibility: visible;
-      opacity: 1;
-    }
   }
 
   // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
@@ -71,14 +87,10 @@
   }
 }
 
-// The image itself is full width within the container.
-.euiImage__img {
-  width: 100%;
-}
-
 .euiImage__caption {
   @include euiFontSizeS;
   text-align: center;
+  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
 }
 
 .euiImage__icon {
@@ -98,23 +110,41 @@
   max-width: 80vw;
   animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
 
+  .euiImage-isFullScreen____button {
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   .euiImage-isFullScreen__icon {
     position: absolute;
     right: $euiSize;
     top: $euiSize;
   }
 
-  .euiImage-isFullScreen__img {
+  .euiImage__img {
     max-height: 80vh;
     max-width: 80vw;
     cursor: pointer;
     transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
 
-  &:hover .euiImage-isFullScreen__img {
-    @include euiSlightShadowHover;
+  &:hover .euiImage__img {
+    @include euiBottomShadow;
     cursor: pointer;
   }
+
+  &:focus-within .euiImage__img {
+    border: 2px solid $euiFocusRingColor;
+  }
+
+  &:hover .euiImage__caption,
+  &:focus-within .euiImage__caption {
+    text-decoration: underline;
+  }
 }
 
 
diff --git a/src/components/image/image.js b/src/components/image/image.js
index 40f099dfb2d..ab098839983 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -83,8 +83,13 @@ export class EuiImage extends Component {
     let optionalCaption;
     if (caption) {
       optionalCaption = (
-        <figcaption className="euiImage__caption">{caption}</figcaption>
+        <figure role="figure" aria-label={caption} {...rest}>
+          <img src={url} className="euiImage__img" alt={alt} />
+          <figcaption className="euiImage__caption">{caption}</figcaption>
+        </figure>
       );
+    } else {
+      optionalCaption = <img src={url} className="euiImage__img" alt={alt} />;
     }
 
     const allowFullScreeIcon = (
@@ -98,50 +103,41 @@ export class EuiImage extends Component {
     const fullScreenDisplay = (
       <EuiOverlayMask onClick={this.closeFullScreen}>
         <EuiFocusTrap clickOutsideDisables={true}>
-          <button
-            type="button"
-            onClick={this.closeFullScreen}
-            onKeyDown={this.onKeyDown}>
-            <figure
-              ref={node => {
-                this.figure = node;
-              }}
-              className="euiImage-isFullScreen">
-              <img src={url} className="euiImage-isFullScreen__img" alt={alt} />
-              {optionalCaption}
-
+          <div className="euiImage-isFullScreen">
+            {optionalCaption}
+            <button
+              className="euiImage-isFullScreen__button"
+              type="button"
+              aria-label={`Show ${alt} image full screen`}
+              onClick={this.closeFullScreen}
+              onKeyDown={this.onKeyDown}>
               <EuiIcon
                 type="cross"
                 color={fullScreenIconColorMap[fullScreenIconColor]}
                 className="euiImage-isFullScreen__icon"
               />
-            </figure>
-          </button>
+            </button>
+          </div>
         </EuiFocusTrap>
       </EuiOverlayMask>
     );
 
     if (allowFullScreen) {
       return (
-        <button
-          type="button"
-          onClick={allowFullScreen ? this.openFullScreen : undefined}
-          className={classes}>
-          <figure {...rest}>
-            <img src={url} className="euiImage__img" alt={alt} />
-            {optionalCaption}
+        <div className={classes}>
+          {optionalCaption}
+          <button
+            type="button"
+            aria-label={`Show ${alt} image full screen`}
+            onClick={allowFullScreen ? this.openFullScreen : undefined}
+            className="euiImage__button">
             {allowFullScreeIcon}
             {isFullScreenActive && fullScreenDisplay}
-          </figure>
-        </button>
+          </button>
+        </div>
       );
     } else {
-      return (
-        <figure className={classes} {...rest}>
-          <img src={url} className="euiImage__img" alt={alt} />
-          {optionalCaption}
-        </figure>
-      );
+      return <div className={classes}>{optionalCaption}</div>;
     }
   }
 }

From ac4d833d379d17b5e3954877f82b033a6a3e9178 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 13 Sep 2019 17:34:13 +0200
Subject: [PATCH 7/9] Reverting to old sctructure without a11y

---
 .../image/__snapshots__/image.test.js.snap    | 28 ++++----
 src/components/image/_image.scss              | 66 +++++++------------
 src/components/image/image.js                 | 56 ++++++++--------
 3 files changed, 70 insertions(+), 80 deletions(-)

diff --git a/src/components/image/__snapshots__/image.test.js.snap b/src/components/image/__snapshots__/image.test.js.snap
index 9ee9be0a206..f6126c54257 100644
--- a/src/components/image/__snapshots__/image.test.js.snap
+++ b/src/components/image/__snapshots__/image.test.js.snap
@@ -1,29 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiImage is rendered 1`] = `
-<div
+<figure
+  aria-label="aria-label"
   class="euiImage euiImage--large testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <img
     alt="alt"
     class="euiImage__img"
   />
-</div>
+</figure>
 `;
 
 exports[`EuiImage is rendered and allows full screen 1`] = `
-<div
+<button
   class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
+  type="button"
 >
-  <img
-    alt="alt"
-    class="euiImage__img"
-  />
-  <button
-    aria-label="Show alt image full screen"
-    class="euiImage__button"
-    type="button"
+  <figure
+    aria-label="aria-label"
+    data-test-subj="test subject string"
   >
+    <img
+      alt="alt"
+      class="euiImage__img"
+    />
     <svg
       class="euiIcon euiIcon--medium euiIcon--ghost euiIcon-isLoading euiImage__icon"
       focusable="false"
@@ -32,6 +34,6 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
       width="16"
       xmlns="http://www.w3.org/2000/svg"
     />
-  </button>
-</div>
+  </figure>
+</button>
 `;
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 68eb665bdc4..698eac1ed04 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -11,10 +11,6 @@
   min-height: 1px; /* 1 */
   line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
 
-  .euiImage__img {
-    width: 100%;
-  }
-
   &.euiImage--hasShadow {
     .euiImage__img {
       @include euiBottomShadowMedium;
@@ -22,47 +18,40 @@
   }
 
   &.euiImage--allowFullScreen {
-    .euiImage__button {
-      position: absolute;
-      display: block;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .euiImage__icon {
-      // transition the shadow
-      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-    }
-
-    &:focus-within .euiImage__img {
-      border: 2px solid $euiFocusRingColor;
+    &:focus .euiImage__img {
+      outline: 2px solid $euiFocusRingColor;
     }
 
     &:hover .euiImage__icon {
       visibility: visible;
-      opacity: 1;
+      fill-opacity: 1;
     }
 
     &:hover .euiImage__caption,
-    &:focus-within .euiImage__caption {
+    &:focus .euiImage__caption {
       text-decoration: underline;
     }
 
     &:not(.euiImage--hasShadow):hover,
-    &:not(.euiImage--hasShadow):focus-within {
+    &:not(.euiImage--hasShadow):focus {
       .euiImage__img {
         @include euiBottomShadowMedium;
       }
     }
 
     &.euiImage--hasShadow:hover,
-    &.euiImage--hasShadow:focus-within {
+    &.euiImage--hasShadow:focus {
       .euiImage__img {
         @include euiBottomShadow;
       }
     }
+
+    .euiImage__img {
+      cursor: pointer;
+
+      // transition the shadow
+      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+    }
   }
 
   // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
@@ -87,19 +76,24 @@
   }
 }
 
+// The image itself is full width within the container.
+.euiImage__img {
+  width: 100%;
+}
+
 .euiImage__caption {
   @include euiFontSizeS;
   text-align: center;
-  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+  transition: all $euiAnimSpeedSlow $euiAnimSlightResistance;
 }
 
 .euiImage__icon {
   visibility: hidden;
-  opacity: 0;
+  fill-opacity: 0;
   position: absolute;
   right: $euiSize;
   top: $euiSize;
-  transition: opacity $euiAnimSpeedSlow $euiAnimSlightResistance ;
+  transition: fill-opacity $euiAnimSpeedSlow $euiAnimSlightResistance;
   cursor: pointer;
 }
 
@@ -110,35 +104,26 @@
   max-width: 80vw;
   animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
 
-  .euiImage-isFullScreen____button {
-    position: absolute;
-    display: block;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
   .euiImage-isFullScreen__icon {
     position: absolute;
     right: $euiSize;
     top: $euiSize;
   }
 
-  .euiImage__img {
+  .euiImage-isFullScreen__img {
     max-height: 80vh;
     max-width: 80vw;
     cursor: pointer;
     transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
 
-  &:hover .euiImage__img {
+  &:hover .euiImage-isFullScreen__img {
     @include euiBottomShadow;
     cursor: pointer;
   }
 
-  &:focus-within .euiImage__img {
-    border: 2px solid $euiFocusRingColor;
+  &:focus .euiImage-isFullScreen__img {
+    outline: 2px solid $euiFocusRingColor;
   }
 
   &:hover .euiImage__caption,
@@ -147,7 +132,6 @@
   }
 }
 
-
 @keyframes euiImageFullScreen {
   0% {
     opacity: 0;
diff --git a/src/components/image/image.js b/src/components/image/image.js
index ab098839983..94feff2678d 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -83,13 +83,8 @@ export class EuiImage extends Component {
     let optionalCaption;
     if (caption) {
       optionalCaption = (
-        <figure role="figure" aria-label={caption} {...rest}>
-          <img src={url} className="euiImage__img" alt={alt} />
-          <figcaption className="euiImage__caption">{caption}</figcaption>
-        </figure>
+        <figcaption className="euiImage__caption">{caption}</figcaption>
       );
-    } else {
-      optionalCaption = <img src={url} className="euiImage__img" alt={alt} />;
     }
 
     const allowFullScreeIcon = (
@@ -103,41 +98,50 @@ export class EuiImage extends Component {
     const fullScreenDisplay = (
       <EuiOverlayMask onClick={this.closeFullScreen}>
         <EuiFocusTrap clickOutsideDisables={true}>
-          <div className="euiImage-isFullScreen">
-            {optionalCaption}
-            <button
-              className="euiImage-isFullScreen__button"
-              type="button"
-              aria-label={`Show ${alt} image full screen`}
-              onClick={this.closeFullScreen}
-              onKeyDown={this.onKeyDown}>
+          <button
+            type="button"
+            className="euiImage-isFullScreen"
+            onClick={this.closeFullScreen}
+            onKeyDown={this.onKeyDown}>
+            <figure
+              ref={node => {
+                this.figure = node;
+              }}>
+              <img src={url} className="euiImage-isFullScreen__img" alt={alt} />
+              {optionalCaption}
+
               <EuiIcon
                 type="cross"
                 color={fullScreenIconColorMap[fullScreenIconColor]}
                 className="euiImage-isFullScreen__icon"
               />
-            </button>
-          </div>
+            </figure>
+          </button>
         </EuiFocusTrap>
       </EuiOverlayMask>
     );
 
     if (allowFullScreen) {
       return (
-        <div className={classes}>
-          {optionalCaption}
-          <button
-            type="button"
-            aria-label={`Show ${alt} image full screen`}
-            onClick={allowFullScreen ? this.openFullScreen : undefined}
-            className="euiImage__button">
+        <button
+          type="button"
+          onClick={allowFullScreen ? this.openFullScreen : undefined}
+          className={classes}>
+          <figure {...rest}>
+            <img src={url} className="euiImage__img" alt={alt} />
+            {optionalCaption}
             {allowFullScreeIcon}
             {isFullScreenActive && fullScreenDisplay}
-          </button>
-        </div>
+          </figure>
+        </button>
       );
     } else {
-      return <div className={classes}>{optionalCaption}</div>;
+      return (
+        <figure className={classes} {...rest}>
+          <img src={url} className="euiImage__img" alt={alt} />
+          {optionalCaption}
+        </figure>
+      );
     }
   }
 }

From 09fd6f9a88d4ceca411c94fced5c1bf3a0a47dea Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 13 Sep 2019 17:42:40 +0200
Subject: [PATCH 8/9] No caption transition

---
 src/components/image/_image.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 698eac1ed04..8a747e63141 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -84,7 +84,6 @@
 .euiImage__caption {
   @include euiFontSizeS;
   text-align: center;
-  transition: all $euiAnimSpeedSlow $euiAnimSlightResistance;
 }
 
 .euiImage__icon {

From 19fe143670fc208bea00f5544075e366eca85aec Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 13 Sep 2019 16:11:11 -0500
Subject: [PATCH 9/9] typos

---
 src/components/image/image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index f7fee46896c..659b1bc88f8 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -101,7 +101,7 @@ export class EuiImage extends Component<EuiImageProps, State> {
       );
     }
 
-    const allowFullScreeIcon = (
+    const allowFullScreenIcon = (
       <EuiIcon
         type="fullScreen"
         color={fullScreenIconColorMap[fullScreenIconColor]}
@@ -138,7 +138,7 @@ export class EuiImage extends Component<EuiImageProps, State> {
           <figure {...rest}>
             <img src={url} className="euiImage__img" alt={alt} />
             {optionalCaption}
-            {allowFullScreeIcon}
+            {allowFullScreenIcon}
             {isFullScreenActive && fullScreenDisplay}
           </figure>
         </button>