Improve accessibility and styling

sumup-oss · Sep 9, 2024 · c0a0401 · c0a0401
1 parent a588968
commit c0a0401
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
@@ -4,21 +4,26 @@
 }
 
 .picker {
+  position: relative;
   width: var(--cui-spacings-exa);
   height: var(--cui-spacings-exa);
+  margin-right: 1px;
+  cursor: pointer;
   border-top-left-radius: var(--cui-border-radius-byte);
   border-bottom-left-radius: var(--cui-border-radius-byte);
   box-shadow: 0 0 0 1px var(--cui-border-normal);
 }
 
 .picker:hover {
+  z-index: var(--cui-z-index-absolute);
   background: var(--cui-bg-normal-hovered);
   box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
 }
 
 .picker:focus-within {
+  z-index: var(--cui-z-index-absolute);
   background: var(--cui-bg-normal-pressed);
-  box-shadow: 0 0 0 1px var(--cui-border-normal-pressed);
+  box-shadow: 0 0 0 2px var(--cui-border-focus);
 }
 
 .color-input {
@@ -27,6 +32,7 @@
   padding: 0;
   margin: var(--cui-spacings-kilo);
   appearance: none;
+  cursor: pointer;
   border: none;
   border-radius: 6px;
   outline: none;
@@ -46,18 +52,11 @@
   border: none;
 }
 
-.picker:hover .color-input {
-  box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
-}
-
-.picker:focus-within .color-input {
-  box-shadow: 0 0 0 1px var(--cui-border-normal-pressed);
-}
-
 .symbol {
   position: absolute;
   top: 0;
   left: var(--cui-spacings-exa);
+  z-index: calc(var(--cui-z-index-absolute) + 1);
   display: grid;
   place-items: center center;
   width: var(--cui-spacings-giga);
@@ -67,16 +66,18 @@
 }
 
 .input {
+  position: relative;
   padding-left: var(--cui-spacings-giga);
   font-family: var(--cui-font-stack-mono);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.input::placeholder {
-  font-family: var(--cui-font-stack-mono);
+.input:hover,
+.input:focus {
+  z-index: var(--cui-z-index-absolute);
 }
 
-.colorpick {
-  display: inline-block;
+.input::placeholder {
+  font-family: var(--cui-font-stack-mono);
 }
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -26,7 +26,12 @@ import {
 import { classes as inputClasses } from '../Input/index.js';
 import type { InputElement, InputProps } from '../Input/index.js';
 import { clsx } from '../../styles/clsx.js';
-import { FieldLabel, FieldLabelText, FieldWrapper } from '../Field/index.js';
+import {
+  FieldLabelText,
+  FieldLegend,
+  FieldSet,
+  FieldValidationHint,
+} from '../Field/index.js';
 import { applyMultipleRefs } from '../../util/refs.js';
 
 import classes from './ColorInput.module.css';
@@ -56,11 +61,6 @@ export interface ColorInputProps
    * The default value of the input element.
    */
   defaultValue?: string;
-  /*
-   * Picker label describes the color picker which serves as an alternative
-   * to the hex color input.
-   */
-  pickerLabel: string;
 }
 
 export const ColorInput = forwardRef<InputElement, ColorInputProps>(
@@ -72,13 +72,14 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
       defaultValue,
       disabled,
       hasWarning,
+      showValid,
       hideLabel,
       id,
       invalid,
       label,
       onChange,
       optionalLabel,
-      pickerLabel,
+      validationHint,
       readOnly,
       required,
       style,
@@ -92,12 +93,11 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
     );
     const colorPickerRef = useRef<InputElement>(null);
 
+    const labelId = useId();
     const pickerId = useId();
-    const hexSymbolId = useId();
-    const inputFallbackId = useId();
-    const inputId = id || inputFallbackId;
+    const validationHintId = useId();
 
-    const descriptionIds = clsx(hexSymbolId, descriptionId);
+    const descriptionIds = clsx(validationHintId, descriptionId);
 
     const suffix = RenderSuffix && (
       <RenderSuffix className={inputClasses.suffix} />
@@ -120,32 +120,37 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
     };
 
     return (
-      <FieldWrapper className={className} style={style} disabled={disabled}>
-        <FieldLabel htmlFor={inputId}>
+      <FieldSet
+        className={className}
+        style={style}
+        disabled={disabled}
+        aria-orientation="horizontal"
+      >
+        <FieldLegend id={labelId}>
           <FieldLabelText
             label={label}
             hideLabel={hideLabel}
             optionalLabel={optionalLabel}
             required={required}
           />
-        </FieldLabel>
+        </FieldLegend>
         <div className={classes.wrapper}>
-          <FieldLabel htmlFor={pickerId} className={classes.picker}>
-            <FieldLabelText label={pickerLabel} hideLabel />
+          <label htmlFor={pickerId} className={classes.picker}>
             <input
-              type="color"
               id={pickerId}
+              type="color"
+              aria-labelledby={labelId}
+              aria-describedby={descriptionIds}
               className={classes['color-input']}
               onChange={onPickerColorChange}
               ref={applyMultipleRefs(colorPickerRef, ref)}
               readOnly={readOnly}
             />
-          </FieldLabel>
-          <span className={classes.symbol} id={hexSymbolId}>
-            #
-          </span>
+          </label>
+          <span className={classes.symbol}>#</span>
           <input
-            id={inputId}
+            id={id}
+            aria-labelledby={labelId}
             aria-describedby={descriptionIds}
             className={clsx(
               inputClasses.base,
@@ -164,7 +169,15 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
             {...props}
           />
         </div>
-      </FieldWrapper>
+        <FieldValidationHint
+          id={validationHintId}
+          disabled={disabled}
+          invalid={invalid}
+          hasWarning={hasWarning}
+          showValid={showValid}
+          validationHint={validationHint}
+        />
+      </FieldSet>
     );
   },
 );