fix: make clickable color blocks keyboard accessible

src/components/ColorBlock.tsx

@@ -10,6 +10,7 @@ export type ColorBlockProps = {
   innerClassName?: string;
   /** Internal usage. Only used in antd ColorPicker semantic structure only */
   innerStyle?: React.CSSProperties;
+  'aria-label'?: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
@@ -20,14 +21,31 @@ const ColorBlock: React.FC<ColorBlockProps> = ({
   style,
   innerClassName,
   innerStyle,
+  'aria-label': ariaLabel,
   onClick,
 }) => {
   const colorBlockCls = `${prefixCls}-color-block`;
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined =
+    onClick
+      ? event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (!event.repeat) {
+              event.currentTarget.click();
+            }
+          }
+        }
+      : undefined;
+
   return (
     <div
+      aria-label={onClick ? (ariaLabel ?? color) : undefined}
       className={clsx(colorBlockCls, className)}
       style={style}
       onClick={onClick}
+      onKeyDown={onKeyDown}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
     >
       <div
         className={clsx(`${colorBlockCls}-inner`, innerClassName)}

tests/components.test.tsx

@@ -67,8 +67,39 @@ describe('ColorPicker.Components', () => {
       />,
     );
 
+    const colorBlock = container.querySelector('.test-color-block');
     const innerDiv = container.querySelector('.test-color-block-inner');
+    expect(colorBlock).not.toHaveAttribute('role');
+    expect(colorBlock).not.toHaveAttribute('tabindex');
+    expect(colorBlock).not.toHaveAttribute('aria-label');
     expect(innerDiv).toHaveClass('my-inner-class');
     expect(innerDiv).toHaveStyle({ color: '#903' });
   });
+
+  it('makes clickable ColorBlock keyboard accessible', () => {
+    const onClick = vi.fn();
+    const { getByRole } = render(
+      <ColorBlock
+        prefixCls="test"
+        color="#ff0000"
+        aria-label="Brand red"
+        onClick={onClick}
+      />,
+    );
+    const button = getByRole('button', { name: 'Brand red' });
+
+    fireEvent.keyDown(button, { key: 'Enter' });
+    fireEvent.keyDown(button, { key: ' ' });
+    fireEvent.keyDown(button, { key: 'Enter', repeat: true });
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('uses the color value as the default name for clickable ColorBlock', () => {
+    const { getByRole } = render(
+      <ColorBlock prefixCls="test" color="#ff0000" onClick={() => {}} />,
+    );
+
+    expect(getByRole('button', { name: '#ff0000' })).toBeInTheDocument();
+  });
 });