[EuiColorPicker] Add color label tooltips

packages/eui/changelogs/upcoming/8512.md

@@ -0,0 +1,6 @@
+- Added `showToolTip` prop on `EuiColorPickerSwatch`
+
+**Accessibility**
+
+- Improved the accessibility of `EuiColorPicker` by adding color label tooltips on hover and focus for color swatches
+

packages/eui/src-docs/src/views/theme/borders/_border_js.tsx

@@ -65,6 +65,7 @@ export const TypesValuesJS = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={euiTheme.colors.emptyShade}
             disabled
             css={[
@@ -130,7 +131,13 @@ export const ColorValuesJS = () => {
             value: euiTheme.border[type],
           };
         })}
-        render={(item) => <EuiColorPickerSwatch color={item.value} disabled />}
+        render={(item) => (
+          <EuiColorPickerSwatch
+            showToolTip={false}
+            color={item.value}
+            disabled
+          />
+        )}
       />
     </>
   );
@@ -193,6 +200,7 @@ export const WidthValuesJS = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={euiTheme.colors.emptyShade}
             disabled
             css={css`
@@ -252,6 +260,7 @@ export const RadiusValuesJS = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={euiTheme.colors.emptyShade}
             disabled
             css={css`

packages/eui/src-docs/src/views/theme/borders/_border_sass.tsx

@@ -45,6 +45,7 @@ export const TypesValuesSass = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={'transparent'}
             disabled
             className={`guideSass__border--${item.id}`}
@@ -90,7 +91,9 @@ export const ColorValuesSass = () => {
             value: color,
           };
         })}
-        render={() => <EuiColorPickerSwatch color={color} disabled />}
+        render={() => (
+          <EuiColorPickerSwatch showToolTip={false} color={color} disabled />
+        )}
       />
     </>
   );
@@ -138,6 +141,7 @@ export const WidthValuesSass = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={'transparent'}
             disabled
             className={`guideSass__border--${item.id}`}
@@ -189,6 +193,7 @@ export const RadiusValuesSass = () => {
         })}
         render={(item) => (
           <EuiColorPickerSwatch
+            showToolTip={false}
             color={'transparent'}
             disabled
             className={`guideSass__border--${item.id}`}

packages/eui/src-docs/src/views/theme/customizing/_border.js

@@ -77,7 +77,12 @@ export default ({ onThemeUpdate }) => {
             name={prop}
             value={borderClone[prop]}
             onUpdate={(value) => updateBorder(prop, value)}
-            example={<EuiColorPickerSwatch color={borderClone[prop]} />}
+            example={
+              <EuiColorPickerSwatch
+                showToolTip={false}
+                color={borderClone[prop]}
+              />
+            }
           />
         ))}
 

packages/eui/src-docs/src/views/theme/customizing/_values.tsx

@@ -112,7 +112,7 @@ export const ThemeValue: FunctionComponent<ThemeValue> = ({
       <span
         css={css`
           font-weight: ${euiTheme.font.weight.light};
-          color: ${euiTheme.colors.subduedText};
+          color: ${euiTheme.colors.textSubdued};
         `}
       >
         : {humanizeType(type.custom.origin.type)}

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

@@ -363,84 +363,124 @@ exports[`EuiColorPicker inline 1`] = `
     class="euiColorPicker__swatches emotion-euiColorPicker__swatches"
   >
     <li>
-      <button
-        aria-label="Select #16C5C0 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(22, 197, 192);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #16C5C0 as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(22, 197, 192);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #A6EDEA as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(166, 237, 234);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #A6EDEA as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(166, 237, 234);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #61A2FF as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(97, 162, 255);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #61A2FF as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(97, 162, 255);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #BFDBFF as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(191, 219, 255);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #BFDBFF as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(191, 219, 255);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #EE72A6 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(238, 114, 166);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #EE72A6 as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(238, 114, 166);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #FFC7DB as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(255, 199, 219);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #FFC7DB as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(255, 199, 219);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #F6726A as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(246, 114, 106);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #F6726A as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(246, 114, 106);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #FFC9C2 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(255, 201, 194);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #FFC9C2 as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(255, 201, 194);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #EAAE01 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(234, 174, 1);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #EAAE01 as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(234, 174, 1);"
+          type="button"
+        />
+      </span>
     </li>
     <li>
-      <button
-        aria-label="Select #FCD883 as the color"
-        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
-        style="background: rgb(252, 216, 131);"
-        type="button"
-      />
+      <span
+        class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+      >
+        <button
+          aria-label="Select #FCD883 as the color"
+          class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+          style="background: rgb(252, 216, 131);"
+          type="button"
+        />
+      </span>
     </li>
   </ul>
 </div>

packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap

@@ -1,11 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiColorPickerSwatch is rendered 1`] = `
-<button
-  aria-label="aria-label"
-  class="euiColorPickerSwatch testClass1 testClass2 emotion-euiColorPickerSwatch-euiTestCss"
-  data-test-subj="test subject string"
-  style="background: transparent;"
-  type="button"
-/>
+<span
+  class="euiToolTipAnchor  emotion-euiToolTipAnchor-inlineBlock-tooltip"
+>
+  <button
+    aria-label="aria-label"
+    class="euiColorPickerSwatch testClass1 testClass2 emotion-euiColorPickerSwatch-euiTestCss"
+    data-test-subj="test subject string"
+    style="background: transparent;"
+    type="button"
+  />
+</span>
 `;

packages/eui/src/components/color_picker/color_picker_swatch.stories.tsx

@@ -8,6 +8,8 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS, lokiPlayDecorator } from '../../../.storybook/loki';
+import { sleep } from '../../test';
 import {
   EuiColorPickerSwatch,
   EuiColorPickerSwatchProps,
@@ -16,9 +18,35 @@ import {
 const meta: Meta<EuiColorPickerSwatchProps> = {
   title: 'Forms/EuiColorPicker/EuiColorPickerSwatch',
   component: EuiColorPickerSwatch,
+  args: {
+    showToolTip: true,
+    color: '#dddddd',
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiColorPickerSwatchProps>;
 
 export const Playground: Story = {};
+
+export const ColorLabelTooltip: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    controls: {
+      exclude: ['autoFocus'],
+    },
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  args: {
+    autoFocus: true,
+    toolTipProps: {
+      position: 'right',
+    },
+  },
+  play: lokiPlayDecorator(async () => {
+    // Reduce VRT flakiness/screenshots before tooltip is fully visible
+    await sleep(300);
+  }),
+};

packages/eui/src/components/color_picker/color_picker_swatch.styles.ts

@@ -52,5 +52,8 @@ export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
         ${euiOutline(euiThemeContext, 'center')}
       }
     `,
+    tooltip: css`
+      display: inline-flex;
+    `,
   };
 };