Updates to disconnect modal to improve accessibility

[jboland88]

Changes proposed in this Pull Request:

• This PR Makes several updates to the disconnect flow to better align with WCAG accessibility guidelines. These changes are outlined below, organized by each step of the flow. Screenshots of these steps are included in the test plan.

Changes that apply to the flow in general

• The <Modal /> component has been given a more consistent accessible label using the contentLabel prop. Previously it used aria-labelledby and referenced the step headline, which changed from step to step.
• The modal can now be closed by pressing the escape key or by clicking outside the modal. This is not necessarily a requirement, but it is more common/ expected behavior for modals. Depending on whether or not the site is disconnected, dismissing the modal has different effects. Additionally, the modal cannot be dismissed at all if the site is actively disconnecting.
• The action buttons now have a slight hover state
• Link-style buttons now have a noticeable focus state
• Link-style buttons that are functioning as buttons now use <button> elements instead of <a> elements

Disconnect Step

• Cards that show other connected plugins and benefits of the Jetpack plugin have been refactored as unordered lists to be more semantically valuable.
• Blue links in the list of generic Jetpack benefits have an underline to provide sufficient differentiation of links from surrounding body text.
• The Disconnect button uses the aria-live attribute to announce "Disconnecting..." when using a screen reader.

Disconnect Confirmation Step

• This step uses the aria-live attribute to read the content of this screen when it appears after disconnection (announcing dynamic content).

Survey Step

• This step uses the aria-live attribute to read the content of this screen when it appears (announcing dynamic content).
• The survey questions have been refactored to use a series of radio inputs within a <form> element to be more semantically correct for the function of the control (only one option can be selected at a time)
• Hover, focus and selected states of the survey options have been updated to (hopefully) make it easier to understand when a choice is selected.

Thank You Step

• This step uses the aria-live attribute to read the content of this screen when it appears after disconnection (announcing dynamic content).

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Most of these changes have an impact when testing with a screen reader and/ or using the keyboard to navigate the disconnection flow. For MacOS, the built in VoiceOver screen reader is a good one to test with, and can be activated by pressing command + F5. If you have not used a screen reader before, you may need to take a bit of time to get familiar with how to navigate with it. These test instructions will make note of how the screen reader should announce certain elements on the page and how the keyboard can be used to navigate.

• Check out/ apply this branch to your Jetpack test site

• Make sure Jetpack is connected and navigate to the Jetpack dashboard.

• From the Jetpack dashboard, click on "Manage Connection" to open the disconnect flow.

• If using a screen reader, it should announce "Disconnect Jetpack Dialog" when the modal opens

• Note, you should be able to press the escape key or click outside the modal to close it.

• Navigating through the content with a screen reader, the list of plugins and benefits provided by Jetpack should be identified as lists.

• Using the tab key, you should be able to focus on all links and buttons. All links and buttons should have noticeable focus states.

• Press "Enter" or "Spacebar" when focused on the Disconnect button to initiate a site disconnect. If using a screen reader, it should announce "Disconnecting" when the disconnection request is made.

• After the site disconnects, you will be presented with the disconnect confirmation screen.

• If using a screen reader, the content of this screen should be read aloud when it appears.

• You can use the tab key to navigate to the different options on the screen. All links and buttons should have noticeable focus states.

• Press "Enter" or "Spacebar" when focused on the "Help us improve" button to navigate to the survey step.

• If using a screen reader, the content of the survey screen should be read aloud when it appears.

• You can use the tab key to navigate between the survey option set, the custom input field, and the buttons below the survey.

• Because the survey options are managed as a set of radio buttons, you can use the arrow keys to move between and select one of the options. If focus leaves and returns to the set of survey responses, focus will be given to the response that has already been selected. Try navigating and selecting one of the responses using the arrow keys.

• The last survey option has a field for custom input. If input is entered into this field, this last "Other" option is automatically selected as the active option.

• Confirm that pressing "Enter" while focused on the survey options does not submit the survey.

• After selecting a survey option, use the tab key on the keyboard to navigate to the "Submit Feedback" button and press "Enter" to submit the survey.

• After the survey is submitted, you will be presented with the "Thank You" screen:

• If you are using a screen reader, the content of the thank you screen should be read aloud when it appears.

• You can then use the tab key on your keyboard to focus on the "Back to my Website" button. Press enter on this button to close the modal and exit the flow.

[github-actions[bot]]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• :white_check_mark: Include a description of your PR changes.
  
• :warning: All commits were linted before commit.
  
• :red_circle: Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• :white_check_mark: Add testing instructions.
  
• :white_check_mark: Specify whether this PR includes any changes to data or privacy.
  
• :white_check_mark: Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation :robot:

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped. Then, add the "[Status] Needs Team review" label and ask someone from your team review the code. Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: February 1, 2022.
• Scheduled code freeze: January 24, 2022.

---

Backup plugin:

• Next scheduled release: February 1, 2022.
• Scheduled code freeze: January 24, 2022.

[jboland88]

Also on the survey step, if I have a selected option (currently focused) and press Shift + Tab, the focus goes back to the "Manage Connection" button on the At a Glance page, immediately closing the modal.

@IanRamosC - what browser did you test in? I ran into this same thing initially and thought I had solved it :) I can't reproduce this in Chrome anymore - Could be that the event handling is a little different b/w browsers though.

[IanRamosC]

@IanRamosC - what browser did you test in? I ran into this same thing initially and thought I had solved it :) I can't reproduce this in Chrome anymore - Could be that the event handling is a little different b/w browsers though.

I'm using Edge. I'm retesting with the latest set of changes and will let you know if that still happens

[IanRamosC]

@jboland88 I'm trying to run the PR on a JN site to test this PR, but I'm getting an error before the Survey is shown. This is what I'm doing:

• Spun up a JN site with this branch
• User connected to Jetpack with a free product
• Went back to the Dashboard, clicked on the "Manage Connection" link
• The first screen is displayed, and I click to Disconnect
• When it finished disconnecting, I get a blank screen on the Dashboard and the following error in the console:

[IanRamosC]

Hey @jboland88. I retested the PR and most things seem to work as expected, but I'm still having the same issue pressing Shift + Tab to go back to the previous item on the Survey screen.

https://user-images.githubusercontent.com/5714212/148431952-a1b342fa-bb38-4f69-9104-f0eeb1e88c47.mov

[jboland88]

I retested the PR and most things seem to work as expected, but I'm still having the same issue pressing Shift + Tab to go back to the previous item on the Survey screen.

@IanRamosC - well, phooey. Thanks for noting. I think I've got it sorted now with the latest commit, but will want to double confirm once the new branch is available via the Jetpack Beta plugin

[jeherve]

Closing this for now because of the lack of activity on this. We can always reopen in the future if needed.