C2LC-161: Change existing modal component to use react-modal

Metadata

Source
C2LC-161
Type
Task
Priority
N/A
Status
Won't Fix
Resolution
N/A
Assignee
N/A
Reporter
Created
2020-02-04T15:47:45.801-0500
Updated
2020-02-14T10:41:34.205-0500
Versions
N/A
Fixed Versions
  1. Coding Env 0.2.1
Component
N/A

Description

Comments

  • Daniel Cho commented 2020-02-13T11:14:04.714-0500

    React-modal seems to pass aXe testing; however, I was able to interact with components behind the modals with keyboard interaction when I use screen reader navigation key. Disabling all interactable buttons behind the modal component (C2LC-112) seems like a necessary work.

    Steps to reproduce:

    • Load the Coding Environment
    • Turn on screen reader
    • Open a modal by either failing to connect to dash or by pressing delete all button
    • Use screen reader navigation key – on VoiceOver (VoiceOver key + left or right key) on ChromeVox (Search key + left or right key)

    Expected: Interacting with components behind the modal shouldn't be allowed

    Actual: You can interact with the coding environment behind the modal

  • Michelle D'Souza commented 2020-02-13T16:45:52.038-0500

    Because of the issues with the react-modal we've decided to stick with the Bootstrap modal for now.