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

Develop example of alert dialog design pattern #101

Closed
mcking65 opened this issue Aug 29, 2016 · 12 comments
Closed

Develop example of alert dialog design pattern #101

mcking65 opened this issue Aug 29, 2016 · 12 comments
Assignees
@sh0ji
Labels
Example Page Related to a page containing an example implementation of a pattern
Milestone
1.1 APG Release 2

Comments

@mcking65
Copy link
Contributor

mcking65 commented Aug 29, 2016 •
edited
Loading

Develop example of the design pattern for alert dialog.

Links to WIP in Evan's repo:
@mcking65 mcking65 added the Example Page Related to a page containing an example implementation of a pattern label Aug 29, 2016
@mcking65 mcking65 added this to the 1.1 PR milestone Aug 29, 2016
@dfkaye
Copy link

dfkaye commented Mar 9, 2017

@mcking65 - I had been working on an example of this pattern recently when I found this issue - would any of the code in the following gist suit your needs?

see https://gist.github.com/dfkaye/31939cd9fd3d00be68ffd5ab42622a35

@mcking65 mcking65 modified the milestones: 1.1 Rec, 3Q17 Working Draft Oct 11, 2017
@mcking65
Copy link
Contributor Author

Consider whether we need a separate folder or can add this to the dialog example folder.

@sh0ji sh0ji mentioned this issue May 22, 2018
Merged
@mcking65
Copy link
Contributor Author

mcking65 commented Jun 1, 2018

All, please, test Evan's new code. Here are links to pages in the Rawgit view of Evan's repo:

@mcking65
Copy link
Contributor Author

mcking65 commented Jun 1, 2018

Evan, I really like the simplicity of the approach for this example -- a discard text function.

Rather than an alert when there is no text to discard, seems like it would better demonstrate good practice to mark the button disabled. To include an alert, perhaps we put a 100 character limit on the field and then warn the person when they get to 90 with an alert and another alert when they get to 100. I suggest reasonably low numbers so it doesn't take a long time to experience the alerts.

@annabbott
Copy link

annabbott commented Jun 5, 2018 •
edited
Loading

Tested with FF 60.0.1 and Chrome 66.0.3359.181 on Win10.

Modal Dialog Example > HTML Source Code: all text is displayed in red instead of black, blue and red like in Alert Dialog Example > HTML Source Code.

@annabbott
Copy link

No other issues noted with Modal Dialog Example with FF 60.0.1 and Chrome 66.0.3359.181 on Win10. No screen reader testing performed.

@annabbott
Copy link

Tested with FF 60.0.1 and Chrome 66.0.3359.181 on Win10.

Alert Dialog Example > Role, Property, State, and Tabindex Attributes > aria-describedby="IDREF": remove bullet as there is only one statement for that row.

@annabbott
Copy link

No other issues noted with Alert Dialog Example with FF 60.0.1 and Chrome 66.0.3359.181 on Win10. No screen reader testing performed.

@annabbott
Copy link

Note about "No screen reader testing performed." above: currently unable to get any audio from either JAWS or NVDA.....grrrrrr...........

@annabbott
Copy link

Tested with FF 60.0.1 and Chrome 66.0.3359.181 on Win10.

Per Matt's 6/8/2018 email:
In particular, for the modal dialog page, test the scrolling of the second layer dialog by:

  1. Activate the add delivery address button to open the Add Delivery Address dialog.
  2. Activate the verify address button to open the second layer dialog.
  3. Scroll through the content of the the Verification Result dialog.
    Expected result: You cannot see the lower level add delivery address dialog as you scroll the verification result dialog. Or, if you can, it does not also scroll when the verification result dialog is scrolling.

Confirmed expected result.

@mcking65 mcking65 mentioned this issue Jun 13, 2018
Closed
@sh0ji
Copy link
Contributor

sh0ji commented Jun 18, 2018

Modal Dialog Example > HTML Source Code: all text is displayed in red instead of black, blue and red like in Alert Dialog Example > HTML Source Code.

This appears to be an issue with the latest editor's draft from master. It's likely a separate issue.

@mcking65 mcking65 mentioned this issue Jun 25, 2018
Merged
mcking65 added a commit that referenced this issue Jun 25, 2018
@mcking65
Add version of Alert dialog example ready for final publication revie…
9c2cfca 
…w (pull #737)

For issue #101:
* editorial: fix fragment sentence
* target labels directly
* improve dialog sizing & positioning for desktop. changes the design to mobile-first, and allows the size of the modal to better fit its contents on desktop
* add box shadow
* add alertdialog to the list of valid Dialog roles
* make the alert notification more prominent
* remove #base_window_layer
This layer was previously overriding the layout defined by
https://www.w3.org/StyleSheets/TR/2016/base.css, as well as acting as a
scroll container for the non-dialog content. It was removed in favor of
the base layout, and scroll is simply disabled on the body when a dialog
is open.
* clicking and selecting are different
* be more consistent about gt/lt usage
* vnu: The “type” attribute is unnecessary for JavaScript resources.
* serialize the interaction features for easier readability
* more consistent code highlighting
* formatting
* more consistent language
* remove redundant li
* treat the alert like a notification that slides in on the top right
* redesign: implement save via local storage; repurpose alert for save
* Alert Dialog Example: Fix inconsistencies with example template
Modified examples/dialog-modal/alertdialog.html:
* Remove header element from related links nav and fix aria-label
* remove aria-labelledby from main
* remove aria-labeledby from sections that turned them into regions
* Alert Dialog Example: Make title tag consistent with H1
* Alert Dialog Example: editorial revisions to introduction
* Alert dialog example: fix URIs of similar examples and adjust link descriptions.
* Alert Dialog Example: editorial revisions to accessibility features.
* Add link to review issue 736
* Alert Example: Add link to alert dialog
@mcking65 mcking65 mentioned this issue Jun 25, 2018
Closed
3 tasks
@mcking65
Copy link
Contributor Author

With commit 9c2cfca, this issue is now complete and we are ready for final review.

@mcking65 mcking65 mentioned this issue Jun 25, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sh0ji sh0ji

Labels
Example Page Related to a page containing an example implementation of a pattern
Projects
Alert and Alert Dialog Patterns and Examples Development Project
Status: Complete
Dialog Patterns and Examples Development Project
Status: Complete
Milestone
1.1 APG Release 2
Development

No branches or pull requests
4 participants
@dfkaye @mcking65 @sh0ji @annabbott