From 3b2817d9bf422e575d00fc579a1c4920632ab3fc Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Tue, 25 Oct 2022 16:26:38 +0200
Subject: [PATCH] fix accessibility on focusable elements

---
 .../src/list/filter/FilterFormInput.tsx       | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
index edf6785f575..9420dc933b4 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
@@ -16,6 +16,14 @@ export const FilterFormInput = props => {
             data-source={filterElement.props.source}
             className={clsx('filter-field', className)}
         >
+            {React.cloneElement(filterElement, {
+                resource,
+                record: emptyRecord,
+                size: 'small',
+                helperText: false,
+                // ignore defaultValue in Field because it was already set in Form (via mergedInitialValuesWithDefaultValues)
+                defaultValue: undefined,
+            })}
             {!filterElement.props.alwaysOn && (
                 <IconButton
                     className={clsx(
@@ -30,14 +38,6 @@ export const FilterFormInput = props => {
                     <ActionHide />
                 </IconButton>
             )}
-            {React.cloneElement(filterElement, {
-                resource,
-                record: emptyRecord,
-                size: 'small',
-                helperText: false,
-                // ignore defaultValue in Field because it was already set in Form (via mergedInitialValuesWithDefaultValues)
-                defaultValue: undefined,
-            })}
             <div className={FilterFormInputClasses.spacer}>&nbsp;</div>
         </Root>
     );
@@ -66,9 +66,9 @@ const Root = styled('div', {
     pointerEvents: 'auto',
     position: 'relative',
     '@media (hover: hover)': {
-        '&:hover': {
+        '&:not(:hover, :focus, :active, :focus-visible, :focus-within)': {
             [`& .${FilterFormInputClasses.hideButton}`]: {
-                display: 'flex',
+                visibility: 'hidden',
             },
         },
     },
@@ -80,9 +80,7 @@ const Root = styled('div', {
         right: 0,
         top: 0,
         zIndex: 10,
-        '@media (hover: hover)': {
-            display: 'none',
-        },
+        display: 'flex',
     },
 }));