search

humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

Opening button doesn't get focus when modal closes in iOS with VoiceOver #100

Open backwardok opened 6 years ago

backwardok commented 6 years ago

Issue

Steps to reproduce:

  1. Turn on VO on an iOS device (doesn't seem to matter what version, even the latest version has this issue)
  2. Go to the main demo page and navigate to the Inline Attribute Configuration example
  3. Click the Show Modaal button to open the modal
  4. Tap the screen to get focus to go to the modal (there's a separate issue where the modal doesn't get focus)
  5. Navigate via swiping to the close button of the modal (at the end)
  6. Activate the close button

What's expected: VO focus moves back to the Show Modaal button

What happens: VO focus is at the end of the page (where the modal previously existed)

What's going on

MDN's activeElement documentation mentions that on a Mac, this may only work with text inputs. I found that this is only true on iOS and not on the Mac. If you are on a button that's focused and you query for activeElement, it doesn't return anything.

danhumaan commented 5 years ago

As commented in #99, we seem to be running into is a random result in the 'return to last focus state' where VoiceOver, if it can't find/remember the state for whatever reason, will default to a focusable element nearest the last press being the close button of the modal.

What JavaScript we've tested so far doesn't seem to have much difference as VoiceOver will make its own decisions on where to go and ignore what we're asking it to do.

In short, needs more work but the issue is understood. Contribution on this from anyone is very welcome.

backwardok commented 5 years ago

For this one, you likely need to pass in a reference to the opening element (or actually keep track of what opened it when it triggers the modal) to explicitly focus that element (instead of activeElement) since iOS Safari doesn't seem to track <button>s as active.

danhumaan commented 5 years ago

Thanks @backwardok - we already do keep track of the original element at the point the modal is triggered to open, only it hasn't been used by VoiceOver correctly or as expected. The replies to #99 have given us a good base and reference point to work from, so we expect to have updates to this task as well rolled into that. Thanks again!