Some dialogs ("Email Settings", "Unenroll") not keyboard navigable.

[ChristopherChudzicki]

Expected Behavior

Dialog buttons should be actionable via keyboard.

Current Behavior

Dialog buttons not keyboard navigable

Steps to Reproduce

This issue seems to affect both the "Email Settings" and "Unenroll" dialogs on dashboard page.

1. Visit https://mitxonline.mit.edu/dashboard/
2. Click (or navigate via keyboard) to the ... icon on one of the course cards.
3. From the dropdown menu, click "Unenroll" (or "Email Settings")
4. Navigate the dialog with keyboard controls. With any of the buttons focused, press "Enter". The button should activate but it does not.

Possible Solution

This should be double checked, but:

• The button elements all seem to be real buttons (using a <div role="button"> is one source of similar issues)
• The event handlers seem to be attached with onClick, not with something like onPointerUp, which would also cause this.

Button element click handlers should be firing on "click" events, so I'm confused. Perhaps there is some other keyboard-only event handler that is interfering with the events?

[ChristopherChudzicki]

[collinpreston]

Could be related to jaredpalmer/formik#2468.

[collinpreston]

@ChristopherChudzicki, I've created a branch with changes which do the following:

1. Pressing escape closes the modal (worked as before).
2. Pressing enter submits the modal, regardless of which button is focused via keyboard navigation.

I think the functionality of #2 above is correct based on what I read here: https://accessibility.asu.edu/articles/forms. The accessibility requirements for a modal containing a form are difficult to narrow down.