fix: move spacebar check to keyUp (match MUI) and focus in more actio…

…ns when opened
qlik-oss · Apr 5, 2023 · 55bbdc6 · 55bbdc6
1 parent 6036891
commit 55bbdc6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/apis/nucleus/src/components/ActionsToolbarItem.jsx b/apis/nucleus/src/components/ActionsToolbarItem.jsx
@@ -25,7 +25,8 @@ const Item = React.forwardRef(({ ariaExpanded = false, item, addAnchor = false }
   const spacing = Number.parseInt(theme.spacing(0.5), 10);
 
   const keyboardAction = item.keyboardAction || item.action;
-  const handleKeyDown = keyboardAction ? (e) => ['Enter', ' ', 'Spacebar'].includes(e.key) && keyboardAction() : null;
+  const handleKeyDown = keyboardAction ? (e) => ['Enter'].includes(e.key) && keyboardAction() : null;
+  const handleKeyUp = keyboardAction ? (e) => [' ', 'Spacebar'].includes(e.key) && keyboardAction() : null;
 
   const btnId = `actions-toolbar-${item.key}`;
 
@@ -35,6 +36,7 @@ const Item = React.forwardRef(({ ariaExpanded = false, item, addAnchor = false }
       title={item.label}
       onClick={item.action}
       onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
       disabled={disabled}
       style={style}
       className={[ActionElement.className, btnId].join(' ')}

diff --git a/apis/nucleus/src/components/ActionsToolbarMore.jsx b/apis/nucleus/src/components/ActionsToolbarMore.jsx
@@ -26,15 +26,15 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
   },
 }));
 
-function MoreItem({ item, onActionClick = () => {} }) {
+function MoreItem({ item, autoFocus, onActionClick = () => {} }) {
   const { hidden, disabled, hasSvgIconShape } = useActionState(item);
 
   const handleClick = () => {
     item.action();
     onActionClick();
   };
   return !hidden ? (
-    <MenuItem title={item.label} onClick={handleClick} disabled={disabled} tabindex="0">
+    <MenuItem autoFocus={autoFocus} title={item.label} onClick={handleClick} disabled={disabled} tabindex="0">
       {hasSvgIconShape && <ListItemIcon className={classes.icon}>{SvgIcon(item.getSvgIconShape())}</ListItemIcon>}
       <Typography noWrap>{item.label}</Typography>
     </MenuItem>
@@ -47,6 +47,7 @@ const More = React.forwardRef(
     ref
   ) => {
     const showActions = actions.length > 0;
+    const autoFocusIndex = actions.findIndex((action) => !action.disabled);
 
     return (
       showActions && (
@@ -86,7 +87,7 @@ const More = React.forwardRef(
           <MenuList id="moreMenuList">
             {actions.map((item, ix) => (
               // eslint-disable-next-line react/no-array-index-key
-              <MoreItem key={ix} item={item} onActionClick={onCloseOrActionClick} />
+              <MoreItem key={ix} item={item} autoFocus={ix === autoFocusIndex} onActionClick={onCloseOrActionClick} />
             ))}
           </MenuList>
         </StyledPopover>

diff --git a/apis/nucleus/src/components/__tests__/actions-toolbar-item.test.jsx b/apis/nucleus/src/components/__tests__/actions-toolbar-item.test.jsx
@@ -101,7 +101,7 @@ describe('<ActionsToolbarItem />', () => {
     const keyboardAction = jest.fn();
     await render({ label: 'foo', action, keyboardAction });
     const item = renderer.root.findByType(IconButton);
-    item.props.onKeyDown({ key: 'Spacebar' });
+    item.props.onKeyUp({ key: 'Spacebar' });
     expect(action).not.toBeCalled();
     expect(keyboardAction).toHaveBeenCalledTimes(1);
   });
@@ -110,7 +110,7 @@ describe('<ActionsToolbarItem />', () => {
     const action = jest.fn();
     await render({ label: 'foo', action });
     const item = renderer.root.findByType(IconButton);
-    item.props.onKeyDown({ key: 'Spacebar' });
+    item.props.onKeyUp({ key: 'Spacebar' });
     expect(action).toHaveBeenCalledTimes(1);
   });
 });