react-modal
react-modal copied to clipboard
Adjust focusability for main modal component
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:
- Create a modal with tabbable content inside
- Download ANDI and follow bookmarking instructions
- Navigate to the page with your modal and run ANDI (click bookmark)
- Open modal and then refresh ANDI to run it again with the open modal
- You should get the following accessibility alert:
Keyboard Access Alerts: (1)
1. Focusable element is not in keyboard tab order; should it be tabbable?
- 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.