From 2a2207db00a8c55205f6dcd0d715e4051a5d0313 Mon Sep 17 00:00:00 2001
From: RoxanaAnamariaTurc
 <106086831+RoxanaAnamariaTurc@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:26:04 +0300
Subject: [PATCH] A11y: Added aria-label to ColorPicker component (#72666)

* A11y: Added aria-label to ColorPicker component

* Updated the code with changes suggested
---
 .../src/components/ColorPicker/ColorPicker.tsx        |  6 +++---
 .../src/components/ColorPicker/ColorSwatch.tsx        | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index f6bd884914a..1d67d5918cb 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -35,13 +35,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
     pickerTriggerRef = createRef<any>();
 
     render() {
-      const { theme, children, onChange } = this.props;
+      const { theme, children, onChange, color } = this.props;
       const styles = getStyles(theme);
       const popoverElement = React.createElement(popover, {
         ...{ ...this.props, children: null },
         onChange,
       });
-
       return (
         <PopoverController content={popoverElement} hideAfter={300}>
           {(showPopper, hidePopper, popperProps) => {
@@ -72,7 +71,8 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                     ref={this.pickerTriggerRef}
                     onClick={showPopper}
                     onMouseLeave={hidePopper}
-                    color={theme.visualization.getColorByName(this.props.color || '#000000')}
+                    color={theme.visualization.getColorByName(color || '#000000')}
+                    aria-label={color}
                   />
                 )}
               </>
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
index a00b2492a71..375715b683f 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
@@ -28,13 +28,18 @@ export const ColorSwatch = React.forwardRef<HTMLDivElement, Props>(
     const theme = useTheme2();
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = getStyles(theme, variant, color, isFocusVisible, isSelected);
-    const hasLabel = !!label;
-    const colorLabel = `${ariaLabel || label} color`;
+    const hasLabel = !label;
+    const colorLabel = ariaLabel || label;
 
     return (
       <div ref={ref} className={styles.wrapper} data-testid={selectors.components.ColorSwatch.name} {...otherProps}>
         {hasLabel && <span className={styles.label}>{label}</span>}
-        <button className={styles.swatch} {...focusProps} aria-label={colorLabel} type="button" />
+        <button
+          className={styles.swatch}
+          {...focusProps}
+          aria-label={hasLabel ? `${colorLabel} color` : 'Pick a color'}
+          type="button"
+        />
       </div>
     );
   }