@patternfly/react-core 4.236.3 → 4.236.6

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -106,12 +106,14 @@ test('Renders without pf-m-expanded on the tab element by default', () => {
   expect(screen.getByRole('tab')).not.toHaveClass('pf-m-expanded');
 });
 
-test('Renders with pf-m-expanded on the tab element once clicked', () => {
+test('Renders with pf-m-expanded on the tab element once clicked', async () => {
+  const user = userEvent.setup();
+
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveClass('pf-m-expanded');
 });
@@ -156,7 +158,9 @@ test('Does not render tabs passed via overflowingTabs when not expanded', () =>
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Renders tabs passed via overflowingTabs when expanded', () => {
+test('Renders tabs passed via overflowingTabs when expanded', async () => {
+  const user = userEvent.setup();
+
   render(
     <OverflowTab
       overflowingTabs={[
@@ -166,13 +170,15 @@ test('Renders tabs passed via overflowingTabs when expanded', () => {
     />
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   expect(screen.getByText('Tab one')).toBeVisible();
   expect(screen.getByText('Tab two')).toBeVisible();
 });
 
-test('Closes the overflowing tabs menu when a tab is selected', () => {
+test('Closes the overflowing tabs menu when a tab is selected', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -184,15 +190,17 @@ test('Closes the overflowing tabs menu when a tab is selected', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Closes the overflowing tabs menu when the user clicks outside of the menu', () => {
+test('Closes the overflowing tabs menu when the user clicks outside of the menu', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -204,14 +212,15 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu'
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
-  userEvent.click(document.body);
+  await user.click(document.body);
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Calls the onTabClick callback provided via context when a tab is clicked', () => {
+test('Calls the onTabClick callback provided via context when a tab is clicked', async () => {
+  const user = userEvent.setup();
   const mockHandleTabClick = jest.fn();
 
   render(
@@ -224,10 +233,10 @@ test('Calls the onTabClick callback provided via context when a tab is clicked',
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(mockHandleTabClick).toHaveBeenCalledTimes(1);
   expect(mockHandleTabClick).toHaveBeenCalledWith('mouseEvent', 1, 'fakeRef');
@@ -325,12 +334,14 @@ test('Renders the tab with aria-expanded set to false by default', () => {
   expect(screen.getByRole('tab')).toHaveAttribute('aria-expanded', 'false');
 });
 
-test('Renders the tab with aria-expanded set to true when the menu is opened', () => {
+test('Renders the tab with aria-expanded set to true when the menu is opened', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
 });
@@ -342,16 +353,20 @@ test('Passes Popper popperMatchesTriggerWidth set to false', () => {
   expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
 });
 
-test('Passes Popper an appendTo value of the presentation element', () => {
+test('Passes Popper an appendTo value of the presentation element', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
 });
 
-test('Does not render an overflowing tab as a selected menu item by default', () => {
+test('Does not render an overflowing tab as a selected menu item by default', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -362,13 +377,15 @@ test('Does not render an overflowing tab as a selected menu item by default', ()
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.queryByText('Selected: true')).not.toBeInTheDocument();
 });
 
-test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', () => {
+test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -379,13 +396,15 @@ test('Renders an overflowing tab as a selected menu item when its key matches th
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Selected: true')).toBeVisible();
 });
 
-test('Matches snapshot when expanded', () => {
+test('Matches snapshot when expanded', async () => {
+  const user = userEvent.setup();
+  
   const { asFragment } = render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -397,7 +416,7 @@ test('Matches snapshot when expanded', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -12,10 +12,12 @@ const props = {
 };
 
 describe('TextArea', () => {
-  test('textarea input passes value and event to onChange handler', () => {
+  test('textarea input passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
 
-    userEvent.type(screen.getByLabelText('test textarea'), 'a');
+    await user.type(screen.getByLabelText('test textarea'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
   });
 

package/src/components/TextInput/__tests__/TextInput.test.tsx

@@ -12,10 +12,12 @@ const props = {
 };
 
 describe('TextInput', () => {
-  test('input passes value and event to onChange handler', () => {
+  test('input passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<TextInputBase {...props} value="" aria-label="test input" />);
 
-    userEvent.type(screen.getByLabelText('test input'), 'a');
+    await user.type(screen.getByLabelText('test input'), 'a');
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
   });
 

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -241,13 +241,14 @@ describe('TextInputGroupMain', () => {
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onChange callback when the input changes', () => {
+  it('calls the onChange callback when the input changes', async () => {
     const onChangeMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onChange={onChangeMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.type(input, 'Test');
+    await user.type(input, 'Test');
 
     expect(onChangeMock).toHaveBeenCalledTimes(4);
   });
@@ -260,36 +261,39 @@ describe('TextInputGroupMain', () => {
     expect(onFocusMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onFocus callback when the input is focused', () => {
+  it('calls the onFocus callback when the input is focused', async () => {
     const onFocusMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onFocus={onFocusMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onFocusMock).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onBlur callback when the input does not lose focus', () => {
+  it('does not call onBlur callback when the input does not lose focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onBlur callback when the input loses focus', () => {
+  it('calls the onBlur callback when the input loses focus', async() => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });

package/src/components/TimePicker/__tests__/TimePicker.test.tsx

@@ -7,7 +7,7 @@ import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   describe('test timepicker onChange method with valid values', () => {
-    const testOnChange = ({
+    const testOnChange = async ({
       inputProps,
       expects
     }: {
@@ -15,49 +15,51 @@ describe('TimePicker', () => {
       expects: { hour: number; minutes: number; seconds: number };
     }) => {
       const onChange = jest.fn();
+      const user = userEvent.setup();
+
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
-      userEvent.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
+      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true)
     };
 
-    test('should return the correct value using the AM/PM pattern - midnight', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - midnight', async () => {
+      await testOnChange({
         inputProps: { value: '12:00 AM', is24Hour: false },
         expects: { hour: 0, minutes: 0, seconds: null }
       });
     });
 
-    test('should return the correct value using the AM/PM pattern - midday', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - midday', async () => {
+      await testOnChange({
         inputProps: { value: '12:35 PM', is24Hour: false },
         expects: { hour: 12, minutes: 35, seconds: null }
       });
     });
 
-    test('should return the correct value using the AM/PM pattern - last minute of the day', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - last minute of the day', async () => {
+      await testOnChange({
         inputProps: { value: '11:59 PM', is24Hour: false },
         expects: { hour: 23, minutes: 59, seconds: null }
       });
     });
 
-    test('should return the correct value using the 24h pattern - midnight', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - midnight', async () => {
+      await testOnChange({
         inputProps: { value: '00:00:00', is24Hour: true, includeSeconds: true },
         expects: { hour: 0, minutes: 0, seconds: 0 }
       });
     });
 
-    test('should return the correct value using the 24h pattern - midday', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - midday', async () => {
+      await testOnChange({
         inputProps: { value: '12:35', is24Hour: false },
         expects: { hour: 12, minutes: 35, seconds: null }
       });
     });
 
-    test('should return the correct value using the 24h pattern - last minute of the day', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - last minute of the day', async () => {
+      await testOnChange({
         inputProps: { value: '23:59', is24Hour: true },
         expects: { hour: 23, minutes: 59, seconds: null }
       });
@@ -75,16 +77,17 @@ describe('TimePicker', () => {
       expect(screen.getByLabelText('time picker')).not.toHaveClass('pf-m-error');
     });
 
-    test('should stay valid after onChange', () => {
+    test('should stay valid after onChange', async () => {
       const validateTime = (_time: string) => {
         return true;
       };
+      const user = userEvent.setup();
 
       render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);
 
       const input = screen.getByLabelText('time picker');
 
-      userEvent.type(input, '01:00');
+      await user.type(input, '01:00');
       expect(input).not.toHaveClass('pf-m-error');
     });
 
@@ -92,6 +95,7 @@ describe('TimePicker', () => {
       const validateTime = (_time: string) => {
         return false;
       };
+      const user = userEvent.setup();
 
       render(
         <>
@@ -100,10 +104,10 @@ describe('TimePicker', () => {
         </>
       );
 
-      userEvent.type(screen.getByLabelText('time picker'), '01:00');
+      await user.type(screen.getByLabelText('time picker'), '01:00');
       expect(screen.queryByText('Invalid time format')).toBeNull();
 
-      userEvent.click(screen.getByText('Other element'));
+      await user.click(screen.getByText('Other element'));
       expect(screen.getByText('Invalid time format')).toBeInTheDocument();
     });
   });
@@ -115,21 +119,27 @@ describe('TimePicker', () => {
       includeSeconds: true
     };
 
-    it('should be valid still with a max value of "11:59:59 PM" by default', () => {
+    it('should be valid still with a max value of "11:59:59 PM" by default', async () => {
+      const user = userEvent.setup();
+
       render(<TimePicker {...baseProps} />);
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM');
       expect(screen.queryByText('Invalid time format')).toBeNull();
     });
 
-    it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => {
+    it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', async () => {
+      const user = userEvent.setup();
+
       render(<TimePicker {...baseProps} value="20:00" is24Hour />);
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59');
       expect(screen.queryByText('Invalid time format')).toBeNull();
     });
 
-    it('should be invalid with a max value of "24:00:00" by default', () => {
+    it('should be invalid with a max value of "24:00:00" by default', async () => {
+      const user = userEvent.setup();
+
       render(
         <>
           <div>Other element</div>
@@ -137,10 +147,10 @@ describe('TimePicker', () => {
         </>
       );
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00');
       expect(screen.queryByText('Invalid time format')).toBeNull();
 
-      userEvent.click(screen.getByText('Other element'));
+      await user.click(screen.getByText('Other element'));
       expect(screen.getByText('Invalid time format')).toBeInTheDocument();
     });
   });

package/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -40,12 +40,14 @@ describe('ToggleGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('item passes selection and event to onChange handler', () => {
+  test('item passes selection and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(
       <ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />
     );
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 

package/src/components/Tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 import { css } from '@patternfly/react-styles';
 import { TooltipContent } from './TooltipContent';
 import { TooltipArrow } from './TooltipArrow';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
 import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
@@ -209,13 +209,13 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
 
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
-      if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
+      if (event.key === KeyTypes.Escape && visible) {
         hide();
       }
     }
   };
   const onTriggerEnter = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       if (!visible) {
         show();
       } else {

package/src/components/Wizard/Wizard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { Modal, ModalVariant } from '../Modal';
@@ -178,7 +178,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   }
 
   private handleKeyClicks = (event: KeyboardEvent): void => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY) {
+    if (event.key === KeyTypes.Escape) {
       if (this.state.isNavOpen) {
         this.setState({ isNavOpen: !this.state.isNavOpen });
       } else if (this.props.isOpen) {

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -223,13 +223,14 @@ describe('Wizard', () => {
     expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
   });
 
-  test('wiz with onCurrentStepChanged setter', () => {
+  test('wiz with onCurrentStepChanged setter', async () => {
     const stepA = { name: 'A', component: <p>Step 1</p> };
     const stepB = { name: 'B', component: <p>Step 2</p> };
     const stepC = { name: 'C', component: <p>Step 3</p> };
 
     const steps: WizardStep[] = [ stepA, stepB, stepC ];
     const setter = jest.fn();
+    const user = userEvent.setup();
 
     render(
         <Wizard
@@ -239,15 +240,15 @@ describe('Wizard', () => {
         />
     );
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepC));
-    userEvent.click(screen.getByText('A'));
+    await user.click(screen.getByText('A'));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    userEvent.click(screen.getByText(/back/i));
+    await user.click(screen.getByText(/back/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
   });
 });
@@ -274,14 +275,15 @@ describe('Wizard', () => {
     expect(screen.getByRole('button',{ name: "E" })).toBeDisabled();
   });
 
-  test('wiz skip the step disabled when press the next/back button', () => {
+  test('wiz skip the step disabled when press the next/back button', async () => {
     const steps: WizardStep[] = [
       { name: 'A', component: <p>Step 1</p>},
       { name: 'B', component: <p>Step 2</p>, isDisabled: true },
       { name: 'C', component: <p>Step 3</p>},
 
     ];
-    
+    const user = userEvent.setup();
+
     render(
       <Wizard
         navAriaLabel="nav aria-label"
@@ -290,19 +292,20 @@ describe('Wizard', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
     expect(screen.getByRole('button',{ name: "C" })).toHaveClass('pf-m-current')
 
-    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+    await user.click(screen.getByRole('button', { name: 'Back' }));
     expect(screen.getByRole('button',{ name: "A" })).toHaveClass('pf-m-current')
   });
   
-  test('wiz skip the step when click on the nav item disabled', () => {
+  test('wiz skip the step when click on the nav item disabled', async () => {
     const steps: WizardStep[] = [
       { name: 'A', component: <p>Step 1</p>},
       { name: 'B', component: <p>Step 2</p>, isDisabled: true },
       { name: 'C', component: <p>Step 3</p>}
     ];
+    const user = userEvent.setup();
     
     render(
       <Wizard
@@ -315,7 +318,7 @@ describe('Wizard', () => {
     const navItemButton = screen.getByRole('button',{ name: "B" })
     const navItemButtonSelected = screen.getByRole('button',{ name: "A" })
     
-    userEvent.click(navItemButton);
+    await user.click(navItemButton);
 
     expect(navItemButton).not.toHaveClass('pf-m-current')
     expect(navItemButtonSelected).toHaveClass('pf-m-current')
@@ -343,7 +346,7 @@ describe('Wizard', () => {
     expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
   });
 
-test('startAtStep can be used to externally control the current step of the wizard', () => {
+test('startAtStep can be used to externally control the current step of the wizard', async () => {
   const WizardTest = () => {
     const [step, setStep] = React.useState(1);
 
@@ -364,12 +367,13 @@ test('startAtStep can be used to externally control the current step of the wiza
       </>
     );
   };
+  const user = userEvent.setup();
 
   render(<WizardTest />);
 
   expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('button', { name: 'Increment step'}))
+  await user.click(screen.getByRole('button', { name: 'Increment step'}))
 
   expect(screen.getByText('Step 2')).toBeVisible();
 });

package/src/demos/PrimaryDetail.md

@@ -1264,7 +1264,7 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
 
-      if ([13, 32].includes(event.keyCode)) {
+      if (['Enter', ' '].includes(event.key)) {
         if (event.currentTarget.id === this.state.activeCard) {
           this.setState({
             isDrawerExpanded: !this.state.isDrawerExpanded,