diff --git a/package.json b/package.json
index 7ff43319e43..6066f2dfb0a 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@octokit/rest": "^16.43.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "27.0.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx
index 97fed602682..6906fd8eb23 100644
--- a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx
+++ b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx
@@ -104,8 +104,9 @@ test('CatalogTile href renders properly', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('CatalogTile onClick behaves properly', () => {
+test('CatalogTile onClick behaves properly', async () => {
   const onClickMock = jest.fn();
+  const user = userEvent.setup();
 
   render(
     <CatalogTile
@@ -119,6 +120,6 @@ test('CatalogTile onClick behaves properly', () => {
     />
   );
 
-  userEvent.click(screen.getByText('Patternfly'));
+  await user.click(screen.getByText('Patternfly'));
   expect(onClickMock).toHaveBeenCalled();
 });
diff --git a/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx b/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx
index 4a2d6f94661..3f5da413d11 100644
--- a/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx
+++ b/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx
@@ -84,11 +84,12 @@ test('Vertical Tabs renders restricted tabs properly', () => {
   expect(component.container).toMatchSnapshot();
 });
 
-test('Vertical Tabs Tab onActivate is called correctly', () => {
+test('Vertical Tabs Tab onActivate is called correctly', async () => {
   const onActivateMock = jest.fn();
+  const user = userEvent.setup();
 
   const component = render(<VerticalTabsTab id="text-click" title="Click Me" onActivate={onActivateMock} />);
-  userEvent.click(screen.getByText('Click Me'));
+  await user.click(screen.getByText('Click Me'));
 
   expect(component.container).toMatchSnapshot();
   expect(onActivateMock).toHaveBeenCalled();
diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx
index 6207f69d4fb..c51ea51ac91 100644
--- a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx
+++ b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx
@@ -72,7 +72,9 @@ describe('AccessConsoles', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('switching SerialConsole and VncConsole', () => {
+  test('switching SerialConsole and VncConsole', async () => {
+    const user = userEvent.setup();
+
     render(
       <AccessConsoles>
         <MyVncConsoleTestWrapper />
@@ -85,8 +87,8 @@ describe('AccessConsoles', () => {
     expect(screen.getByText('VNC console text')).toBeInTheDocument();
 
     // Open dropdown and select "Serial console" option
-    userEvent.click(screen.getByRole('button', { name: 'Options menu' }));
-    userEvent.click(screen.getByText('Serial console', { selector: 'button' }));
+    await user.click(screen.getByRole('button', { name: 'Options menu' }));
+    await user.click(screen.getByText('Serial console', { selector: 'button' }));
 
     // VNC content is no longer visible, and loading contents of the Serial console are visible.
     expect(screen.getByText(/Loading/)).toBeInTheDocument();
diff --git a/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx b/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx
index 8c6cb469dc7..30315053582 100644
--- a/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx
+++ b/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx
@@ -52,29 +52,33 @@ describe('DesktopViewer', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('launch button', () => {
+  test('launch button', async () => {
     const onDownload = jest.fn();
     const onGenerate = jest.fn().mockReturnValue({ content: 'Foo' });
+    const user = userEvent.setup();
 
     render(<DesktopViewer spice={spice} vnc={vnc} onDownload={onDownload} onGenerate={onGenerate} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Launch Remote Viewer' }));
+    await user.click(screen.getByRole('button', { name: 'Launch Remote Viewer' }));
     expect(onGenerate).toHaveBeenCalledTimes(1);
     expect(onDownload).toHaveBeenCalledTimes(1);
   });
 
-  test('RDP launch button', () => {
+  test('RDP launch button', async () => {
     const onDownload = jest.fn();
     const onGenerate = jest.fn().mockReturnValue({ content: 'Foo' });
+    const user = userEvent.setup();
 
     render(<DesktopViewer rdp={rdp} onDownload={onDownload} onGenerate={onGenerate} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Launch Remote Desktop' }));
+    await user.click(screen.getByRole('button', { name: 'Launch Remote Desktop' }));
     expect(onGenerate).toHaveBeenCalledTimes(1);
     expect(onDownload).toHaveBeenCalledTimes(1);
   });
 
-  test('with custom more-info content', () => {
+  test('with custom more-info content', async () => {
+    const user = userEvent.setup();
+
     render(
       <DesktopViewer spice={spice} vnc={vnc}>
         <p id="custom-more-info">My more-info content</p>
@@ -83,7 +87,7 @@ describe('DesktopViewer', () => {
 
     expect(screen.queryByText('My more-info content')).toBeNull();
 
-    userEvent.click(screen.getByRole('button', { name: 'Remote Viewer Details' }));
+    await user.click(screen.getByRole('button', { name: 'Remote Viewer Details' }));
     // If one of the items is shown in the description list, the rest will be in the document as well.
     expect(screen.getByText('RHEL, CentOS')).toBeInTheDocument();
   });
diff --git a/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx b/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx
index a6d0a8adc40..5ccd1a173ae 100644
--- a/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx
+++ b/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx
@@ -35,8 +35,9 @@ describe('VncActions', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('VncActions calls ctrl+alt+del action', () => {
+  test('VncActions calls ctrl+alt+del action', async () => {
     const onCtrlAltDel = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <VncActions
@@ -47,8 +48,8 @@ describe('VncActions', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'My Send Shortcut description' }));
-    userEvent.click(screen.getByText('CtrlAltDel'));
+    await user.click(screen.getByRole('button', { name: 'My Send Shortcut description' }));
+    await user.click(screen.getByText('CtrlAltDel'));
 
     expect(onCtrlAltDel).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx
index 25e3b5b8638..ab107bea736 100644
--- a/packages/react-core/src/components/AboutModal/AboutModal.tsx
+++ b/packages/react-core/src/components/AboutModal/AboutModal.tsx
@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { canUseDOM } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { AboutModalContainer } from './AboutModalContainer';
 import { PickOptional } from '../../helpers/typeUtils';
 
@@ -71,7 +71,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
   }
 
   handleEscKeyClick = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       this.props.onClose();
     }
   };
diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
index 6f03b9422b5..9156d923f9e 100644
--- a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
+++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { AboutModal, AboutModalProps } from '../AboutModal';
+import { KeyTypes } from '../../../helpers';
 
 const props: AboutModalProps = {
   onClose: jest.fn(),
@@ -15,10 +16,12 @@ const props: AboutModalProps = {
 };
 
 describe('AboutModal', () => {
-  test('closes with escape', () => {
+  test('closes with escape', async () => {
+    const user = userEvent.setup();
+    
     render(<AboutModal {...props} isOpen />);
 
-    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    await user.type(screen.getByRole('dialog'), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 
diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
index 006095e89b0..21fff0c47d1 100644
--- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
@@ -52,8 +52,9 @@ describe('Alert', () => {
         expect(asFragment()).toMatchSnapshot();
       });
 
-      test('Action Close Button', () => {
+      test('Action Close Button', async () => {
         const onClose = jest.fn();
+        const user = userEvent.setup();
 
         render(
           <Alert
@@ -65,7 +66,7 @@ describe('Alert', () => {
           </Alert>
         );
 
-        userEvent.click(screen.getByLabelText('Close'));
+        await user.click(screen.getByLabelText('Close'));
         expect(onClose).toHaveBeenCalled();
       });
 
diff --git a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
index d34d82d8381..89e54553919 100644
--- a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
+++ b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
@@ -23,9 +23,10 @@ describe('AlertGroup', () => {
     expect(asFragment()).toBeTruthy();
   });
 
-  test('Alert group overflow shows up', () => {
+  test('Alert group overflow shows up', async () => {
     const overflowMessage = 'View 2 more alerts';
     const onOverflowClick = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
@@ -38,7 +39,7 @@ describe('AlertGroup', () => {
     const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
     expect(overflowButton).toBeInTheDocument();
 
-    userEvent.click(overflowButton);
+    await user.click(overflowButton);
     expect(onOverflowClick).toHaveBeenCalled();
   });
 
@@ -62,8 +63,9 @@ describe('AlertGroup', () => {
     expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
   });
 
-  test('alertgroup closes when alerts are closed', () => {
+  test('alertgroup closes when alerts are closed', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup isToast appendTo={document.body}>
@@ -75,7 +77,7 @@ describe('AlertGroup', () => {
       </AlertGroup>
     );
 
-    userEvent.click(screen.getByLabelText('Close'));
+    await user.click(screen.getByLabelText('Close'));
     expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
index 32e9e5ac0d3..024856dc7cb 100644
--- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -19,7 +19,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if ([13, 32].includes(event.keyCode)) {
+    if (['Enter', ' '].includes(event.key)) {
       event.preventDefault();
       const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
       setSelected(newSelected);
diff --git a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
index 8a8060c5aa0..e89c3a7b284 100644
--- a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
+++ b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -67,11 +67,13 @@ describe('Checkbox', () => {
     expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
   });
 
-  test('checkbox onChange handler called when component is clicked', () => {
+  test('checkbox onChange handler called when component is clicked', async () => {
     const onChangeHandler = jest.fn();
+    const user = userEvent.setup();
+
     render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
 
-    userEvent.click(screen.getByLabelText('check'));
+    await user.click(screen.getByLabelText('check'));
     expect(onChangeHandler).toHaveBeenCalled();
   });
 
diff --git a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx b/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx
index 8c69c75e61d..69055dcc3ef 100644
--- a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx
+++ b/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx
@@ -35,7 +35,9 @@ describe('ChipGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('chip group expanded', () => {
+  test('chip group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <ChipGroup>
         <Chip>1</Chip>
@@ -48,7 +50,7 @@ describe('ChipGroup', () => {
     const moreText = screen.getByText('1 more');
     expect(moreText).toBeInTheDocument();
 
-    userEvent.click(moreText);
+    await user.click(moreText);
     expect(screen.getByText('Show Less')).toBeInTheDocument();
   });
 
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx
index 805d57c0d85..c87ccb90f51 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx
@@ -22,14 +22,16 @@ test('copy button render', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('copy button onClick', () => {
+test('copy button onClick', async () => {
   const onclick = jest.fn();
+  const user = userEvent.setup();
+
   render(
     <ClipboardCopyButton {...props} onClick={onclick}>
       Copy to Clipboard
     </ClipboardCopyButton>
   );
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(onclick).toHaveBeenCalled();
 });
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
index d6c1c7494fc..b3885e985ab 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
@@ -22,11 +22,13 @@ describe('ClipboardCopyToggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('toggle button onClick', () => {
+  test('toggle button onClick', async () => {
     const onclick = jest.fn();
+    const user = userEvent.setup();
+
     render(<ClipboardCopyToggle {...props} onClick={onclick} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onclick).toHaveBeenCalled();
   });
 
diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
index 65cd8a10897..a7ea188509b 100644
--- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
+++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -8,7 +8,7 @@ import { ContextSelectorContext } from './contextSelectorConstants';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { FocusTrap, getUniqueId } from '../../helpers';
 import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -102,7 +102,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   onEnterPressed = (event: any) => {
-    if (event.charCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       this.props.onSearchButtonClick();
     }
   };
diff --git a/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx b/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
index 9278911d2a8..b0af9aecd4a 100644
--- a/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
+++ b/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ContextSelectorToggleProps {
@@ -67,8 +67,7 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onEscPress = (event: any) => {
     const { isOpen, onToggle } = this.props;
-    const keyCode = event.keyCode || event.which;
-    if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY) {
+    if (isOpen && event.key === KeyTypes.Escape) {
       onToggle(null, false);
       this.toggle.current.focus();
     }
@@ -76,16 +75,13 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onKeyDown = (event: any) => {
     const { isOpen, onToggle, onEnter } = this.props;
-    if ((event.keyCode === KEY_CODES.TAB && !isOpen) || event.key !== KEY_CODES.ENTER) {
+    if ((event.key === KeyTypes.Tab && !isOpen) || event.key !== KeyTypes.Enter) {
       return;
     }
     event.preventDefault();
-    if (
-      (event.keyCode === KEY_CODES.TAB || event.keyCode === KEY_CODES.ENTER || event.key !== KEY_CODES.SPACE) &&
-      isOpen
-    ) {
+    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key !== KeyTypes.Space) && isOpen) {
       onToggle(null, !isOpen);
-    } else if ((event.keyCode === KEY_CODES.ENTER || event.key === ' ') && !isOpen) {
+    } else if ((event.key === KeyTypes.Enter || event.key === ' ') && !isOpen) {
       onToggle(null, !isOpen);
       onEnter();
     }
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
index fa4fae9ebd5..79971100815 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
@@ -25,11 +25,13 @@ describe('ContextSelector', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify onToggle is called ', () => {
+  test('Verify onToggle is called ', async () => {
     const mockfn = jest.fn();
+    const user = userEvent.setup();
+
     render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(mockfn.mock.calls).toHaveLength(1);
   });
 });
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
index bc61448d42b..ef8dfc648d1 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
@@ -23,15 +23,16 @@ test('Renders ContextSelectorItem disabled and hovered', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify onClick is called ', () => {
+test('Verify onClick is called ', async () => {
   const mockfn = jest.fn();
+  const user = userEvent.setup();
 
   render(
     <ContextSelectorItem onClick={mockfn} sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
 
   expect(mockfn.mock.calls).toHaveLength(1);
 });
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
index 1da4b3240ae..6b8cb274323 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ContextSelectorToggle } from '../ContextSelectorToggle';
+import { KeyTypes } from '../../../helpers';
 
 describe('ContextSelectorToggle', () => {
   test('Renders ContextSelectorToggle', () => {
@@ -11,40 +12,49 @@ describe('ContextSelectorToggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify onToggle is called ', () => {
+  test('Verify onToggle is called ', async () => {
     const mockfnOnToggle = jest.fn();
+    const user = userEvent.setup();
 
     render(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(mockfnOnToggle).toHaveBeenCalledTimes(1);
   });
 
-  test('Verify ESC press', () => {
+  test('Verify ESC press', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{esc}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify ESC press with not isOpen', () => {
+  test('Verify ESC press with not isOpen', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{esc}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify keydown tab ', () => {
+  test('Verify keydown tab ', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{tab}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Tab}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify keydown enter ', () => {
+  test('Verify keydown enter ', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{enter}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Enter}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
index a2ed22a8bec..671ff6112e9 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -80,8 +80,9 @@ describe('DataList', () => {
     expect(selectableInput).not.toBeInTheDocument();
   });
 
-  test('List calls selectableRow.onChange when the selectable input changes', () => {
+  test('List calls selectableRow.onChange when the selectable input changes', async () => {
     const mock = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
@@ -94,7 +95,7 @@ describe('DataList', () => {
     );
 
     const selectableInput = screen.getByRole('radio', { hidden: true });
-    userEvent.click(selectableInput);
+    await user.click(selectableInput);
 
     expect(mock).toHaveBeenCalled();
   });
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx
index 854559a3d0e..9e69ff734e8 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx
@@ -3,8 +3,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DataListCheck } from '../DataListCheck';
 
-it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', () => {
+it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', async () => {
   const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const user = userEvent.setup();
 
   const ControlledDataListCheck = () => {
     const [checked, setChecked] = React.useState(false);
@@ -14,7 +15,7 @@ it('does not throw a "A component is changing an uncontrolled input of type chec
 
   render(<ControlledDataListCheck />);
 
-  userEvent.click(screen.getByRole('checkbox'));
+  await user.click(screen.getByRole('checkbox'));
 
   expect(consoleSpy).not.toHaveBeenCalled();
 });
diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
index 3470d784de2..224572e4088 100644
--- a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
+++ b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
@@ -12,6 +12,7 @@ import {
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { KeyTypes } from '../../../helpers';
 
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
@@ -126,7 +127,7 @@ test(`Drawer has resizable callback and id`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', () => {
+test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', async () => {
   const TestContext = React.createContext({});
 
   const consoleError = jest.spyOn(console, 'error').mockImplementation();
@@ -148,6 +149,8 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
     </TestContext.Provider>
   );
 
+  const user = userEvent.setup();
+
   render(
     <Drawer isExpanded={true} position="left">
       <DrawerContent panelContent={panelContent}>
@@ -156,8 +159,8 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
     </Drawer>
   );
 
-  userEvent.tab();
-  userEvent.keyboard('{arrowleft}');
+  await user.tab();
+  await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
 
   expect(consoleError).not.toHaveBeenCalled();
 })
diff --git a/packages/react-core/src/components/Dropdown/Toggle.tsx b/packages/react-core/src/components/Dropdown/Toggle.tsx
index a5921d99193..c03bbd5b7e1 100644
--- a/packages/react-core/src/components/Dropdown/Toggle.tsx
+++ b/packages/react-core/src/components/Dropdown/Toggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ToggleProps {
@@ -95,13 +95,12 @@ export class Toggle extends React.Component<ToggleProps> {
 
   onEscPress = (event: KeyboardEvent) => {
     const { parentRef, getMenuRef } = this.props;
-    const keyCode = event.keyCode || event.which;
     const menuRef = getMenuRef && getMenuRef();
     const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const escFromWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
     if (
       this.props.isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       (escFromToggle || escFromWithinMenu)
     ) {
       this.props.onToggle(false, event);
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
index 9e889c3f1ee..56631ceda87 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -201,9 +201,10 @@ describe('KebabToggle', () => {
 });
 
 describe('API', () => {
-  test('click on item', () => {
+  test('click on item', async () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <Dropdown
@@ -214,7 +215,7 @@ describe('API', () => {
       />
     );
 
-    userEvent.click(screen.getByText('Link')); // "Link" is the text of the first item
+    await user.click(screen.getByText('Link')); // "Link" is the text of the first item
     expect(mockToggle.mock.calls).toHaveLength(0);
     expect(mockSelect.mock.calls).toHaveLength(1);
   });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx
index 06faa01b014..606cf059d09 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggle.test.tsx
@@ -8,8 +8,9 @@ import { DropdownContext } from '../dropdownConstants';
 
 describe('DropdownToggle', () => {
   describe('API', () => {
-    test('click on closed', () => {
+    test('click on closed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <DropdownToggle onToggle={mockToggle} parentRef={document.createElement('div')}>
@@ -17,12 +18,13 @@ describe('DropdownToggle', () => {
         </DropdownToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle.mock.calls[0][0]).toBe(true);
     });
 
-    test('click on opened', () => {
+    test('click on opened', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
@@ -30,7 +32,7 @@ describe('DropdownToggle', () => {
         </DropdownToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle.mock.calls[0][0]).toBe(false);
     });
 
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
index 5d8a6633211..6c7afdcfda0 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx
@@ -20,11 +20,12 @@ test('passing class', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('checkbox passes value and event to onClick handler', () => {
+test('checkbox passes value and event to onClick handler', async () => {
   const onClickMock = jest.fn();
+  const user = userEvent.setup();
 
   render(<DropdownToggleAction id="action" aria-label="acton" onClick={onClickMock} />);
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(onClickMock).toHaveBeenCalled();
 });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
index 1db74919a87..ec57d375d65 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx
@@ -54,10 +54,12 @@ describe('DropdownToggleCheckbox', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('checkbox passes value and event to onChange handler', () => {
+  test('checkbox passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
 
-    userEvent.click(screen.getByRole('checkbox'));
+    await user.click(screen.getByRole('checkbox'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 });
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
index 97b98342b14..b838f08b31b 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
@@ -18,12 +18,13 @@ test('Renders ExpandableSection expanded', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('ExpandableSection onToggle called', () => {
+test('ExpandableSection onToggle called', async () => {
   const mockfn = jest.fn();
+  const user = userEvent.setup();
 
   render(<ExpandableSection onToggle={mockfn}> test </ExpandableSection>);
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(mockfn.mock.calls).toHaveLength(1);
 });
 
diff --git a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
index edc77aaab83..a3c66f2c470 100644
--- a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
@@ -216,7 +216,8 @@ describe('FormGroup', () => {
     expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
   });
 
-  test('input should receive focus when clicking text label', () => {
+  test('input should receive focus when clicking text label', async () => {
+    const user = userEvent.setup();
     render(
       <FormGroup label="label" fieldId="native-label-element">
         <input id="native-label-element" />
@@ -226,12 +227,13 @@ describe('FormGroup', () => {
     const labelElement = screen.getByText('label');
     const input = screen.getByRole('textbox');
 
-    userEvent.click(labelElement);
+    await user.click(labelElement);
     expect(input).toHaveFocus();
   });
 
   describe('With multiple inputs per group', () => {
-    test('inputs should not receive focus when clicking text label', () => {
+    test('inputs should not receive focus when clicking text label', async () => {
+      const user = userEvent.setup();
       render(
         <FormGroup label="label" fieldId="span-label-element" role="group">
           <input id="span-label-element" />
@@ -242,7 +244,7 @@ describe('FormGroup', () => {
       const labelElement = screen.getByText('label');
       const inputs = screen.getAllByRole('textbox');
 
-      userEvent.click(labelElement);
+      await user.click(labelElement);
       inputs.forEach(input => {
         expect(input).not.toHaveFocus();
       });
diff --git a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
index a8aad0a2f65..96cb7afaf09 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
+++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
@@ -174,16 +174,16 @@ describe('FormSelect', () => {
     expect(screen.getByLabelText('required FormSelect')).toHaveAttribute('required');
   });
 
-  test('FormSelect passes value and event to onChange handler', () => {
+  test('FormSelect passes value and event to onChange handler', async () => {
     const myMock = jest.fn();
-
+    const user = userEvent.setup();
     render(
       <FormSelect onChange={myMock} aria-label="Some label">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
 
-    userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr');
+    await user.selectOptions(screen.getByLabelText('Some label'), 'Mr');
 
     expect(myMock).toHaveBeenCalled();
     expect(myMock.mock.calls[0][0]).toEqual('mr');
diff --git a/packages/react-core/src/components/Label/__tests__/Label.test.tsx b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
index 9e62765bbc1..4f61a6707ae 100644
--- a/packages/react-core/src/components/Label/__tests__/Label.test.tsx
+++ b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
@@ -91,7 +91,9 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('editable label', () => {
+  test('editable label', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <Label onClose={jest.fn()} onEditCancel={jest.fn()} onEditComplete={jest.fn()} isEditable>
         Something
@@ -103,7 +105,7 @@ describe('Label', () => {
     expect(button).toBeInTheDocument();
     expect(asFragment()).toMatchSnapshot();
 
-    userEvent.click(button);
+    await user.click(button);
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/react-core/src/components/LabelGroup/__tests__/LabelGroup.test.tsx b/packages/react-core/src/components/LabelGroup/__tests__/LabelGroup.test.tsx
index f56cc15c2c7..3576322730d 100644
--- a/packages/react-core/src/components/LabelGroup/__tests__/LabelGroup.test.tsx
+++ b/packages/react-core/src/components/LabelGroup/__tests__/LabelGroup.test.tsx
@@ -34,7 +34,9 @@ describe('LabelGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('label group expanded', () => {
+  test('label group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <LabelGroup>
         <Label>1</Label>
@@ -47,7 +49,7 @@ describe('LabelGroup', () => {
 
     expect(showMoreButton.textContent).toBe('1 more');
 
-    userEvent.click(showMoreButton);
+    await user.click(showMoreButton);
     expect(showMoreButton.textContent).toBe('Show Less');
   });
 
diff --git a/packages/react-core/src/components/LoginPage/__tests__/LoginForm.test.tsx b/packages/react-core/src/components/LoginPage/__tests__/LoginForm.test.tsx
index 88b287f8e6b..17bcd979b1d 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/LoginForm.test.tsx
+++ b/packages/react-core/src/components/LoginPage/__tests__/LoginForm.test.tsx
@@ -11,30 +11,33 @@ describe('LoginForm', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should call onChangeUsername callback', () => {
+  test('should call onChangeUsername callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeUsername={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Username'), 'updatedUserName');
+    await user.type(screen.getByText('Username'), 'updatedUserName');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangePassword callback', () => {
+  test('should call onChangePassword callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangePassword={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Password'), 'updatedPassword');
+    await user.type(screen.getByText('Password'), 'updatedPassword');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangeRememberMe callback', () => {
+  test('should call onChangeRememberMe callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeRememberMe={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.click(screen.getByLabelText('Remember me'));
+    await user.click(screen.getByLabelText('Remember me'));
     expect(mockFn).toHaveBeenCalled();
   });
 
diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
index 41a7f92c730..0d80d0ff46a 100644
--- a/packages/react-core/src/components/Modal/Modal.tsx
+++ b/packages/react-core/src/components/Modal/Modal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { canUseDOM, KEY_CODES, PickOptional } from '../../helpers';
+import { canUseDOM, KeyTypes, PickOptional } from '../../helpers';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
@@ -120,7 +120,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
   handleEscKeyClick = (event: KeyboardEvent): void => {
     const { onEscapePress } = this.props;
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       onEscapePress ? onEscapePress(event) : this.props.onClose();
     }
   };
diff --git a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
index 8731928a472..a7f6c9ec046 100644
--- a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
+++ b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
@@ -7,6 +7,7 @@ import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 import { Modal } from '../Modal';
+import { KeyTypes } from '../../../helpers';
 
 jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
@@ -24,10 +25,12 @@ describe('Modal', () => {
     expect(document.createElement).toHaveBeenCalledWith('div');
   });
 
-  test('modal closes with escape', () => {
+  test('modal closes with escape', async () => {
+    const user = userEvent.setup();
+    
     render(<Modal {...props} isOpen appendTo={document.body} />);
 
-    userEvent.type(screen.getByText(props.title), '{esc}');
+    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 
diff --git a/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx b/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx
index ef22c97a93f..13339dfd28f 100644
--- a/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx
+++ b/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx
@@ -6,12 +6,13 @@ import userEvent from '@testing-library/user-event';
 import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
 
 describe('ModalBoxCloseButton', () => {
-  test('onClose called when clicked', () => {
+  test('onClose called when clicked', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
index 42c1b5e49cf..1833524f23a 100644
--- a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
+++ b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
@@ -56,7 +56,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Default Nav List - Trigger item active update', () => {
+  test('Default Nav List - Trigger item active update', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
@@ -69,7 +71,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Link 2'));
+    await user.click(screen.getByText('Link 2'));
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -90,8 +92,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Expandable Nav verify onExpand', () => {
+  test('Expandable Nav verify onExpand', async () => {
     const onExpand = jest.fn();
+    const user = userEvent.setup();
 
     renderNav(
       <Nav>
@@ -107,12 +110,13 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onExpand).toHaveBeenCalled();
   });
 
-  test('Expandable Nav List - Trigger toggle', () => {
+  test('Expandable Nav List - Trigger toggle', async () => {
     window.location.hash = '#link2';
+    const user = userEvent.setup();
 
     const { asFragment } = renderNav(
       <Nav>
@@ -128,7 +132,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Section 1'));
+    await user.click(screen.getByText('Section 1'));
     expect(asFragment()).toMatchSnapshot();
   });
 
diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
index f74f09cc0d0..80e04f4ad71 100644
--- a/packages/react-core/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -5,7 +5,7 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { InputGroup } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
-import { KEY_CODES, ValidatedOptions } from '../../helpers';
+import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
@@ -56,11 +56,11 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
 
 const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React.KeyboardEvent<HTMLInputElement>) => {
-  if (KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
+  if (KeyTypes.ArrowUp === event.key && args.onPlus) {
     event.preventDefault();
     args.onPlus(null, args.inputName);
   }
-  if (KEY_CODES.ARROW_DOWN === event.keyCode && args.onMinus) {
+  if (KeyTypes.ArrowDown === event.key && args.onMinus) {
     event.preventDefault();
     args.onMinus(null, args.inputName);
   }
diff --git a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx
index 1a9a4e09de3..3f079d3fa59 100644
--- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx
+++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { NumberInput } from '../NumberInput';
 import userEvent from '@testing-library/user-event';
 
@@ -101,71 +101,96 @@ describe('numberInput', () => {
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
-  test('calls onChange callback when input changes', () => {
+  test('calls onChange callback when input changes', async () => {
     const onChangeMock = jest.fn();
+    const user = userEvent.setup();
+
     render(<NumberInput onChange={onChangeMock}>55</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '55');
+    await user.type(input, '55');
 
     expect(onChangeMock).toHaveBeenCalledTimes(2);
   });
 
-  test('does not call onBlur callback when input does not lose focus', () => {
+  test('does not call onBlur callback when input does not lose focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  test('calls onBlur callback when input loses focus', () => {
+  test('calls onBlur callback when input loses focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
-  test('removes leading zeros from a positive whole number', () => {
+  test('removes leading zeros from a positive whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={10} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '010' } });
     expect(input).toHaveDisplayValue('010');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('10');
   });
 
-  test('removes leading zeros from a negative whole number', () => {
+  test('removes leading zeros from a negative whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={-18} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '-018' } });
     expect(input).toHaveDisplayValue('-018');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('-18');
   });
 
-  test('removes leading zeros from a decimal number', () => {
+  test('removes leading zeros from a decimal number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={47.01} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '047.01' } });
     expect(input).toHaveDisplayValue('047.01');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('47.01');
   });
diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx
index dd1b4a55e34..fa6ae1dcbfb 100644
--- a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx
+++ b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
 import { DropdownContext } from '../Dropdown';
 
@@ -96,10 +96,9 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       parentRef &&
       parentRef.current &&
       parentRef.current.contains(event.target as Node)
diff --git a/packages/react-core/src/components/Pagination/Navigation.tsx b/packages/react-core/src/components/Pagination/Navigation.tsx
index 8595ce9cd65..9abd2508fe4 100644
--- a/packages/react-core/src/components/Pagination/Navigation.tsx
+++ b/packages/react-core/src/components/Pagination/Navigation.tsx
@@ -8,7 +8,7 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import { Button, ButtonVariant } from '../Button';
 import { OnSetPage } from './Pagination';
 import { pluralize, PickOptional } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the container */
@@ -113,7 +113,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     lastPage: number,
     onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
   ): void {
-    if (event.keyCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
       onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
       this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
index 24716b2a1c0..29f5347134b 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Pagination, PaginationVariant } from '../index';
+import { KeyTypes } from '../../../helpers';
 
 describe('Pagination', () => {
   describe('component render', () => {
@@ -117,166 +118,204 @@ describe('Pagination', () => {
     describe('onSetPage', () => {
       const onSetPage = jest.fn();
 
-      test('should call first', () => {
+      test('should call first', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call previous', () => {
+      test('should call previous', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call next', () => {
+      test('should call next', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call last', () => {
+      test('should call last', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input', () => {
+      test('should call input', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '1');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '1');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input wrong value', () => {
+      test('should call input wrong value', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, 'a');
-        userEvent.type(input, '{enter}');
+        await user.type(input, 'a');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input huge page number', () => {
+      test('should call input huge page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input small page number', () => {
+      test('should call input small page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '-10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '-10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).not.toHaveBeenCalled();
       });
     });
 
     describe('onFirst', () => {
       const onFirst = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onFirstClick={onFirst} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).not.toHaveBeenCalled();
       });
     });
 
     describe('onLast', () => {
       const onLast = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onLastClick={onLast} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).not.toHaveBeenCalled();
       });
     });
 
     describe('onPrevious', () => {
       const onPrevious = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPreviousClick={onPrevious} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).not.toHaveBeenCalled();
       });
     });
 
     describe('onNext', () => {
       const onNext = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onNextClick={onNext} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onNext).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onNext).not.toHaveBeenCalled();
       });
     });
 
     describe('onPerPage', () => {
       const onPerPage = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).not.toHaveBeenCalled();
       });
diff --git a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx
index 89914eba7ac..767506d99f2 100644
--- a/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx
+++ b/packages/react-core/src/components/Radio/__tests__/Radio.test.tsx
@@ -73,10 +73,12 @@ describe('Radio', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Radio passes value and event to onChange handler', () => {
+  test('Radio passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<Radio id="check" {...props} aria-label="check" name="check" />);
 
-    userEvent.click(screen.getByRole('radio'));
+    await user.click(screen.getByRole('radio'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 
diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
index c78a69a307f..a0c1b195c61 100644
--- a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
+++ b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId, KEY_CODES } from '../../helpers';
+import { GenerateId, KeyTypes } from '../../helpers';
 import { SearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -107,10 +107,9 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isSearchMenuOpen &&
-      keyCode === KEY_CODES.ESCAPE_KEY &&
+      event.key === KeyTypes.Escape &&
       parentRef &&
       parentRef.current.contains(event.target as Node)
     ) {
diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
index b25f1583085..1eeaeec013f 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
+++ b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
@@ -33,20 +33,22 @@ describe('SearchInput', () => {
     expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument();
   });
 
-  test('navigable search results', () => {
+  test('navigable search results', async () => {
+    const user = userEvent.setup();
+
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
     expect(input.querySelector('.pf-c-text-input-group__group')).toBeInTheDocument();
     expect(input.querySelector('.pf-c-badge')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
     expect(props.onNextClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+    await user.click(screen.getByRole('button', { name: 'Reset' }));
     expect(props.onClear).toHaveBeenCalled();
   });
 
@@ -57,7 +59,9 @@ describe('SearchInput', () => {
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
-  test('advanced search', () => {
+  test('advanced search', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         attributes={[
@@ -72,13 +76,15 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes', () => {
+  test('advanced search with custom attributes', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         data-testid="test-id"
@@ -101,45 +107,37 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes and appendTo="inline', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo='inline'
-      />
+  test('advanced search with custom attributes and appendTo="inline', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'));
   });
 
-  test('advanced search with custom attributes and appendTo external DOM element', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo={document.body}
-      />
+  test('advanced search with custom attributes and appendTo external DOM element', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
-    expect(document.body).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'));
+    expect(document.body).toContainElement(screen.getByText('test'));
   });
 });
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index 0c2789a4311..d74704b59d5 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -243,7 +243,10 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
     </div>
     <span
       class=""
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
     >
       <div
         class="pf-c-panel pf-m-raised"
diff --git a/packages/react-core/src/components/Select/__tests__/Select.test.tsx b/packages/react-core/src/components/Select/__tests__/Select.test.tsx
index 4fe1f28929f..e9e681b9545 100644
--- a/packages/react-core/src/components/Select/__tests__/Select.test.tsx
+++ b/packages/react-core/src/components/Select/__tests__/Select.test.tsx
@@ -7,6 +7,7 @@ import { Select } from '../Select';
 import { SelectOption, SelectOptionObject } from '../SelectOption';
 import { SelectGroup } from '../SelectGroup';
 import { SelectVariant, SelectDirection } from '../selectConstants';
+import { KeyTypes } from '../../../helpers';
 
 class User implements SelectOptionObject {
   private firstName: string;
@@ -107,7 +108,7 @@ describe('Select', () => {
   });
 
   describe('custom select filter', () => {
-    test('filters properly', () => {
+    test('filters properly', async () => {
       const customFilter = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
         let input: RegExp;
         try {
@@ -121,6 +122,8 @@ describe('Select', () => {
             : selectOptions;
         return typeaheadFilteredChildren;
       };
+      const user = userEvent.setup();
+
       render(
         <Select
           toggleId="custom-select-filters"
@@ -136,7 +139,7 @@ describe('Select', () => {
         </Select>
       );
 
-      userEvent.type(screen.getByTestId('test-id').querySelector('input'), 'r');
+      await user.type(screen.getByTestId('test-id').querySelector('input'), 'r');
 
       expect(screen.getByText('Mr')).toBeInTheDocument();
       expect(screen.getByText('Mrs')).toBeInTheDocument();
@@ -333,7 +336,9 @@ describe('typeahead select', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('test select existing option on a non-creatable select', () => {
+  test('test select existing option on a non-creatable select', async () => {
+    const user = userEvent.setup();
+
     render(
       <Select variant={SelectVariant.typeahead} onToggle={jest.fn()} isOpen ouiaId="test-id">
         {selectOptions}
@@ -341,8 +346,8 @@ describe('typeahead select', () => {
     );
 
     const input = screen.getByTestId('test-id').querySelector('input');
-    userEvent.type(input, 'Other');
-    userEvent.type(input, '{enter}');
+    await user.type(input, 'Other');
+    await user.type(input, `{${KeyTypes.Enter}}`);
 
     expect(screen.getByText('Other')).toBeVisible();
   });
@@ -392,9 +397,10 @@ describe('typeahead multi select', () => {
 });
 
 describe('API', () => {
-  test('click on item', () => {
+  test('click on item', async () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isOpen ouiaId="test-id">
@@ -402,7 +408,7 @@ describe('API', () => {
       </Select>
     );
 
-    userEvent.click(screen.getByRole('option', { name: 'Mr' }));
+    await user.click(screen.getByRole('option', { name: 'Mr' }));
 
     expect(mockToggle).not.toHaveBeenCalled();
     expect(mockSelect).toHaveBeenCalled();
@@ -517,7 +523,9 @@ describe('select with placeholder', () => {
   });
 });
 
-test('applies focus styling to the create option when reached via keyboard navigation', () => {
+test('applies focus styling to the create option when reached via keyboard navigation', async () => {
+  const user = userEvent.setup();
+  
   render(
     <Select
       variant={SelectVariant.typeahead}
@@ -530,7 +538,7 @@ test('applies focus styling to the create option when reached via keyboard navig
   );
 
   const input = screen.getByRole('textbox');
-  userEvent.type(input, 'a{arrowdown}');
+  await user.type(input, `a{${KeyTypes.ArrowDown}}`);
 
   const createOption = screen.getByRole('option', { name: 'Create "a"' });
 
diff --git a/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx b/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx
index 7414b87a657..a749a568519 100644
--- a/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx
+++ b/packages/react-core/src/components/Select/__tests__/SelectToggle.test.tsx
@@ -7,20 +7,24 @@ import { SelectToggle } from '../SelectToggle';
 
 describe('SelectToggle', () => {
   describe('API', () => {
-    test('click on closed', () => {
+    test('click on closed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={{ current: document.createElement('div') }}>
           Select
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object));
     });
 
-    test('click on opened', () => {
+    test('click on opened', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle
           id="Select Toggle"
@@ -32,12 +36,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('click on document', () => {
+    test('click on document', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -50,12 +55,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('on click outside has been removed', () => {
+    test('on click outside has been removed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -68,7 +74,7 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).not.toHaveBeenCalled();
     });
   });
diff --git a/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx b/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx
index 84fae6cd71f..185c4828cf2 100644
--- a/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx
+++ b/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx
@@ -40,12 +40,13 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('onSelect is called when item is selected', () => {
+  test('onSelect is called when item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 
@@ -54,12 +55,13 @@ describe('SimpleList', () => {
     expect(screen.getAllByRole('link').length).toEqual(3);
   });
 
-  test('onSelect is called when anchor item is selected', () => {
+  test('onSelect is called when anchor item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 });
diff --git a/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx b/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx
index cf16c5dc21e..867545ff936 100644
--- a/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx
+++ b/packages/react-core/src/components/Switch/__tests__/Switch.test.tsx
@@ -75,10 +75,12 @@ describe('Switch', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('switch passes value and event to onChange handler', () => {
+  test('switch passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
-    userEvent.click(screen.getByLabelText('Switch label'));
+    await user.click(screen.getByLabelText('Switch label'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 
diff --git a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
index 2a906eade4c..9146785bbbc 100644
--- a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
+++ b/packages/react-core/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();
 });
diff --git a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
index 192a051e59a..4570072d929 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/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));
   });
 
diff --git a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
index 8ef49ad49e9..92b5c52af20 100644
--- a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/packages/react-core/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));
   });
 
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
index 6fc16e3c627..975d22a45af 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
+++ b/packages/react-core/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);
   });
diff --git a/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx b/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx
index 35afb584271..f078c009b05 100644
--- a/packages/react-core/src/components/TimePicker/__tests__/TimePicker.test.tsx
+++ b/packages/react-core/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();
     });
   });
diff --git a/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx b/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx
index 31194621ab9..28db2d032fd 100644
--- a/packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx
+++ b/packages/react-core/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));
   });
 
diff --git a/packages/react-core/src/components/Tooltip/Tooltip.tsx b/packages/react-core/src/components/Tooltip/Tooltip.tsx
index 6ab8a21efa2..4087decd35f 100644
--- a/packages/react-core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react-core/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 {
diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx
index cd1983f1678..1230ade4ebd 100644
--- a/packages/react-core/src/components/Wizard/Wizard.tsx
+++ b/packages/react-core/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) {
diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
index cccc9f53da2..5923b300850 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/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();
 });
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 25ec28d95f0..1ee714bde96 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/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,
diff --git a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
index c9c75240783..e0c36ef688b 100644
--- a/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/next/components/Wizard/__tests__/Wizard.test.tsx
@@ -202,7 +202,8 @@ describe('Wizard', () => {
     expect(wizard).toHaveStyle('width: 500px');
   });
 
-  it('calls onNavByIndex on nav item click', () => {
+  it('calls onNavByIndex on nav item click', async () => {
+    const user = userEvent.setup();
     const onNavByIndex = jest.fn();
 
     render(
@@ -212,11 +213,12 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
     expect(onNavByIndex).toHaveBeenCalled();
   });
 
-  it('calls onNext and not onSave on next button click when not on the last step', () => {
+  it('calls onNext and not onSave on next button click when not on the last step', async () => {
+    const user = userEvent.setup();
     const onNext = jest.fn();
     const onSave = jest.fn();
 
@@ -227,13 +229,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onNext).toHaveBeenCalled();
     expect(onSave).not.toHaveBeenCalled();
   });
 
-  it('calls onBack on back button click', () => {
+  it('calls onBack on back button click', async () => {
+    const user = userEvent.setup();
     const onBack = jest.fn();
 
     render(
@@ -243,13 +246,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Back' }));
 
     expect(onBack).toHaveBeenCalled();
   });
 
-  it('calls onSave and not onClose on next button click when on the last step', () => {
+  it('calls onSave and not onClose on next button click when on the last step', async () => {
+    const user = userEvent.setup();
     const onSave = jest.fn();
     const onClose = jest.fn();
 
@@ -260,14 +264,15 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onSave).toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('calls onClose when onSave is not specified on next button click when on the last step', () => {
+  it('calls onClose when onSave is not specified on next button click when on the last step', async () => {
+    const user = userEvent.setup();
     const onClose = jest.fn();
 
     render(
@@ -277,13 +282,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onClose).toHaveBeenCalled();
   });
 
-  it('calls onClose on cancel link click', () => {
+  it('calls onClose on cancel link click', async () => {
+    const user = userEvent.setup();
     const onClose = jest.fn();
 
     render(
@@ -292,7 +298,7 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/react-integration/cypress/integration/drawerresize.spec.ts b/packages/react-integration/cypress/integration/drawerresize.spec.ts
index 56f1d1cf716..434e8cae7a6 100644
--- a/packages/react-integration/cypress/integration/drawerresize.spec.ts
+++ b/packages/react-integration/cypress/integration/drawerresize.spec.ts
@@ -16,9 +16,9 @@ describe('Drawer Resize Demo Test', () => {
       .trigger('mouseup', { force: true });
     cy.get('.pf-c-drawer__panel').should('have.css', 'overflow-anchor', 'none');
     cy.get('.pf-c-drawer__splitter')
-      .trigger('keydown', { keyCode: 32, which: 32 })
-      .trigger('keydown', { keyCode: 40, which: 40 })
-      .trigger('keydown', { keyCode: 40, which: 40 })
-      .trigger('keydown', { keyCode: 40, which: 40 });
+      .trigger('keydown', { key: ' ' })
+      .type('{downArrow}')
+      .type('{downArrow}')
+      .type('{downArrow}');
   });
 });
diff --git a/packages/react-integration/cypress/integration/dropdown.spec.ts b/packages/react-integration/cypress/integration/dropdown.spec.ts
index d04ff057e25..b48fe68b6f5 100644
--- a/packages/react-integration/cypress/integration/dropdown.spec.ts
+++ b/packages/react-integration/cypress/integration/dropdown.spec.ts
@@ -28,23 +28,23 @@ describe('Dropdown Demo Test', () => {
   // When toggle is collapsed:
   it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
     cy.clock();
-    cy.get('#dropdown > button').trigger('keydown', { keyCode: 13 });
+    cy.get('#dropdown > button').trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown').should('have.class', 'pf-m-expanded');
     cy.tick(1);
     cy.focused().contains('Link');
     // When toggle is expanded, enter closes panel
-    cy.get('#toggle-id').trigger('keydown', { keyCode: 13 });
+    cy.get('#toggle-id').trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
   it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#dropdown > button').trigger('keydown', { keyCode: 32 });
+    cy.get('#dropdown > button').trigger('keydown', { key: ' ' });
     cy.get('#dropdown').should('have.class', 'pf-m-expanded');
     cy.focused().contains('Link');
     // When toggle is expanded, space closes panel and focus stays on the toggle
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
     cy.focused().contains('Dropdown');
   });
@@ -52,7 +52,7 @@ describe('Dropdown Demo Test', () => {
   // Panel - Escape User action
   it('Esc closes planel, places focus on the toggle', () => {
     cy.get('#dropdown > button').click();
-    cy.get('#toggle-id').trigger('keydown', { keyCode: 27 });
+    cy.get('#toggle-id').type('{esc}');
     cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
     cy.focused().contains('Dropdown');
   });
@@ -77,13 +77,13 @@ describe('Dropdown Demo Test', () => {
     cy.get('#dropdown > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
   it('When focus is in panel, space places focus on toggle', () => {
     cy.get('#dropdown > button').click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { keyCode: 32 });
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
     cy.focused().should('have.class', 'pf-c-dropdown__toggle');
   });
 
@@ -91,7 +91,7 @@ describe('Dropdown Demo Test', () => {
   it('Tab closes panel, focus stays on toggle', () => {
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 9 });
+      .trigger('keydown', { key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
@@ -99,9 +99,10 @@ describe('Dropdown Demo Test', () => {
   });
 
   it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { shiftKey: true, keyCode: 9, which: 9 });
+      .trigger('keydown', { shiftKey: true, key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
@@ -134,25 +135,25 @@ describe('Action Dropdown Demo Test', () => {
     cy.clock();
     cy.get('#action-dropdown button')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
     cy.tick(1);
     cy.focused().contains('Action');
     // When toggle is expanded, enter closes panel
-    cy.get('#action-toggle-id').trigger('keydown', { keyCode: 13 });
+    cy.get('#action-toggle-id').trigger('keydown', { key: 'Enter' });
     cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
   it('Space opens panel, places focus on first element in panel that can receive focus', () => {
     cy.get('#action-dropdown button')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#action-dropdown').should('have.class', 'pf-m-expanded');
     cy.focused().contains('Action');
     // When toggle is expanded, space closes panel and focus stays on the toggle
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -161,7 +162,7 @@ describe('Action Dropdown Demo Test', () => {
     cy.get('#action-dropdown button')
       .last()
       .click();
-    cy.get('#action-toggle-id').trigger('keydown', { keyCode: 27 });
+    cy.get('#action-toggle-id').type('{esc}');
     cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -191,7 +192,7 @@ describe('Action Dropdown Demo Test', () => {
       .click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -199,7 +200,7 @@ describe('Action Dropdown Demo Test', () => {
     cy.get('#action-dropdown button')
       .last()
       .click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { keyCode: 32 });
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
     cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
   });
 
@@ -207,16 +208,17 @@ describe('Action Dropdown Demo Test', () => {
   it('Tab closes panel, focus stays on toggle', () => {
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 9 });
+      .trigger('keydown', { key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
   });
 
   it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { shiftKey: true, keyCode: 9, which: 9 });
+      .trigger('keydown', { shiftKey: true, key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
@@ -248,25 +250,25 @@ describe('Cog Dropdown Demo Test', () => {
     cy.clock();
     cy.get('#cog-dropdown button')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
     cy.tick(1);
     cy.focused().contains('Action');
     // When toggle is expanded, enter closes panel
-    cy.get('#cog-toggle-id').trigger('keydown', { keyCode: 13 });
+    cy.get('#cog-toggle-id').trigger('keydown', { key: 'Enter' });
     cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
   it('Space opens panel, places focus on first element in panel that can receive focus', () => {
     cy.get('#cog-dropdown button')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded');
     cy.focused().contains('Action');
     // When toggle is expanded, space closes panel and focus stays on the toggle
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -275,7 +277,7 @@ describe('Cog Dropdown Demo Test', () => {
     cy.get('#cog-dropdown button')
       .last()
       .click();
-    cy.get('#cog-toggle-id').trigger('keydown', { keyCode: 27 });
+    cy.get('#cog-toggle-id').type('{esc}');
     cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -305,7 +307,7 @@ describe('Cog Dropdown Demo Test', () => {
       .click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded');
   });
 
@@ -313,7 +315,7 @@ describe('Cog Dropdown Demo Test', () => {
     cy.get('#cog-dropdown button')
       .last()
       .click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { keyCode: 32 });
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
     cy.focused().should('have.class', 'pf-c-dropdown__toggle-button');
   });
 
@@ -321,16 +323,17 @@ describe('Cog Dropdown Demo Test', () => {
   it('Tab closes panel, focus stays on toggle', () => {
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 9 });
+      .trigger('keydown', { key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
   });
 
   it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { shiftKey: true, keyCode: 9, which: 9 });
+      .trigger('keydown', { shiftKey: true, key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
@@ -367,23 +370,23 @@ describe('Dropdown with menu on document body demo test', () => {
   // When toggle is collapsed:
   it('Enter opens panel, places focus on first element in panel that can receive focus', () => {
     cy.clock();
-    cy.get('#dropdown-document-body > button').trigger('keydown', { keyCode: 13 });
+    cy.get('#dropdown-document-body > button').trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
     cy.tick(1);
     cy.focused().contains('Link');
     // When toggle is expanded, enter closes panel
-    cy.get('#toggle-id-document-body').trigger('keydown', { keyCode: 13 });
+    cy.get('#toggle-id-document-body').trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
   });
 
   it('Space opens panel, places focus on first element in panel that can receive focus', () => {
-    cy.get('#dropdown-document-body > button').trigger('keydown', { keyCode: 32 });
+    cy.get('#dropdown-document-body > button').trigger('keydown', { key: ' ' });
     cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded');
     cy.focused().contains('Link');
     // When toggle is expanded, space closes panel and focus stays on the toggle
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 32 });
+      .trigger('keydown', { key: ' ' });
     cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
     cy.focused().contains('Dropdown');
   });
@@ -391,7 +394,7 @@ describe('Dropdown with menu on document body demo test', () => {
   // Panel - Escape User action
   it('Esc closes planel, places focus on the toggle', () => {
     cy.get('#dropdown-document-body > button').click();
-    cy.get('#toggle-id-document-body').trigger('keydown', { keyCode: 27 });
+    cy.get('#toggle-id-document-body').type('{esc}');
     cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
     cy.focused().contains('Dropdown');
   });
@@ -416,13 +419,13 @@ describe('Dropdown with menu on document body demo test', () => {
     cy.get('#dropdown-document-body > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded');
   });
 
   it('When focus is in panel, space places focus on toggle', () => {
     cy.get('#dropdown-document-body > button').click();
-    cy.get('.pf-c-dropdown__menu').trigger('keydown', { keyCode: 32 });
+    cy.get('.pf-c-dropdown__menu').trigger('keydown', { key: ' ' });
     cy.focused().should('have.class', 'pf-c-dropdown__toggle');
   });
 
@@ -430,7 +433,7 @@ describe('Dropdown with menu on document body demo test', () => {
   it('Tab closes panel, focus stays on toggle', () => {
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { keyCode: 9 });
+      .trigger('keydown', { key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
@@ -438,9 +441,10 @@ describe('Dropdown with menu on document body demo test', () => {
   });
 
   it('Shift + Tab closes panel, focus stays on toggle', () => {
+    cy.get('#dropdown > button').click();
     cy.get('.pf-c-dropdown__menu-item')
       .last()
-      .trigger('keydown', { shiftKey: true, keyCode: 9, which: 9 });
+      .trigger('keydown', { shiftKey: true, key: 'Tab' });
     cy.get('.pf-c-dropdown__toggle')
       .last()
       .should('not.have.class', 'pf-m-expanded');
diff --git a/packages/react-integration/cypress/integration/modal.spec.ts b/packages/react-integration/cypress/integration/modal.spec.ts
index df9c000f173..5f5222c0847 100644
--- a/packages/react-integration/cypress/integration/modal.spec.ts
+++ b/packages/react-integration/cypress/integration/modal.spec.ts
@@ -19,7 +19,7 @@ describe('Modal Test', () => {
           .then(() => {
             cy.wrap(modalButton).click();
             cy.get('.pf-c-modal-box').should('exist');
-            cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+            cy.get('body').type('{esc}');
             cy.get('.pf-c-modal-box').should('not.exist');
           });
       });
@@ -42,7 +42,7 @@ describe('Modal Test', () => {
         .then(() => {
           cy.wrap(modalButton).click();
           cy.get('.pf-c-modal-box').should('exist');
-          cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+          cy.get('body').type('{esc}');
           cy.get('.pf-c-modal-box').should('not.exist');
           cy.get('#showCustomEscapeModalButton.customEscapePressed').should('exist');
         });
@@ -82,7 +82,7 @@ describe('Modal Test', () => {
 
     cy.get('.pf-c-modal-box').should('exist');
     // press escape key
-    cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+    cy.get('body').type('{esc}');
     cy.get('.pf-c-modal-box').should('not.exist');
   });
 });
diff --git a/packages/react-integration/cypress/integration/notificationdrawerbasic.spec.ts b/packages/react-integration/cypress/integration/notificationdrawerbasic.spec.ts
index ecb331a4ec2..faefd1c26aa 100644
--- a/packages/react-integration/cypress/integration/notificationdrawerbasic.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawerbasic.spec.ts
@@ -79,7 +79,7 @@ describe('Notification Drawer Basic Demo Test', () => {
     // press Enter on toggle button, check whether the dropdown menu exsit and whether it focuses on the first item
     // then press Tab on toggle button, check whether the dropdown menu is closed
     cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 13 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
       cy.get('#notification-0')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('exist');
@@ -87,7 +87,7 @@ describe('Notification Drawer Basic Demo Test', () => {
         .find('.pf-c-dropdown__menu-item')
         .first()
         .should('be.focused');
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 9 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
       cy.get('#notification-0')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('not.exist');
@@ -95,7 +95,7 @@ describe('Notification Drawer Basic Demo Test', () => {
     // Verify the list item header toggle button keyboard interactivity opens/closes dropdown menu
     // the method is the same as above
     cy.get('#toggle-id-1').then((toggleButton: JQuery<HTMLButtonElement>) => {
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 13 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
       cy.get('#notification-1')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('exist');
@@ -103,7 +103,7 @@ describe('Notification Drawer Basic Demo Test', () => {
         .find('.pf-c-dropdown__menu-item')
         .first()
         .should('be.focused');
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 9 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
       cy.get('#notification-1')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('not.exist');
diff --git a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
index 959b27fa83e..1efb2874858 100644
--- a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
@@ -89,7 +89,7 @@ describe('Notification Drawer Groups Demo Test', () => {
     // press Enter on toggle button, check whether the dropdown menu exsit and whether it focuses on the first item
     // then press Tab on toggle button, check whether the dropdown menu is closed
     cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 13 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
       cy.get('#notification-0')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('exist');
@@ -97,7 +97,7 @@ describe('Notification Drawer Groups Demo Test', () => {
         .find('.pf-c-dropdown__menu-item')
         .first()
         .should('be.focused');
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 9 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
       cy.get('#notification-0')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('not.exist');
@@ -109,13 +109,13 @@ describe('Notification Drawer Groups Demo Test', () => {
       .should('have.class', 'pf-m-expanded');
     cy.get('.pf-c-notification-drawer__group-toggle')
       .first()
-      .trigger('keydown', { keyCode: 13 });
+      .trigger('keydown', { key: 'Enter' });
     cy.get('.pf-c-notification-drawer__group')
       .first()
       .should('not.have.class', 'pf-m-expanded');
     // Verify the list item header toggle button keyboard interactivity opens/closes dropdown menu
     cy.get('#toggle-id-9').then((toggleButton: JQuery<HTMLButtonElement>) => {
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 13 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
       cy.get('#notification-9')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('exist');
@@ -124,7 +124,7 @@ describe('Notification Drawer Groups Demo Test', () => {
         .first()
         .find('.pf-c-dropdown__menu-item')
         .should('be.focused');
-      cy.wrap(toggleButton).trigger('keydown', { keyCode: 9 });
+      cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
       cy.get('#notification-9')
         .find('.pf-c-dropdown__menu.pf-m-align-right')
         .should('not.exist');
diff --git a/packages/react-integration/cypress/integration/optionsmenu.spec.ts b/packages/react-integration/cypress/integration/optionsmenu.spec.ts
index e8148048bae..b48f08017dd 100644
--- a/packages/react-integration/cypress/integration/optionsmenu.spec.ts
+++ b/packages/react-integration/cypress/integration/optionsmenu.spec.ts
@@ -48,7 +48,7 @@ describe('Login Page Demo Test', () => {
         cy.get('#options-menu-modified-example.pf-m-expanded').should('not.exist');
         // Accessibility Tests:
         // Press Enter to open the menu
-        cy.wrap(toggleButton).trigger('keydown', { keyCode: 13 });
+        cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
         cy.get('#options-menu-modified-example.pf-m-expanded').should('exist');
         // Check whether on focus of the first item
         cy.get('.pf-c-options-menu__menu-item')
diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts
index c6e8d9bc52a..884bcbc433c 100644
--- a/packages/react-integration/cypress/integration/select.spec.ts
+++ b/packages/react-integration/cypress/integration/select.spec.ts
@@ -103,8 +103,8 @@ describe('Select Test', () => {
     find('#typeahead-select-select-typeahead').should('have.value', '');
     find('input:nth-child(1)').type('Flo');
     find('#typeahead-select-select-typeahead').should('have.value', 'Flo');
-    find('#typeahead-select-select-typeahead').trigger('keydown', { keyCode: 40 });
-    find('#typeahead-select-select-typeahead').trigger('keydown', { keyCode: 13 });
+    find('#typeahead-select-select-typeahead').type('{downArrow}');
+    find('#typeahead-select-select-typeahead').trigger('keydown', { key: 'Enter' });
     find('#typeahead-select-select-typeahead').should('have.value', 'Florida');
     find('button.pf-c-select__toggle-clear:first').click();
     find('#typeahead-select-select-typeahead').should('have.value', '');
diff --git a/packages/react-integration/cypress/integration/selectinmodal.spec.ts b/packages/react-integration/cypress/integration/selectinmodal.spec.ts
index d9a1dbcb7bc..0c6aad43078 100644
--- a/packages/react-integration/cypress/integration/selectinmodal.spec.ts
+++ b/packages/react-integration/cypress/integration/selectinmodal.spec.ts
@@ -13,21 +13,21 @@ describe('Select in modal Test', () => {
             cy.get('#select-in-modal-select').then(selectToggle => {
               cy.wrap(selectToggle).click();
               cy.get('.pf-c-select .pf-c-select__menu').should('exist');
-              cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+              cy.get('body').type('{esc}');
               cy.get('.pf-c-modal-box').should('exist');
               cy.get('.pf-c-select .pf-c-select__menu').should('not.exist');
             });
             cy.get('#select-in-modal-time-picker-input').then(timePicker => {
               cy.wrap(timePicker).click();
               cy.get('.pf-c-menu.pf-m-scrollable').should('exist');
-              cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+              cy.get('body').type('{esc}');
               cy.get('.pf-c-modal-box').should('exist');
               cy.get('.pf-c-menu.pf-m-scrollable').should('not.exist');
             });
           })
           .then(() => {
             cy.get('.pf-c-modal-box').should('exist');
-            cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+            cy.get('body').type('{esc}');
             cy.get('.pf-c-modal-box').should('not.exist');
           });
       });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index 586c88fdf57..22d666138c0 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -36,7 +36,7 @@ export class CardDemo extends React.Component {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if ([13, 32].includes(event.keyCode)) {
+    if (['Enter', ' '].includes(event.key)) {
       const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
       this.setState({
         selected: newSelected
diff --git a/packages/react-table/src/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx
index 391765847c9..0c550fab72d 100644
--- a/packages/react-table/src/components/Table/utils/transformers.test.tsx
+++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {
@@ -30,7 +30,7 @@ import {
   ISeparator
 } from '../TableTypes';
 
-const testCellActions = ({
+const testCellActions = async ({
   actions,
   actionResolver,
   areActionsDisabled,
@@ -45,6 +45,7 @@ const testCellActions = ({
   extraData?: IExtraData;
   expectDisabled?: boolean;
 }) => {
+  const user = userEvent.setup();
   const returnedData = cellActions(
     actions,
     actionResolver,
@@ -70,14 +71,16 @@ const testCellActions = ({
     expect(returnedData.children).toBeUndefined();
   } else {
     const { container } = render(returnedData.children as React.ReactElement<any>);
-    userEvent.click(container.querySelectorAll('.pf-c-dropdown button')[0]);
-    expect(container.querySelectorAll('.pf-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1);
+    await user.click(screen.getAllByRole('button')[0]);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.pf-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
+    );
   }
 };
 
 describe('Transformer functions', () => {
   describe('selectable', () => {
-    test('main select', () => {
+    test('main select', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
         extraParams: { onSelect }
@@ -85,24 +88,27 @@ describe('Transformer functions', () => {
       const returnedData = selectable('', { column, rowData: {} } as IExtra);
       expect(returnedData).toMatchObject({ className: 'pf-c-table__check' });
 
+      const user = userEvent.setup();
+
       render(returnedData.children as React.ReactElement<any>);
 
-      userEvent.type(screen.getByRole('textbox'), 'a');
+      await user.type(screen.getByRole('textbox'), 'a');
       expect(onSelect).toHaveBeenCalledTimes(1);
       expect(onSelect.mock.results[0].value).toMatchObject({ rowId: -1, selected: false });
     });
 
-    test('selected', () => {
+    test('selected', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
       expect(returnedData).toMatchObject({ className: 'pf-c-table__check' });
+      const user = userEvent.setup();
 
       render(returnedData.children as React.ReactElement<any>);
 
-      userEvent.type(screen.getByRole('textbox'), 'a');
+      await user.type(screen.getByRole('textbox'), 'a');
       expect(onSelect).toHaveBeenCalledTimes(1);
       expect(onSelect.mock.results[0].value).toMatchObject({ rowId: 0, selected: false });
     });
@@ -118,41 +124,47 @@ describe('Transformer functions', () => {
   });
 
   describe('sortable', () => {
-    test('unsorted', () => {
+    test('unsorted', async () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: {}, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 });
       expect(returnedData).toMatchObject({ className: 'pf-c-table__sort' });
 
+      const user = userEvent.setup();
+
       render(returnedData.children as React.ReactElement<any>);
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(onSort.mock.calls).toHaveLength(1);
     });
 
-    test('asc', () => {
+    test('asc', async () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: { index: 0, direction: 'asc' }, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 } as IExtra);
       expect(returnedData).toMatchSnapshot();
 
+      const user = userEvent.setup();
+
       render(returnedData.children as React.ReactElement<any>);
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(onSort.mock.calls).toHaveLength(1);
     });
 
-    test('desc', () => {
+    test('desc', async () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: { index: 0, direction: 'desc' }, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 } as IExtra);
       expect(returnedData).toMatchObject({ className: 'pf-c-table__sort pf-m-selected' });
 
+      const user = userEvent.setup();
+
       render(returnedData.children as React.ReactElement<any>);
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(onSort.mock.calls).toHaveLength(1);
     });
   });
 
-  test('simpleCellActions', () => {
+  test('simpleCellActions', async () => {
     const actions: IActions = [
       {
         title: 'Some',
@@ -205,7 +217,7 @@ describe('Transformer functions', () => {
     );
   });
 
-  test('collapsible', () => {
+  test('collapsible', async () => {
     const onCollapse = jest.fn();
     const rowData = {
       isOpen: true
@@ -216,8 +228,10 @@ describe('Transformer functions', () => {
     const returnedData = collapsible('', { rowIndex: 0, rowData, column });
     expect(returnedData).toMatchObject({ className: 'pf-c-table__toggle' });
 
+    const user = userEvent.setup();
+
     render(returnedData.children as React.ReactElement<any>);
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onCollapse.mock.calls).toHaveLength(1);
   });
 
diff --git a/packages/react-topology/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx b/packages/react-topology/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
index 205b8488d69..afb8bf22e8b 100644
--- a/packages/react-topology/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
+++ b/packages/react-topology/src/components/TopologyControlBar/__tests__/TopologyControlBar.test.tsx
@@ -6,9 +6,11 @@ import userEvent from '@testing-library/user-event';
 import { TopologyControlBar, createTopologyControlButtons, defaultControlButtonsOptions } from '../TopologyControlBar';
 
 describe('TopologyControlBar', () => {
-  test('should display the default controls correctly', () => {
+  test('should display the default controls correctly', async () => {
     const controlButtons = createTopologyControlButtons();
     const onButtonClick = jest.fn();
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <TopologyControlBar
         className="default-test-class"
@@ -18,12 +20,12 @@ describe('TopologyControlBar', () => {
       />
     );
 
-    userEvent.click(screen.getByText('Zoom In'));
+    await user.click(screen.getByText('Zoom In'));
     expect(onButtonClick).toHaveBeenCalledTimes(1);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should accept button options correctly', () => {
+  test('should accept button options correctly', async () => {
     const zoomInCallback = jest.fn();
     const controlButtons = createTopologyControlButtons({
       ...defaultControlButtonsOptions,
@@ -35,11 +37,13 @@ describe('TopologyControlBar', () => {
       resetViewDisabled: true,
       legend: false
     });
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <TopologyControlBar className="default-test-class" id="default-test-id" controlButtons={controlButtons} />
     );
 
-    userEvent.click(screen.getByText('test zoom in'));
+    await user.click(screen.getByText('test zoom in'));
     expect(zoomInCallback).toHaveBeenCalledTimes(1);
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/react-topology/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx b/packages/react-topology/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
index 8be7dd10699..9c7f509ec54 100644
--- a/packages/react-topology/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
+++ b/packages/react-topology/src/components/TopologySideBar/__tests__/TopologySideBar.test.tsx
@@ -15,8 +15,9 @@ describe('TopologySideBar', () => {
     expect(screen.getByText('Header')).toBeInTheDocument();
   });
 
-  test('should display topology sidebar w/ close correctly', () => {
+  test('should display topology sidebar w/ close correctly', async () => {
     const mockClose = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <TopologySideBar className="my-test-class" show onClose={mockClose}>
@@ -24,7 +25,7 @@ describe('TopologySideBar', () => {
       </TopologySideBar>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Close' }));
+    await user.click(screen.getByRole('button', { name: 'Close' }));
     expect(mockClose).toHaveBeenCalled();
   });
 
diff --git a/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
index 3aae8f8300b..fc97b4dbafc 100644
--- a/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
+++ b/packages/react-topology/src/components/contextmenu/ContextSubMenuItem.tsx
@@ -38,7 +38,7 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
             }}
             onKeyDown={e => {
               // open the sub menu on enter or right arrow
-              if (e.keyCode === 39 || e.keyCode === 13) {
+              if (e.key === 'ArrowRight' || e.key === 'Enter') {
                 setOpen(true);
                 e.stopPropagation();
               }
@@ -77,7 +77,7 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
           }}
           onKeyDown={e => {
             // close the sub menu on left arrow
-            if (e.keyCode === 37) {
+            if (e.key === 'ArrowLeft') {
               setOpen(false);
               e.stopPropagation();
             }
diff --git a/packages/react-topology/src/components/popper/Popper.tsx b/packages/react-topology/src/components/popper/Popper.tsx
index 7a70eea74a2..14d235334d5 100644
--- a/packages/react-topology/src/components/popper/Popper.tsx
+++ b/packages/react-topology/src/components/popper/Popper.tsx
@@ -126,7 +126,7 @@ const Popper: React.FunctionComponent<PopperProps> = ({
 
   const onKeyDown = React.useCallback(
     (e: KeyboardEvent) => {
-      if (e.keyCode === 27) {
+      if (e.key === 'Escape') {
         controlled ? onRequestCloseRef.current && onRequestCloseRef.current() : setOpen(false);
       }
     },
diff --git a/yarn.lock b/yarn.lock
index 9dd1fb9e5d2..9db94810ef0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3678,12 +3678,10 @@
     "@testing-library/dom" "^8.0.0"
     "@types/react-dom" "<18.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
 
 "@tootallnate/once@1":
   version "1.1.2"