From b90dbbb5b781caacb1a561f6d59440b08002aef1 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Tue, 26 Nov 2019 10:01:36 -0500
Subject: [PATCH] Fixed EuiBetaBadge a11y (#2559)

* Added `tabIndex={0}` to EuiBetaBadge span if wrapped in tooltip

Fix for a11y by making the span focusable and adds focus ring for visual indicator

* Move beta badge dom position to after content / before footer
---
 CHANGELOG.md                                     | 1 +
 src/components/badge/beta_badge/_beta_badge.scss | 5 ++++-
 src/components/badge/beta_badge/beta_badge.tsx   | 2 +-
 src/components/card/card.tsx                     | 4 +++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31c8a0bd15d..1a63f0a6b07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Fixed `EuiDataGrid` schema detection on already defined column schemas ([#2550](https://github.com/elastic/eui/pull/2550))
 - Added `euiTextBreakWord()` to `EuiToast` header ([#2549](https://github.com/elastic/eui/pull/2549))
 - Fixed `.eui-textBreakAll` on Firefox ([#2549](https://github.com/elastic/eui/pull/2549))
+- Fixed `EuiBetaBadge` accessibility with `tab-index=0` ([#2559](https://github.com/elastic/eui/pull/2559))
 
 ## [`16.0.1`](https://github.com/elastic/eui/tree/v16.0.1)
 
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index 5b9b00337d8..e38fd0349f9 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -12,8 +12,11 @@
   line-height: $euiSizeL;
   text-align: center;
   white-space: nowrap;
-
   cursor: default;
+
+  &:focus {
+    @include euiFocusRing;
+  }
 }
 
 // When it's just an icon, make it a circle
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index a84ce337a45..b31d4462b5a 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -93,7 +93,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         position={tooltipPosition}
         content={tooltipContent}
         title={title || label}>
-        <span className={classes} {...rest}>
+        <span tabIndex={0} className={classes} {...rest}>
           {icon || label}
         </span>
       </EuiToolTip>
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index cb9c4b1b41c..515d40a2c6b 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -294,7 +294,6 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   return (
     <div className={classes} onClick={outerOnClick} {...rest}>
-      {optionalBetaBadge}
       {optionalCardTop}
 
       <div className="euiCard__content">
@@ -312,6 +311,9 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
         {children}
       </div>
 
+      {/* Beta badge should always be after the title/description but before any footer buttons */}
+      {optionalBetaBadge}
+
       {layout === 'vertical' && footer && (
         <div className="euiCard__footer">{footer}</div>
       )}