Fix antd modal focus order
The problem with antd modal component is that it contains 2 empty but focusable elements which are used trap the focus. This raises an accessibility issue because an empty or non-interactive element should not receive focus. To fix this:
- add global effect to listen for keystrokes when an antd modal is open; trap focus within modal's active elements
- add
autoFocus
prop to Button component to optionally move focus to it automatically when rendered - apply
autoFocus
prop to a Button inside a modal (for all modals) so that it receives focus when opening the modal
To test:
- check all instances of modal dialogs in the app
- Question page confirmation modals (the entire question flow contains modal dialogs before moving to next stage)
- Export to Word button, previous/next question button
- user management page: confirmation modals before activating/deactivating/deleting
- terns and conditions in signup page
- main action button should receive focus when modal is opened
- navigation with Tab/Shit+Tab keeps focus within modal's active and visible elements