Fix unit tests

sumup-oss · Sep 9, 2024 · ae78968 · ae78968
1 parent 0b12295
commit ae78968
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git 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(
+      <ColorInput {...baseProps} inputClassName={className} />,
+    );
+    const input = container.querySelector('input[type="text"]');
+    expect(input?.className).toContain(className);
+  });
+
   it('should forward a ref', () => {
     const ref = createRef<InputElement>();
     const { container } = render(<ColorInput {...baseProps} ref={ref} />);
@@ -38,15 +47,6 @@ describe('ColorInput', () => {
   });
 
   describe('Labeling', () => {
-    const HEX_SYMBOL = '#';
-
-    it('should have the hex symbol as part of its accessible description', () => {
-      render(<ColorInput {...baseProps} />);
-      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
@@ -82,6 +82,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
       validationHint,
       readOnly,
       required,
+      inputClassName,
       style,
       value,
       ...props
@@ -120,12 +121,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
     };
 
     return (
-      <FieldSet
-        className={className}
-        style={style}
-        disabled={disabled}
-        aria-orientation="horizontal"
-      >
+      <FieldSet className={className} style={style} disabled={disabled}>
         <FieldLegend id={labelId}>
           <FieldLabelText
             label={label}
@@ -150,13 +146,15 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
           <span className={classes.symbol}>#</span>
           <input
             id={id}
+            type="text"
             aria-labelledby={labelId}
             aria-describedby={descriptionIds}
             className={clsx(
               inputClasses.base,
               !disabled && hasWarning && inputClasses.warning,
               hasSuffix && inputClasses['has-suffix'],
               classes.input,
+              inputClassName,
             )}
             aria-invalid={invalid && 'true'}
             required={required}