From bef99dacb5e7e85c97d7504ffa8bb3cea8f6993f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 11 May 2020 20:22:18 +0100
Subject: [PATCH 01/11] Improving close button contrast

---
 CHANGELOG.md                                  |  1 +
 .../collapsible_nav.test.tsx.snap             | 14 ++++-----
 .../collapsible_nav/_collapsible_nav.scss     | 14 ++++++++-
 .../collapsible_nav/collapsible_nav.tsx       | 29 ++++++++++---------
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 182d278a509..862908e8d09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
+- Improved contrast for `EuiCollapsibleNav` close button ([#3387](https://github.com/elastic/eui/pull/3387))
 
 **Breaking changes**
 
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 6c316f413c5..dfc0c7d1498 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -53,7 +53,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton class"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton class"
           data-test-subj="test"
           type="button"
         >
@@ -113,7 +113,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
           type="button"
         >
           <span
@@ -174,7 +174,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
           type="button"
         >
           <span
@@ -229,7 +229,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
           type="button"
         >
           <span
@@ -282,7 +282,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
       id="id"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
         type="button"
       >
         <span
@@ -336,7 +336,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
           type="button"
         >
           <span
@@ -396,7 +396,7 @@ Array [
         id="id"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
           type="button"
         >
           <span
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 3dc5fa1c14e..c1a22682606 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -14,7 +14,19 @@
   position: absolute;
   right: 0;
   top: $euiSize;
-  margin-right: -25%;
+  margin-right: -27%;
+  padding: $euiSizeM 0;
+  line-height: 1;
+  border-radius: $euiBorderRadius;
+
+  &:focus {
+    @include euiFocusRing;
+  }
+
+  &,
+  &:focus {
+    background: $euiColorEmptyShade;
+  }
 }
 
 // The addition of this class is handled through JS
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index c2b59eca9c7..c8c659adcb3 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -34,6 +34,7 @@ import { EuiOverlayMask } from '../overlay_mask';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiI18n } from '../i18n';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 export type EuiCollapsibleNavProps = CommonProps &
   HTMLAttributes<HTMLElement> & {
@@ -160,19 +161,21 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
         });
 
   const closeButton = showCloseButton && (
-    <EuiButtonEmpty
-      onClick={collapse}
-      size="xs"
-      iconType="cross"
-      {...closeButtonProps}
-      className={classNames(
-        'euiCollapsibleNav__closeButton',
-        closeButtonProps && closeButtonProps.className
-      )}>
-      <span className="euiCollapsibleNav__closeButtonLabel">
-        <EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
-      </span>
-    </EuiButtonEmpty>
+    <EuiScreenReaderOnly showOnFocus>
+      <EuiButtonEmpty
+        onClick={collapse}
+        size="xs"
+        iconType="cross"
+        {...closeButtonProps}
+        className={classNames(
+          'euiCollapsibleNav__closeButton',
+          closeButtonProps && closeButtonProps.className
+        )}>
+        <span className="euiCollapsibleNav__closeButtonLabel">
+          <EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
+        </span>
+      </EuiButtonEmpty>
+    </EuiScreenReaderOnly>
   );
 
   const flyout = (

From f6d6e25fa43fd1d71eb1c8e801752751d07906e5 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 12 May 2020 00:26:36 +0100
Subject: [PATCH 02/11] Button empty small screens

---
 src/components/collapsible_nav/_collapsible_nav.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index c1a22682606..c6cc2cd3062 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -50,6 +50,10 @@
   // At tiny screens, reduce the close button to a simple `x`
   .euiCollapsibleNav__closeButton {
     margin-right: -15%;
+
+    .euiButtonEmpty__text {
+      margin-left: 0;
+    }
   }
 
   .euiCollapsibleNav__closeButtonLabel {

From 35936f524739527a8e6dbc068e94b042bf04340a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 12 May 2020 12:35:41 +0100
Subject: [PATCH 03/11] Changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 862908e8d09..f2b073df2ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 - Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
-- Improved contrast for `EuiCollapsibleNav` close button ([#3387](https://github.com/elastic/eui/pull/3387))
+- Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
 
 **Breaking changes**
 

From df2cc38f6fb68fcf6b759fe90c3396f26985352f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 12 May 2020 20:39:31 +0100
Subject: [PATCH 04/11] Addressing pr feedback

---
 .../__snapshots__/collapsible_nav.test.tsx.snap    | 14 +++++++-------
 .../collapsible_nav/_collapsible_nav.scss          |  7 ++++---
 src/components/collapsible_nav/collapsible_nav.tsx |  1 +
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index dfc0c7d1498..1d84fcdfe3b 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -66,7 +66,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
@@ -125,7 +125,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
@@ -186,7 +186,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
@@ -241,7 +241,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
@@ -294,7 +294,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
             data-euiicon-type="cross"
           />
           <span
-            class="euiButtonEmpty__text"
+            class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
           >
             <span
               class="euiCollapsibleNav__closeButtonLabel"
@@ -348,7 +348,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
@@ -408,7 +408,7 @@ Array [
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
                 class="euiCollapsibleNav__closeButtonLabel"
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index c6cc2cd3062..31fee65debf 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -25,6 +25,7 @@
 
   &,
   &:focus {
+    // Override default `EuiButtonEmpty` :focus background to ensure better contrast 
     background: $euiColorEmptyShade;
   }
 }
@@ -50,10 +51,10 @@
   // At tiny screens, reduce the close button to a simple `x`
   .euiCollapsibleNav__closeButton {
     margin-right: -15%;
+  }
 
-    .euiButtonEmpty__text {
-      margin-left: 0;
-    }
+  .euiCollapsibleNav__closeButtonText {
+    margin-left: 0;
   }
 
   .euiCollapsibleNav__closeButtonLabel {
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index c8c659adcb3..24af8de6139 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -165,6 +165,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       <EuiButtonEmpty
         onClick={collapse}
         size="xs"
+        textProps={{ className: 'euiCollapsibleNav__closeButtonText' }}
         iconType="cross"
         {...closeButtonProps}
         className={classNames(

From adb279fed695fe44bdbab43c23c7d62cd6d324b5 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 May 2020 13:40:41 +0100
Subject: [PATCH 05/11] Hiding text for xs screens

---
 src/components/collapsible_nav/_collapsible_nav.scss | 11 +++--------
 src/components/collapsible_nav/collapsible_nav.tsx   | 12 +++++++++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 31fee65debf..3e0e081a36a 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -51,15 +51,10 @@
   // At tiny screens, reduce the close button to a simple `x`
   .euiCollapsibleNav__closeButton {
     margin-right: -15%;
-  }
-
-  .euiCollapsibleNav__closeButtonText {
-    margin-left: 0;
-  }
 
-  .euiCollapsibleNav__closeButtonLabel {
-    // But be sure the text can still be read by a screenreader
-    @include euiScreenReaderOnly;
+    .euiCollapsibleNav__closeButtonText {
+      margin-left: 0;
+    }
   }
 }
 
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 24af8de6139..d9130b24387 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -35,6 +35,7 @@ import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiHideFor } from '../responsive/hide_for';
 
 export type EuiCollapsibleNavProps = CommonProps &
   HTMLAttributes<HTMLElement> & {
@@ -172,9 +173,14 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
           'euiCollapsibleNav__closeButton',
           closeButtonProps && closeButtonProps.className
         )}>
-        <span className="euiCollapsibleNav__closeButtonLabel">
-          <EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
-        </span>
+        <EuiHideFor sizes={['xs']}>
+          <span>
+            <EuiI18n
+              token="euiCollapsibleNav.closeButtonLabel"
+              default="close"
+            />
+          </span>
+        </EuiHideFor>
       </EuiButtonEmpty>
     </EuiScreenReaderOnly>
   );

From 9decabcb4509bf3df0dfe28cb2b5a584251af612 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 May 2020 13:46:09 +0100
Subject: [PATCH 06/11] Updating test

---
 .../__snapshots__/collapsible_nav.test.tsx.snap    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 1d84fcdfe3b..39ed9d73b84 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -69,7 +69,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>
@@ -128,7 +128,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>
@@ -189,7 +189,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>
@@ -244,7 +244,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>
@@ -297,7 +297,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
             class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
           >
             <span
-              class="euiCollapsibleNav__closeButtonLabel"
+              class="eui-hideFor--xs"
             >
               close
             </span>
@@ -351,7 +351,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>
@@ -411,7 +411,7 @@ Array [
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               <span
-                class="euiCollapsibleNav__closeButtonLabel"
+                class="eui-hideFor--xs"
               >
                 close
               </span>

From f4d8020f0687b9e4cc5f522eeeee9cda876bd9ee Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Wed, 13 May 2020 14:46:54 +0100
Subject: [PATCH 07/11] Update
 src/components/collapsible_nav/collapsible_nav.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src/components/collapsible_nav/collapsible_nav.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index d9130b24387..04912beb56e 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -173,14 +173,10 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
           'euiCollapsibleNav__closeButton',
           closeButtonProps && closeButtonProps.className
         )}>
-        <EuiHideFor sizes={['xs']}>
-          <span>
             <EuiI18n
               token="euiCollapsibleNav.closeButtonLabel"
               default="close"
             />
-          </span>
-        </EuiHideFor>
       </EuiButtonEmpty>
     </EuiScreenReaderOnly>
   );

From 480bc700ae06e8d8a753ed80b2d42224b35d8f7c Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Date: Wed, 13 May 2020 14:49:05 +0100
Subject: [PATCH 08/11] Update
 src/components/collapsible_nav/_collapsible_nav.scss

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src/components/collapsible_nav/_collapsible_nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 3e0e081a36a..b781dc6791f 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -53,6 +53,7 @@
     margin-right: -15%;
 
     .euiCollapsibleNav__closeButtonText {
+      @include euiScreenReaderOnly
       margin-left: 0;
     }
   }
@@ -70,4 +71,3 @@
     transform: translateX(0%);
   }
 }
-

From 1726be9b060e93045a63914cbf9228a227981c27 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 May 2020 15:09:26 +0100
Subject: [PATCH 09/11] Updating test

---
 .../collapsible_nav.test.tsx.snap             | 42 ++++---------------
 .../collapsible_nav/collapsible_nav.tsx       |  6 +--
 2 files changed, 8 insertions(+), 40 deletions(-)

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 39ed9d73b84..db665c0f2d4 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -68,11 +68,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
@@ -127,11 +123,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
@@ -188,11 +180,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
@@ -243,11 +231,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
@@ -296,11 +280,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
           <span
             class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
           >
-            <span
-              class="eui-hideFor--xs"
-            >
-              close
-            </span>
+            close
           </span>
         </span>
       </button>
@@ -350,11 +330,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
@@ -410,11 +386,7 @@ Array [
             <span
               class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
-              <span
-                class="eui-hideFor--xs"
-              >
-                close
-              </span>
+              close
             </span>
           </span>
         </button>
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 04912beb56e..265e5446946 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -35,7 +35,6 @@ import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiHideFor } from '../responsive/hide_for';
 
 export type EuiCollapsibleNavProps = CommonProps &
   HTMLAttributes<HTMLElement> & {
@@ -173,10 +172,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
           'euiCollapsibleNav__closeButton',
           closeButtonProps && closeButtonProps.className
         )}>
-            <EuiI18n
-              token="euiCollapsibleNav.closeButtonLabel"
-              default="close"
-            />
+        <EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
       </EuiButtonEmpty>
     </EuiScreenReaderOnly>
   );

From 23800ef2ab73ba135a3b8f53cac1f25e5544c793 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 May 2020 16:09:31 +0100
Subject: [PATCH 10/11] Removing unecessary css and adding missing comment

---
 src/components/collapsible_nav/_collapsible_nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index b781dc6791f..e87197b2350 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -53,8 +53,8 @@
     margin-right: -15%;
 
     .euiCollapsibleNav__closeButtonText {
+      // But be sure the text can still be read by a screenreader
       @include euiScreenReaderOnly
-      margin-left: 0;
     }
   }
 }

From 14c21e63d94bded54d3ef49c8c008d3fd6e82ebd Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 May 2020 16:15:20 +0100
Subject: [PATCH 11/11] Adding missing semicolon

---
 src/components/collapsible_nav/_collapsible_nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index e87197b2350..e85f3a54ce9 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -54,7 +54,7 @@
 
     .euiCollapsibleNav__closeButtonText {
       // But be sure the text can still be read by a screenreader
-      @include euiScreenReaderOnly
+      @include euiScreenReaderOnly;
     }
   }
 }