diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
index c152e120..4edac0e4 100644
--- a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -49,6 +49,10 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
   border-color: var(--pv-color-gray-7);
 }
 
+.emotion-0:hover [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
@@ -63,11 +67,19 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-visible [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0:focus-within {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-within [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
@@ -175,12 +187,12 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
       >
         <svg
           aria-disabled="false"
-          aria-hidden="true"
+          aria-label="Open"
           class="emotion-3"
           fill="none"
           height="24px"
           role="button"
-          title="open"
+          title="Open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -254,6 +266,10 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
   border-color: var(--pv-color-gray-7);
 }
 
+.emotion-0:hover [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
@@ -268,11 +284,19 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-visible [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0:focus-within {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-within [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
@@ -380,12 +404,12 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
       >
         <svg
           aria-disabled="false"
-          aria-hidden="true"
+          aria-label="Open"
           class="emotion-3"
           fill="none"
           height="24px"
           role="button"
-          title="open"
+          title="Open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -459,6 +483,10 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
   border-color: var(--pv-color-gray-7);
 }
 
+.emotion-0:hover [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
@@ -473,11 +501,19 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-visible [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0:focus-within {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-within [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
@@ -585,12 +621,12 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
       >
         <svg
           aria-disabled="false"
-          aria-hidden="true"
+          aria-label="Open"
           class="emotion-3"
           fill="none"
           height="24px"
           role="button"
-          title="open"
+          title="Open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -664,6 +700,10 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
   border-color: var(--pv-color-gray-7);
 }
 
+.emotion-0:hover [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
@@ -678,11 +718,19 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-visible [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0:focus-within {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-within [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
@@ -790,12 +838,12 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
       >
         <svg
           aria-disabled="false"
-          aria-hidden="true"
+          aria-label="Open"
           class="emotion-3"
           fill="none"
           height="24px"
           role="button"
-          title="open"
+          title="Open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -869,6 +917,10 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
   border-color: var(--pv-color-gray-7);
 }
 
+.emotion-0:hover [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
@@ -883,11 +935,19 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-visible [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-0:focus-within {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
+.emotion-0:focus-within [aria-label="Clear"] {
+  visibility: visible;
+}
+
 .emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
@@ -995,12 +1055,12 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
       >
         <svg
           aria-disabled="false"
-          aria-hidden="true"
+          aria-label="Open"
           class="emotion-3"
           fill="none"
           height="24px"
           role="button"
-          title="open"
+          title="Open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
index a8f671ad..a0874b77 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.test.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
@@ -5,6 +5,7 @@ import {
   fireEvent,
   act,
   waitFor,
+  userEvent,
 } from '../test-utils';
 import { Autocomplete } from './index';
 
@@ -156,11 +157,11 @@ describe('<Autocomplete />', () => {
 
     expect(screen.getByDisplayValue('clearable-option')).toBeInTheDocument();
 
+    await userEvent.hover(screen.getByRole('combobox'));
+
     await act(async () => {
-      fireEvent.click(screen.getByRole('combobox'));
+      fireEvent.click(screen.getByTitle('Clear'));
     });
-
-    fireEvent.click(screen.getByRole('button', { name: /clear/i }));
     expect(screen.queryByDisplayValue('clearable-option')).not.toBeInTheDocument();
   });
 
@@ -239,8 +240,10 @@ describe('<Autocomplete />', () => {
 
       expect(screen.getByDisplayValue('option-1')).toBeInTheDocument();
 
+      await userEvent.hover(screen.getByRole('combobox'));
+
       await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+        fireEvent.click(screen.getByTitle('Clear'));
       });
 
       expect(screen.queryByDisplayValue('option-1')).not.toBeInTheDocument();
@@ -301,11 +304,11 @@ describe('<Autocomplete />', () => {
       fireEvent.click(screen.getByText('option-1'));
       fireEvent.click(screen.getByText('option-2'));
 
+      await userEvent.hover(screen.getByRole('combobox'));
+
       await act(async () => {
-        fireEvent.click(screen.getByRole('combobox'));
+        fireEvent.click(screen.getByTitle('Clear'));
       });
-
-      fireEvent.click(screen.getByRole('button', { name: /clear/i }));
       expect(screen.queryByText('option-1')).not.toBeInTheDocument();
       expect(screen.queryByText('option-2')).not.toBeInTheDocument();
     });
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index cbd9723d..b3a7386a 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -209,6 +209,9 @@ TypographyOwnProps
         '&:hover': {
           backgroundColor: 'var(--pv-color-gray-3)',
           borderColor: borderColorHover,
+          '[aria-label="Clear"]': {
+            visibility: 'visible',
+          },
         },
         '&[aria-placeholder]': {
           color: colorPlaceholder,
@@ -220,10 +223,16 @@ TypographyOwnProps
         '&:focus-visible': {
           backgroundColor: backgroundColorFocus,
           borderColor: borderColorFocus,
+          '[aria-label="Clear"]': {
+            visibility: 'visible',
+          },
         },
         '&:focus-within': {
           backgroundColor: backgroundColorFocus,
           borderColor: borderColorFocus,
+          '[aria-label="Clear"]': {
+            visibility: 'visible',
+          },
         },
       }),
     });
@@ -239,16 +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',
-  '&[aria-disabled="true"]': {
-    color: 'inherit',
-    pointerEvents: 'none',
-  },
+  visibility: 'hidden',
+  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',
@@ -445,9 +457,6 @@ export const Autocomplete = <
     onChange,
     ...otherInputProps
   } = getInputProps();
-  const {
-    onClick,
-  } = getClearProps();
 
   const rootProps = getRootProps();
   const popoverProps = getPopoverProps();
@@ -608,19 +617,23 @@ export const Autocomplete = <
       )}
       <AutocompleteActions>
         {!isValueEmpty && !readOnly ? (
-          <AutocompleteRemoveIcon
-            role="button"
-            title="clear"
-            aria-disabled={disabled}
-            // @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}
-          aria-hidden
           open={popoverProps.open}
         />
       </AutocompleteActions>