chore(react-components): update Autocomplete clear button styles

PeculiarVentures · Oct 25, 2024 · 97fe42e · 97fe42e
1 parent e063c38
commit 97fe42e
Showing 1 changed file with 25 additions and 22 deletions.
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -209,7 +209,7 @@ TypographyOwnProps
         '&:hover': {
           backgroundColor: 'var(--pv-color-gray-3)',
           borderColor: borderColorHover,
-          '[aria-hidden]': {
+          '[aria-label="Clear"]': {
             visibility: 'visible',
           },
         },
@@ -223,14 +223,14 @@ TypographyOwnProps
         '&:focus-visible': {
           backgroundColor: backgroundColorFocus,
           borderColor: borderColorFocus,
-          '[aria-hidden]': {
+          '[aria-label="Clear"]': {
             visibility: 'visible',
           },
         },
         '&:focus-within': {
           backgroundColor: backgroundColorFocus,
           borderColor: borderColorFocus,
-          '[aria-hidden]': {
+          '[aria-label="Clear"]': {
             visibility: 'visible',
           },
         },
@@ -248,17 +248,19 @@ const AutocompleteActions = styled('div')({
   margin: '0px var(--pv-size-base)',
 });
 
-const AutocompleteRemoveIcon = styled(CloseSmallIcon)({
+const AutocompleteClearButton = styled('button')({
   color: 'var(--pv-color-gray-10)',
   cursor: 'pointer',
   visibility: 'hidden',
-  '&[aria-disabled="true"]': {
-    color: 'inherit',
-    pointerEvents: 'none',
-  },
+  display: 'inline-flex',
+  appearance: 'none',
+  outline: '0px',
+  padding: '0px',
+  borderWidth: '0px',
+  background: 'transparent',
 });
 
-const AutocompleteArrowIcon = styled(ArrowDropDownIcon)<{ open: boolean }>({
+const AutocompleteOpenButton = styled(ArrowDropDownIcon)<{ open: boolean }>({
   color: 'var(--pv-color-gray-10)',
   '&[aria-disabled="true"]': {
     color: 'inherit',
@@ -455,9 +457,6 @@ export const Autocomplete = <
     onChange,
     ...otherInputProps
   } = getInputProps();
-  const {
-    onClick,
-  } = getClearProps();
 
   const rootProps = getRootProps();
   const popoverProps = getPopoverProps();
@@ -618,18 +617,22 @@ export const Autocomplete = <
       )}
       <AutocompleteActions>
         {!isValueEmpty && !readOnly ? (
-          <AutocompleteRemoveIcon
-            role="button"
-            title="clear"
-            aria-disabled={disabled}
-            aria-hidden
-            // @ts-ignore
-            onClick={onClick}
-          />
+          <AutocompleteClearButton
+            type="button"
+            disabled={disabled}
+            title="Clear"
+            aria-label="Clear"
+            {...getClearProps()}
+          >
+            <CloseSmallIcon
+              aria-hidden
+            />
+          </AutocompleteClearButton>
         ) : null}
-        <AutocompleteArrowIcon
+        <AutocompleteOpenButton
           role="button"
-          title="open"
+          title="Open"
+          aria-label="Open"
           aria-disabled={disabled}
           open={popoverProps.open}
         />