feat(ui-color-picker): add colorScreenReaderLabel prop to provide more color information

INSTUI-4273

Author: ToMESSKa

packages/ui-color-picker/src/ColorPreset/README.md

@@ -34,6 +34,11 @@ A component for picking a color from a list of colors. Supports adding new color
             colors={this.state.colors}
             selected={this.state.selected}
             onSelect={(selected) => this.setState({ selected })}
+            colorScreenReaderLabel={(hexCode, isSelected) => {
+              return `color with hex code ${hexCode}${
+                isSelected ? ' selected' : ''
+              }`
+            }}
           />
         </div>
       )
@@ -65,6 +70,11 @@ A component for picking a color from a list of colors. Supports adding new color
           colors={colors}
           selected={selected}
           onSelect={setSelected}
+          colorScreenReaderLabel={(hexCode, isSelected) => {
+            return `color with hex code ${hexCode}${
+              isSelected ? ' selected' : ''
+            }`
+          }}
         />
       </div>
     )
@@ -131,6 +141,11 @@ A component for picking a color from a list of colors. Supports adding new color
                 secondColorLabel: 'Foreground'
               }
             }}
+            colorScreenReaderLabel={(hexCode, isSelected) => {
+              return `color with hex code ${hexCode}${
+                isSelected ? ' selected' : ''
+              }`
+            }}
           />
         </div>
       )
@@ -189,6 +204,11 @@ A component for picking a color from a list of colors. Supports adding new color
               secondColorLabel: 'Foreground'
             }
           }}
+          colorScreenReaderLabel={(hexCode, isSelected) => {
+            return `color with hex code ${hexCode}${
+              isSelected ? ' selected' : ''
+            }`
+          }}
         />
       </div>
     )

packages/ui-color-picker/src/ColorPreset/__tests__/ColorPreset.test.tsx

@@ -75,6 +75,32 @@ const testColorMixerSettings: ColorPresetProps['colorMixerSettings'] = {
 }
 
 describe('<ColorPreset />', () => {
+  it('should provide aria-label through the colorScreenReaderLabel prop', async () => {
+    const mockScreenReaderLabel = vi.fn((hexCode) => `${hexCode}, hex code`)
+    const props = {
+      ...testValue,
+      colorScreenReaderLabel: mockScreenReaderLabel
+    }
+
+    render(<ColorPreset {...props} />)
+    const buttons = screen.getAllByRole('button')
+
+    buttons.forEach((button, index) => {
+      const expectedColor = testValue.colors[index]
+      expect(button).toHaveAttribute('aria-label', `${expectedColor}, hex code`)
+    })
+  })
+
+  it('should default to using the hex code as aria-label when colorScreenReaderLabel is not provided ', async () => {
+    render(<ColorPreset {...testValue} />)
+    const buttons = screen.getAllByRole('button')
+
+    buttons.forEach((button, index) => {
+      const expectedColor = testValue.colors[index]
+      expect(button).toHaveAttribute('aria-label', `${expectedColor}`)
+    })
+  })
+
   describe('elementRef prop', () => {
     it('should provide ref', async () => {
       const elementRef = vi.fn()

packages/ui-color-picker/src/ColorPreset/index.tsx

@@ -250,40 +250,48 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
       : this.renderIndicatorTooltip(indicatorBase, color)
   }
 
-  renderIndicatorBase = (color: string, selectOnClick?: boolean) => (
-    <View
-      disabled={this.props.disabled}
-      position="relative"
-      width="2.375rem"
-      height="2.375rem"
-      background="transparent"
-      margin="xx-small"
-      display="inline-block"
-      borderRadius="medium"
-      borderWidth="0"
-      padding="0"
-      cursor={this.props.disabled ? 'not-allowed' : 'auto'}
-      as="button"
-      {...(selectOnClick ? { onClick: () => this.props.onSelect(color) } : {})}
-      {...{
-        'aria-label': `${color}${
-          this.isSelectedColor(color) ? ' selected' : ''
-        }`
-      }}
-    >
-      <div>
-        <ColorIndicator color={color} shape="rectangle" role="presentation" />
-        {this.isSelectedColor(color) && (
-          <div css={this.props?.styles?.selectedIndicator}>
-            <IconCheckDarkSolid
-              themeOverride={{ sizeXSmall: '0.8rem' }}
-              size="x-small"
-            />
-          </div>
-        )}
-      </div>
-    </View>
-  )
+  renderIndicatorBase = (color: string, selectOnClick?: boolean) => {
+    const hexCode = color
+    const isSelected = this.isSelectedColor(color)
+
+    const screenReaderLabel =
+      typeof this.props.colorScreenReaderLabel === 'function'
+        ? this.props.colorScreenReaderLabel(hexCode, isSelected)
+        : hexCode
+
+    return (
+      <View
+        disabled={this.props.disabled}
+        position="relative"
+        width="2.375rem"
+        height="2.375rem"
+        background="transparent"
+        margin="xx-small"
+        display="inline-block"
+        borderRadius="medium"
+        borderWidth="0"
+        padding="0"
+        cursor={this.props.disabled ? 'not-allowed' : 'auto'}
+        as="button"
+        aria-label={screenReaderLabel}
+        {...(selectOnClick
+          ? { onClick: () => this.props.onSelect(color) }
+          : {})}
+      >
+        <div>
+          <ColorIndicator color={color} shape="rectangle" role="presentation" />
+          {this.isSelectedColor(color) && (
+            <div css={this.props?.styles?.selectedIndicator}>
+              <IconCheckDarkSolid
+                themeOverride={{ sizeXSmall: '0.8rem' }}
+                size="x-small"
+              />
+            </div>
+          )}
+        </div>
+      </View>
+    )
+  }
 
   renderIndicatorTooltip = (child: React.ReactElement, color: string) => {
     return (

packages/ui-color-picker/src/ColorPreset/props.ts

@@ -103,6 +103,18 @@ type ColorPresetOwnProps = {
    * The currently selected HEX string
    */
   selected?: string
+  /**
+   * A function for formatting the text provided to screen readers about the color.
+   *
+   * @param {string} hexCode - The hexadecimal color code (e.g., "#FFFFFF") of the current color option. Provided by the component - treat as read-only.
+   *
+   * @param {boolean} isSelected - Indicates whether this color is currently selected. Provided by the component - treat as read-only.
+   *
+   * Sets the aria-label attribute of the color.
+   *
+   * If not set, aria-label defaults to the hex code of the color.
+   */
+  colorScreenReaderLabel?: (hexCode: string, isSelected: boolean) => string
 }
 
 type ColorPresetState = {
@@ -138,6 +150,7 @@ const propTypes: PropValidators<PropKeys> = {
   elementRef: PropTypes.func,
   label: PropTypes.string,
   popoverScreenReaderLabel: PropTypes.string,
+  colorScreenReaderLabel: PropTypes.func,
   colorMixerSettings: PropTypes.shape({
     addNewPresetButtonScreenReaderLabel: PropTypes.string.isRequired,
     selectColorLabel: PropTypes.string.isRequired,
@@ -181,7 +194,8 @@ const allowedProps: AllowedPropKeys = [
   'colorMixerSettings',
   'onSelect',
   'popoverScreenReaderLabel',
-  'selected'
+  'selected',
+  'colorScreenReaderLabel'
 ]
 
 export type {