fix(dialog): Release focus after style changes on close

[abhiomkar]

Fixes #4033

[mdc-web-bot]

All 655 screenshot tests passed for commit 52cd2dc vs. master! 💯🎉

[kfranqueiro]

Testing in Safari using the catalog page against this branch, it seems like the problem isn't fully resolved. It also seems like it might be somewhat dependent on how far VoiceOver is into its announcements before you close the dialog. Even without this change, sometimes VO will automatically navigate to the top bar of the app after announcing the cancel button and dialog.

(The black outline is the screen reader still navigated onto the cancel button in the now-closed dialog)

Also, I don't think this change will do anything for the other issue mentioned in #4033 RE opening the confirmation or simple dialog and the screen reader not properly navigating into it?

[mdc-web-bot]

All 655 screenshot tests passed for commit 928d848 vs. master! 💯🎉

[abhiomkar]

This change fixes Safari + VoiceOver on Mac. But doesn't fix iOS Safari + VoiceOver issue because of iOS platform limitation.

Apparently document.activeElement which is used to get the currently focused element doesn't work. I tested with this codepen example on iOS to demonstrate this bug. (But, works on Android browsers).

Workaround for this iOS issue would be to send button element selector that dialog needs to restore focus upon close instead of relying on document.activeElement as shown in ARIA Modal Dialog example. But I'm inclined towards not to optimize the solution for single platform.

[kfranqueiro]

To clarify the above point, iOS Safari isn't registering activeElement at all, hence the problem.

LGTM for desktop Safari.

[codecov-io]

Codecov Report

Merging #4069 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master    #4069   +/-   ##
=======================================
  Coverage   98.67%   98.67%           
=======================================
  Files         126      126           
  Lines        5603     5603           
  Branches      747      747           
=======================================
  Hits         5529     5529           
  Misses         74       74

Impacted Files	Coverage Δ
packages/mdc-dialog/foundation.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 857977f...02c8f11. Read the comment docs.

[mdc-web-bot]

All 663 screenshot tests passed for commit 02c8f11 vs. master! 💯🎉