[EuiBadge] Increase color contrast of selected text (+ bonus cleanup)

packages/eui/changelogs/upcoming/7752.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Improved `EuiBadge`'s ability to tell when text within the badge is selected/highlighted and selection color contrast

packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiBadge is disabled 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBadge testClass1 testClass2 emotion-euiBadge-default-disabled-euiTestCss"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge-disabled-euiTestCss"
   data-test-subj="test subject string"
   title="Content"
 >
@@ -178,7 +178,6 @@ exports[`EuiBadge props color accent is rendered 1`] = `
 exports[`EuiBadge props color accepts hex 1`] = `
 <span
   class="euiBadge emotion-euiBadge"
-  style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"
   title="Content"
 >
   <span
@@ -196,7 +195,6 @@ exports[`EuiBadge props color accepts hex 1`] = `
 exports[`EuiBadge props color accepts rgba 1`] = `
 <span
   class="euiBadge emotion-euiBadge"
-  style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"
   title="Content"
 >
   <span

packages/eui/src/components/badge/badge.stories.tsx

@@ -8,7 +8,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { EuiBadge, EuiBadgeProps } from './badge';
+import { EuiBadge, EuiBadgeProps, COLORS } from './badge';
 
 const meta: Meta<EuiBadgeProps> = {
   title: 'Display/EuiBadge/EuiBadge',
@@ -20,6 +20,7 @@ const meta: Meta<EuiBadgeProps> = {
     // Component defaults
     iconSide: 'left',
     isDisabled: false,
+    color: 'default',
   },
 };
 
@@ -30,4 +31,22 @@ export const Playground: Story = {
   args: {
     children: 'Badge text',
   },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: COLORS,
+    },
+  },
+};
+
+export const CustomColors: Story = {
+  parameters: {
+    controls: {
+      include: ['color', 'children', 'isDisabled'],
+    },
+  },
+  args: {
+    children: 'Badge text',
+    color: '#0000FF',
+  },
 };

packages/eui/src/components/badge/badge.styles.ts

@@ -22,6 +22,12 @@ import { euiBadgeColors } from './color_utils';
 export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const badgeColors = euiBadgeColors(euiThemeContext);
+  const setBadgeColorVars = (
+    colors: ReturnType<typeof euiBadgeColors>['primary']
+  ) => `
+    --euiBadgeTextColor: ${colors.color};
+    --euiBadgeBackgroundColor: ${colors.backgroundColor};
+  `;
 
   return {
     euiBadge: css`
@@ -39,7 +45,6 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       white-space: nowrap;
       text-decoration: none;
       cursor: default;
-      background-color: transparent;
       border: ${euiTheme.border.width.thin} solid transparent;
       border-radius: ${mathWithUnits(
         euiTheme.border.radius.medium,
@@ -49,6 +54,25 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
          So, make the text left aligned to ensure all badges line up the same */
       ${logicalTextAlignCSS('left')}
 
+      /* Colors - inherit from CSS variables, which can be set via inline style */
+      color: var(--euiBadgeTextColor, ${badgeColors.default.color});
+      background-color: var(
+        --euiBadgeBackgroundColor,
+        ${badgeColors.default.backgroundColor}
+      );
+
+      /* Ensure that selected text is always visible by inverting badge and text colors */
+      *::selection {
+        color: var(
+          --euiBadgeBackgroundColor,
+          ${badgeColors.default.backgroundColor}
+        );
+        background-color: var(
+          --euiBadgeTextColor,
+          ${badgeColors.default.color}
+        );
+      }
+
       &:focus-within {
         ${euiFocusRing(euiThemeContext)}
       }
@@ -75,25 +99,23 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     `,
 
     // Colors
-    default: css(badgeColors.default),
+    default: css(setBadgeColorVars(badgeColors.default)),
     hollow: css`
-      color: ${badgeColors.hollow.color};
-      background-color: ${badgeColors.hollow.backgroundColor};
+      ${setBadgeColorVars(badgeColors.hollow)}
       border-color: ${badgeColors.hollow.borderColor};
     `,
-    primary: css(badgeColors.primary),
-    accent: css(badgeColors.accent),
-    warning: css(badgeColors.warning),
-    danger: css(badgeColors.danger),
-    success: css(badgeColors.success),
+    primary: css(setBadgeColorVars(badgeColors.primary)),
+    accent: css(setBadgeColorVars(badgeColors.accent)),
+    warning: css(setBadgeColorVars(badgeColors.warning)),
+    danger: css(setBadgeColorVars(badgeColors.danger)),
+    success: css(setBadgeColorVars(badgeColors.success)),
     disabled: css`
-      /* stylelint-disable declaration-no-important */
+      ${setBadgeColorVars(badgeColors.disabled)}
 
-      /* Using !important to override inline styles */
-      color: ${badgeColors.disabled.color} !important;
-      background-color: ${badgeColors.disabled.backgroundColor} !important;
-
-      /* stylelint-enable declaration-no-important */
+      /* Override selection color, since disabled badges have rgba backgrounds with opacity */
+      *::selection {
+        color: ${euiTheme.colors.emptyShade};
+      }
     `,
 
     // Content wrapper

packages/eui/src/components/badge/badge.test.tsx

@@ -154,12 +154,16 @@ describe('EuiBadge', () => {
         );
 
         expect(container.firstChild).toMatchSnapshot();
+        // NOTE: jsdom currently does not support CSS variables (@see https://github.com/testing-library/jest-dom/issues/322)
+        // We're relying on visual regression tests here instead
       });
 
       it('accepts hex', () => {
         const { container } = render(<EuiBadge color="#333">Content</EuiBadge>);
 
         expect(container.firstChild).toMatchSnapshot();
+        // NOTE: jsdom currently does not support CSS variables (@see https://github.com/testing-library/jest-dom/issues/322)
+        // We're relying on visual regression tests here instead
       });
     });
 

packages/eui/src/components/badge/badge.tsx

@@ -132,6 +132,8 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
 
   const euiTheme = useEuiTheme();
   const customColorStyles = useMemo(() => {
+    // Disabled badges should not have custom colors
+    if (isDisabled) return style;
     // Named colors set their styles via Emotion CSS and not inline styles
     if (isNamedColor) return style;
 
@@ -151,8 +153,8 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
       }
 
       return {
-        backgroundColor: color,
-        color: textColor,
+        '--euiBadgeBackgroundColor': color,
+        '--euiBadgeTextColor': textColor,
         ...style,
       };
     } catch (err) {
@@ -164,14 +166,17 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         );
       }
     }
-  }, [color, isNamedColor, style, euiTheme]);
+  }, [color, isNamedColor, isDisabled, style, euiTheme]);
 
   const styles = useEuiMemoizedStyles(euiBadgeStyles);
   const cssStyles = [
     styles.euiBadge,
-    isNamedColor && styles[color as BadgeColor],
-    (onClick || href) && !iconOnClick && styles.clickable,
-    isDisabled && styles.disabled,
+    ...(isDisabled
+      ? [styles.disabled]
+      : [
+          isNamedColor && styles[color as BadgeColor],
+          !iconOnClick && (onClick || href) && styles.clickable,
+        ]),
   ];
   const textCssStyles = [
     styles.text.euiBadge__text,