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
elastic · Nov 26, 2019 · b90dbbb · b90dbbb
1 parent cc1da42
commit b90dbbb
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
       )}