Modal Dialog Example 2

Example of an accessible modal with resizing and progressive enhancement.

Improvements/differences from original version:

Button now looks like a button.
Spacebar invokes button behavior.
Focus element now focused upon opening modal rather than the container.
Code to maintain focus is much lighter and now supports Shift+Tab.
Added aria-modal=true attribute (ARIA 1.1)
Added aria-haspopup=dialog attribute (ARIA 1.1)
Note: In the following screen reader/browser combinations, aria-modal worked well but aria-haspopup did not (still announced as menu popup): VO Mac OS 10.12.6 + Safari 12.02; JAWS 18 + IE11; NVDA 2018.3 + FFX 60.

More