Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal Dialog Example: Dialogs underneath other dialogs are not grayed out #523

Closed
mcking65 opened this issue Nov 16, 2017 · 3 comments · Fixed by #549
Closed

Modal Dialog Example: Dialogs underneath other dialogs are not grayed out #523

mcking65 opened this issue Nov 16, 2017 · 3 comments · Fixed by #549
Assignees
@sh0ji
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Milestone
1.1 APG Release 1

Comments

@mcking65
Copy link
Contributor

In the modal dialog example,
when a dialog appears on top of another dialog, the lower z dialog is not grayed out and is not inert.
For example, open the "add delivery address" dialog. Then activate the "Verify Address" button. Then, activate the "accepting an alternative form" button, which opens the "end of the road" dialog. When the "end of the road" dialog is displayed, the underlying content from the "verify address" dialog is not grayed out and is still active.

The lower z dialog should always be grayed when another modal is opened on top of it. And clicking outside the currently active dialog should either do nothing or cancel the currently active dialog.

This was raised by @annabbott in a comment on issue 503.
@mcking65 mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern labels Nov 16, 2017
@mcking65 mcking65 added this to the 1.1 APG Release 1 milestone Nov 16, 2017
@sh0ji sh0ji mentioned this issue Nov 28, 2017
Merged
@mcking65
Copy link
Contributor Author

@annabbott, @jnurthen,

You can see and test Evan's proposed fix in his repo here:
https://rawgit.com/sh0ji/aria-practices/523-fix/examples/dialog-modal/dialog.html

Compare to what is in master now:
http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html

Given the amount of back and forth we had on this example, I want to be thorough in our testing before merging.

If you find problems with the fix, please comment in pull #549.

@mcking65 mcking65 mentioned this issue Nov 29, 2017
Closed
@annabbott
Copy link

Comments added in pull #549.

mcking65 pushed a commit that referenced this issue Dec 12, 2017
@sh0ji @mcking65
Modal Dialog Example: Fix Background Layer Styling (pull #549)
fdf51a2 
For issue #523, add a background layer behind each dialog to grey out everything underneath.

Changes also include:
* minor editorial revisions to intro
* replace tabs with spaces
* cleanup whitespace
* rename ID used on dialog container
* wrap dialogs in individual backdrop elements when they're active
* remove unused dialog_layer references
* use more aria selectors
* simpler backdrop styles
* fix indent
* fullscreen on small screens
* Remove unsupported pseudo-element that breaks a selector on some browsers
* keep DOM in place once backdrop has been added
@mcking65
Copy link
Contributor Author

Fixed with commit fdf51a2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sh0ji sh0ji

Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Projects
Dialog Patterns and Examples Development Project
Status: Complete
Milestone
1.1 APG Release 1
Development

Successfully merging a pull request may close this issue.

Fix Dialog Overlays
3 participants
@mcking65 @sh0ji @annabbott