Create Accessible and Reusable Modal Dialog Component and Refactor Existing Dialogs to Use It

[entrotech]

Overview

We need to use a common dialog component for implementing modal dialogs in the application in order to reduce duplicate code and ensure consistency in the look and feel of the various dialogs. Currently, there are several modal dialogs in the application, each of them implemented independently, with differing behavior and styles.

Action Items

• Create the common dialog component. The behavior should be:
  • Auto-focus on the first focusable body element when the modal is opened.
  • Trap focus on the modal so that it doesn't leave the modal elements until the modal is closed.
  • The Escape key should close the modal without taking any action.
  • The Enter key should have standard behavior (i.e., if a button has focus, clicking the button)
  • Standardize the appearance of the Header's close button.
• Use it to replace the Project Delete dialog
• Replace the "Leave the Project Wizard" Dialog,
• Replace the Delete FAQ dialog,

Resources/Instructions

See https://medium.com/@seif_ghezala/how-to-create-an-accessible-react-modal-5b87e6a27503 for a good implementation.

Examples:
Checklist Modal Dialog:

Leave the project Wizard Dialog:

Delete Project Dialog:

Terms and Conditions Dialog

[Biuwa]

@Jonathanko52

Please provide update

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

[Jonathanko52]

Progress: Two of eight modals replaced on my local repository.
Blockers: I'd like to run my current plans for how functions/icons/other data in modals should be stored in the app
Availability: Limited in the coming weeks. I can probably reply to slack messages.
ETA: Two weeks.
Pictures (if necessary):

[Jonathanko52]

Progress: Four of eight modals replaced on my local repository. Modals have been modified to take in functions and open/close state as props from parent components.
Blockers: None.
Availability: Limited in the coming weeks. I can probably reply to slack messages.
ETA: Two weeks.
Pictures (if necessary):

[Jonathanko52]

Progress: Removed two modals, bringing the total number of modals down to six. Three of which are completed.
Blockers: I don't feel comfotable proceeding until I've discussed with team best practices for moving functionality out of modals into parent components.
Availability: Limited in the coming weeks. I can probably reply to slack messages.
ETA: One week
Pictures (if necessary):

[Biuwa]

@Jonathanko52 Please provide an update.

[Jonathanko52]

Progress: Added the ability for Modal to take components as props, which is used for some other modals in the project that have extensive text. Now working on The last two Modals, duplicate and delete project.
Blockers: None.
Availability: Limited in the coming weeks. I can probably reply to slack messages.
ETA: One week
Pictures (if necessary):

[Jonathanko52]

Progress: "Duplicate" modal now able to make duplicates. I still have to add the ability to change titles. That aside, that leaves the "Delete" Modal
Blockers: None.
Availability: Weekdays.
ETA: End of week
Pictures (if necessary):

[Jonathanko52]

Progress: Inapplicable, Navconfirm, DeleteProject, Duplicate, Terms and Conditions, and Checklist Modals replaced. Trap focus to Modal function added.
Blockers: None.
Availability: Weekdays.
ETA: Code complete. Ready for testing/review.
Pictures (if necessary):

[Jonathanko52]

Progress: Code cleanup. Enter now standardized to activate in-focus item. Colors added for delete, duplicate, and terms and conditions buttons
Blockers: None.
Availability: Weekdays.
ETA:
Pictures (if necessary):

[Biuwa]

@entrotech - Please review