Pressing enter on confirmation modal deletes the entry even if cancel is focused

[gtsiolis]

Bug description

The confirmation modal for workspaces, variables, projects, SSH keys, and everywhere used in the dashboard, deletes the entry when pressing ENTER even if cancel is focused by default.

Steps to reproduce

1. Open a new workspace.
2. From the workspace more actions menu, select DELETE and when the confirmation modal press ENTER.
3. Notice that even if CANCEL was focused by default, the workspace is deleted

Workspace affected

No response

Expected behavior

No response

Example repository

No response

Anything else?

In case it helps, here's the component used under the hood:

gitpod/components/dashboard/src/components/ConfirmationModal.tsx

Line 12 in be86e5e

export default function ConfirmationModal(props: {

Cc @selfcontained @easyCZ because #16592 recently edited this file and could be related.

[RayAsh37]

@gtsiolis I also observed that trying to change the focus using arrow keys is also not working. Is that intended behavior?
tried in both Latest Chrome and Edge browsers.

[gtsiolis]

... trying to change the focus using arrow keys is also not working. Is that intended behavior?

Hey @RayAsh37! Yeah, arrow keys are better only for changing focus for container descendants while the TAB key is more common or appropriate for changing focus for elements like buttons within modals, see relevant accessibility guidelines from WAI-ARIA:

When the container or its active descendant has focus, the user may navigate through the container by pressing additional keys, such as the arrow keys, to change the currently active descendant. Any additional press of the main navigation key (generally the TAB key) will move out of the container to the next widget.

[RayAsh37]

Hi @gtsiolis , I believe this is a case of improper forward of a Ref object. I have submitted a PR. Please review