Support KeyboardEvent.key in Modal

[ericgio]

Is your feature request related to a problem? Please describe

I ran into an issue testing React-Bootstrap's Offcanvas component, which uses Modal under the hood. My test fails when asserting that the component is closed after pressing the Esc key:

it('closes the drawer when the esc key is pressed', async () => {
  render(<Offcanvas />);

  expect(screen.queryByRole('dialog')).toBeInTheDocument();
  await userEvent.keyboard('{Escape}');
  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});

Modal uses KeyBoardEvent.keyCode to check whether the Esc key has been pressed. However, KeyboardEvent.keyCode is deprecated and no longer supported in @testing-library/user-event.

Describe the solution you'd like

Given that KeyboardEvent.keyCode is deprecated, it seems like a good idea to add support for KeyboardEvent.key eg:

const escPressed = e.keyCode === 27 || e.key === 'Escape';
if (keyboard && escPressed && modal.isTopModal()) {
  onEscapeKeyDown?.(e);
  ...
}

This would solve my particular problem, but more generally future-proof this library if and when browsers drop support for KeyboardEvent.keyCode.

Describe alternatives you've considered

Testing Library suggests patching the key events as a workaround:

const keyCodes = {
  Tab: 9,
}
function patchKeyEvent(e) {
  Object.defineProperty(e, 'keyCode', {
    get: () => keyCodes[e.code] ?? 0,
  })
}
document.addEventListener('keydown', patchKeyEvent, {capture: true})