Accessibility improvements on the New Workspace modal

[filiptronicek]

Description

The X modal-closing button is focusable via subsequent keyboard navigation

Related Issue(s)

Fixes #

How to test

Open the preview environment, hit Cmd+O and try to navigate via Tab onto the closing button - and try to close the modal with it using Space or Enter.

Release Notes

NONE

Documentation

Build Options:

• /werft with-github-actions
  Experimental feature to run the build with GitHub Actions (and not in Werft).
• /werft with-local-preview
  If enabled this will build install/preview
• /werft with-preview
• /werft with-large-vm
• /werft with-integration-tests=all
  Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

[werft-gitpod-dev-com]

started the job as gitpod-build-ft-start-workspace-modal-a11y.1 because the annotations in the pull request description changed
(with .werft/ from main)

[filiptronicek]

I have found an issue where you can escape the modal with your focus and with it interact with the page below it. I have discovered that the modal is using React contexts which I am still a bit confused about and unsure how to hook into it - how would I go about putting tabIndex="-1" to everything below the modal content?

cc @svenefftinge because you were the original author of the modal - hence you maybe know 😄

[selfcontained]

I have found an issue where you can escape the modal with your focus and with it interact with the page below it. I have discovered that the modal is using React contexts which I am still a bit confused about and unsure how to hook into it - how would I go about putting tabIndex="-1" to everything below the modal content?

cc @svenefftinge because you were the original author of the modal - hence you maybe know 😄

The focus not being constrained to the modal is something we can fix by updating our <Modal/> component to use react-modal rather than rendering inline like we are currently. It has quite a few modal accessibility considerations that should fix things like this, along with a slew of others. I've had that change in the back of my head for a bit but would be a good change for us to make when we have time.

[selfcontained]

/werft run

👍 started the job as gitpod-build-ft-start-workspace-modal-a11y.8
(with .werft/ from main)

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.