touchpoints icon indicating copy to clipboard operation
touchpoints copied to clipboard

WIP focus setting for modal open and close

Open iamjolly opened this issue 2 years ago • 5 comments

For @ryanwoldatwork and @iamjolly to pair on.

Relates to #480

Things to do:

  • [x] Set focus on modal div when opened
  • [x] Set focus back to touchpoints button when modal is closed
  • [x] Confirm listener for esc keypress to run the handleDialogClose function.
  • [ ] Trap focus in modal when opened - see Using JavaScript to trap focus in an element for more info
  • [ ] Test with keyboard only and with screen reader to confirm everything works as expected.

Note: This is a vanilla JS approach to adding accessibility to the modal. A next effort should involve looking at ways for touchpoints to use the USWDS modal component per #481.

iamjolly avatar Feb 03 '22 20:02 iamjolly