Merge pull request #6967 from marmelab/fix-list-keyboard

Fix List Filter Menu is not accessible

Author: fzaninotto

packages/ra-ui-materialui/src/list/filter/FilterButton.tsx

@@ -82,6 +82,7 @@ const FilterButton = (props: FilterButtonProps): JSX.Element => {
             <Button
                 className="add-filter"
                 label="ra.action.add_filter"
+                aria-haspopup="true"
                 onClick={handleClickButton}
             >
                 <ContentFilter />
@@ -91,12 +92,13 @@ const FilterButton = (props: FilterButtonProps): JSX.Element => {
                 anchorEl={anchorEl.current}
                 onClose={handleRequestClose}
             >
-                {hiddenFilters.map((filterElement: JSX.Element) => (
+                {hiddenFilters.map((filterElement: JSX.Element, index) => (
                     <FilterButtonMenuItem
                         key={filterElement.props.source}
                         filter={filterElement}
                         resource={resource}
                         onShow={handleShow}
+                        autoFocus={index === 0}
                     />
                 ))}
             </Menu>

packages/ra-ui-materialui/src/list/filter/FilterButtonMenuItem.tsx

@@ -6,7 +6,7 @@ import { FieldTitle, useResourceContext } from 'ra-core';
 
 export const FilterButtonMenuItem = forwardRef<any, FilterButtonMenuItemProps>(
     (props, ref) => {
-        const { filter, onShow } = props;
+        const { filter, onShow, autoFocus } = props;
         const resource = useResourceContext(props);
         const handleShow = useCallback(() => {
             onShow({
@@ -22,6 +22,7 @@ export const FilterButtonMenuItem = forwardRef<any, FilterButtonMenuItemProps>(
                 data-default-value={filter.props.defaultValue}
                 key={filter.props.source}
                 onClick={handleShow}
+                autoFocus={autoFocus}
                 ref={ref}
             >
                 <FieldTitle
@@ -38,10 +39,12 @@ FilterButtonMenuItem.propTypes = {
     filter: PropTypes.element.isRequired,
     onShow: PropTypes.func.isRequired,
     resource: PropTypes.string,
+    autoFocus: PropTypes.bool,
 };
 
 export interface FilterButtonMenuItemProps {
     filter: JSX.Element;
     onShow: (params: { source: string; defaultValue: any }) => void;
     resource: string;
+    autoFocus: boolean;
 }