diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
index f88bf95533..2ba0e907fd 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
@@ -24,6 +24,15 @@ import { ColorInput } from './ColorInput.js';
describe('ColorInput', () => {
const baseProps = { label: 'Car color', pickerLabel: 'Pick car color' };
+ it('should merge a custom class name with the default ones', () => {
+ const className = 'foo';
+ const { container } = render(
+ ,
+ );
+ const input = container.querySelector('input[type="text"]');
+ expect(input?.className).toContain(className);
+ });
+
it('should forward a ref', () => {
const ref = createRef();
const { container } = render();
@@ -38,15 +47,6 @@ describe('ColorInput', () => {
});
describe('Labeling', () => {
- const HEX_SYMBOL = '#';
-
- it('should have the hex symbol as part of its accessible description', () => {
- render();
- expect(screen.getByRole('textbox')).toHaveAccessibleDescription(
- HEX_SYMBOL,
- );
- });
-
it('should accept a custom description via aria-describedby', () => {
const customDescription = 'Custom description';
const customDescriptionId = 'customDescriptionId';
@@ -57,7 +57,7 @@ describe('ColorInput', () => {
>,
);
expect(screen.getByRole('textbox')).toHaveAccessibleDescription(
- `${HEX_SYMBOL} ${customDescription}`,
+ customDescription,
);
});
});
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
index aca103d08b..0947bc68b4 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -82,6 +82,7 @@ export const ColorInput = forwardRef(
validationHint,
readOnly,
required,
+ inputClassName,
style,
value,
...props
@@ -120,12 +121,7 @@ export const ColorInput = forwardRef(
};
return (
-