C2LC-499: Implement a modal component

Metadata

Source
C2LC-499
Type
Task
Priority
N/A
Status
Done
Resolution
N/A
Assignee
N/A
Reporter
Created
2021-10-05T13:57:37.215-0400
Updated
2021-11-16T13:50:10.461-0500
Versions
N/A
Fixed Versions
  1. Coding Env 1.0
Component
N/A

Description

Move away from using React Bootstrap Modal component, as we encountered some accessibility issues. Though, we want to ensure some behaviours from React Bootstrap Modal component to be captured:

  • Do not announce aria-live region for the character position update when a modal is opened
  • Ensure tab navigation to be trapped within our application, prevent tab navigation to travel through the browser address bar and tabs

Modal Examples from w3: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Comments

  • Michelle D'Souza commented 2021-10-19T09:31:26.833-0400

    This will include moving the world selector to the new dialog

  • Daniel Cho commented 2021-10-29T10:42:19.154-0400

    We decided to implement a component that renders both Modal and ModalFooter together called ModalWithFooter and update WorldSelector to use ModalWithFooter.

  • Daniel Cho commented 2021-11-08T15:38:20.716-0500

    This work also includes updating DeleteAll modal to use the new modal component.