react-modal icon indicating copy to clipboard operation
react-modal copied to clipboard

Adjust focusability for main modal component

Open jakemobilize opened this issue 4 years ago • 0 comments

Summary:

Currently when a modal is opened, the entire modal is focusable when it should not be. When I have a modal and then run an accessibility testing tool (ANDI) I get an alert that the ReactModal__Content element is focusable but not tabbable.

Steps to reproduce:

  1. Create a modal with tabbable content inside
  2. Download ANDI and follow bookmarking instructions
  3. Navigate to the page with your modal and run ANDI (click bookmark)
  4. Open modal and then refresh ANDI to run it again with the open modal
  5. You should get the following accessibility alert:
Keyboard Access Alerts: (1)
1. Focusable element is not in keyboard tab order; should it be tabbable?
  1. By clicking on this error, it will highlight the element in question and reveal that the tabindex is set to -1.

Expected behavior:

Have the ability to make the react modal component non-focusable--using a number of aria attributes for this did not work and I didn't see anything listed in current props that would allow for this.

jakemobilize avatar Sep 16 '21 23:09 jakemobilize