fix(EuiColorPicker): change open/close labels to be used via

Author: mgadewoll

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

@@ -10,7 +10,8 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 
-import { euiPaletteColorBlind } from '../..//services';
+import { euiPaletteColorBlind } from '../../services';
+import { EuiFormRow } from '../form';
 import { EuiColorPicker, EuiColorPickerProps } from './color_picker';
 
 const meta: Meta<EuiColorPickerProps> = {
@@ -45,6 +46,21 @@ export const Playground: Story = {
   render: (args) => <StatefulColorPicker {...args} />,
 };
 
+export const InFormRow: Story = {
+  name: 'In FormRow',
+  parameters: {
+    loki: {
+      skip: true,
+    },
+  },
+  ...Playground,
+  render: (args) => (
+    <EuiFormRow label="Pick a color">
+      <StatefulColorPicker {...args} />
+    </EuiFormRow>
+  ),
+};
+
 export const InlineWithAllElements: Story = {
   tags: ['vrt-only'],
   args: {

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

@@ -23,6 +23,7 @@ import {
   useEuiMemoizedStyles,
   keys,
   useEuiPaletteColorBlind,
+  useGeneratedHtmlId,
 } from '../../services';
 import { CommonProps } from '../common';
 import {
@@ -242,6 +243,11 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     ]
   );
 
+  const ariaDescribedById = useGeneratedHtmlId({
+    prefix: 'colorPicker',
+    suffix: 'ariaDescribedby',
+  });
+
   const defaultSwatches = useEuiPaletteColorBlind();
   const swatches = _swatches ?? defaultSwatches;
 
@@ -562,6 +568,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     </>
   );
 
+  console.log(ariaDescribedById);
+
   let buttonOrInput;
   if (button) {
     buttonOrInput = cloneElement(button, {
@@ -621,9 +629,14 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
           fullWidth={fullWidth}
           autoComplete="off"
           data-test-subj={testSubjAnchor}
-          aria-label={isColorSelectorShown ? openLabel : closeLabel}
+          aria-describedby={ariaDescribedById}
           controlOnly // Don't need two EuiFormControlwrappers
         />
+        <EuiScreenReaderOnly>
+          <span id={ariaDescribedById}>
+            {isColorSelectorShown ? openLabel : closeLabel}
+          </span>
+        </EuiScreenReaderOnly>
       </EuiFormControlLayout>
     );
   }