allow for keyboard focusing clear button

Frontify · Nov 25, 2024 · 1431e7b · 1431e7b
1 parent 929fd8f
commit 1431e7b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 30 deletions.
diff --git a/packages/components/src/components/ColorPicker/ColorPickerInput.tsx b/packages/components/src/components/ColorPicker/ColorPickerInput.tsx
@@ -23,43 +23,59 @@ type ColorPickerInputProps = {
      * callback for clearing the color
      */
     onClear?: () => void;
+    /**
+     * Event handler called when the color picker input is clicked
+     */
+    onClick?: () => void;
     /**
      * The test id of the color picker input
      */
     'data-test-id'?: string;
 } & CommonAriaAttrs;
 
 export const ColorPickerInput = (
-    { id, currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,
+    {
+        id,
+        currentColor,
+        isOpen,
+        onClear,
+        onClick,
+        'data-test-id': dataTestId = 'color-picker-input',
+        ...props
+    }: ColorPickerInputProps,
     forwardedRef: ForwardedRef<HTMLDivElement>,
 ) => {
     const colorNameId = useId();
 
     return (
         <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>
-            {currentColor?.red !== undefined ? (
-                <div
-                    aria-describedby={colorNameId}
-                    className={styles.colorIndicator}
-                    style={{ backgroundColor: colorToCss(currentColor) }}
-                />
-            ) : (
-                <>
-                    <IconDroplet size={16} />
-                    <span>Select Color</span>
-                </>
-            )}
+            <button className={styles.button} onClick={onClick} data-color-input-select>
+                {currentColor?.red !== undefined ? (
+                    <div
+                        aria-describedby={colorNameId}
+                        className={styles.colorIndicator}
+                        style={{ backgroundColor: colorToCss(currentColor) }}
+                    />
+                ) : (
+                    <>
+                        <IconDroplet size={16} />
+                        <span>Select Color</span>
+                    </>
+                )}
 
-            <span id={colorNameId} className={styles.colorName}>
-                {currentColor?.name}
-            </span>
-            {onClear && (
-                <button type="button" aria-label="Clear color" onClick={onClear} className={styles.clear}>
-                    <IconTrashBin size={16} />
-                </button>
-            )}
-            <div>
-                <IconCaretDown size={16} className={styles.caret} />
+                <span id={colorNameId} className={styles.colorName}>
+                    {currentColor?.name}
+                </span>
+            </button>
+            <div className={styles.actions}>
+                {onClear && (
+                    <button type="button" aria-label="Clear color" onClick={onClear} className={styles.clear}>
+                        <IconTrashBin size={16} />
+                    </button>
+                )}
+                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>
+                    <IconCaretDown size={16} className={styles.caret} />
+                </div>
             </div>
         </div>
     );

diff --git a/packages/components/src/components/ColorPicker/styles/colorInput.module.scss b/packages/components/src/components/ColorPicker/styles/colorInput.module.scss
@@ -4,17 +4,14 @@
 @import '../../../utilities/transitions.module.scss';
 
 .root {
-    @include focus-outline;
     @include transition-colors;
 
     width: 100%;
     position: relative;
-    display: flex;
     justify-content: start;
     align-items: center;
     gap: sizeToken(2);
-    padding-left: sizeToken(3);
-    padding-right: sizeToken(3);
+    overflow: hidden;
 
     font-family: var(--body-family-stack);
     font-weight: 400;
@@ -23,12 +20,10 @@
     box-sizing: border-box;
 
     text-align: start;
-    height: sizeToken(9);
     color: var(--text-color-x-weak);
     background-color: var(--base-color);
     border-radius: var(--radius);
     border: var(--line-width) solid var(--line-color-strong);
-    cursor: pointer;
 
     &:hover {
         border-color: var(--line-color-x-strong);
@@ -41,6 +36,10 @@
         color: var(--line-color-xx-strong);
     }
 
+    &:has(button[data-color-input-select]:focus-visible) {
+        @include focus-outline-styles
+    }
+
     &:has(input:disabled),
     &[data-disabled='true'] {
         border-color: var(--line-color-weak);
@@ -50,8 +49,17 @@
     }
 }
 
-.colorName {
+.button {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: sizeToken(2);
     flex-grow: 1;
+    padding-left: sizeToken(3);
+    padding-right: sizeToken(3);
+    height: sizeToken(9);
+    outline: none;
+    width: 100%;
 }
 
 .colorIndicator {
@@ -60,8 +68,26 @@
     border-radius: sizeToken(1);
 }
 
+.actions {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: sizeToken(3);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+}
+.clear {
+    outline: none;
+    padding: sizeToken(1);
+    margin: sizeToken(1);
+    @include focus-outline;
+    pointer-events: all;
+}
+
 .caret {
     @include transition-all;
+
 }
 
 [data-state='open'] {