Skip to content

Fix antd modal focus order

Grigor Malo requested to merge modal-focus-fix into master

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
Edited by Grigor Malo

Merge request reports