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.

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

Develop example of alert dialog design pattern #101

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

Comments

@mcking65
Contributor

mcking65 commented Aug 29, 2016

Develop example of the design pattern for alert dialog.

Links to WIP in Evan's repo:

@mcking65 mcking65 added this to the 1.1 PR milestone Aug 29, 2016

@dfkaye

This comment has been minimized.

Show comment
Hide comment
@dfkaye

dfkaye 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

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

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Apr 23, 2018

Contributor

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

Contributor

mcking65 commented Apr 23, 2018

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

@mcking65

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Jun 1, 2018

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Jun 1, 2018

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 5, 2018

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 commented Jun 5, 2018

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

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 6, 2018

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 commented Jun 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 6, 2018

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 commented Jun 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 6, 2018

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 commented Jun 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 6, 2018

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

annabbott commented Jun 6, 2018

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

@annabbott

This comment has been minimized.

Show comment
Hide comment
@annabbott

annabbott Jun 9, 2018

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.

annabbott commented Jun 9, 2018

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.

@sh0ji

This comment has been minimized.

Show comment
Hide comment
@sh0ji

sh0ji Jun 18, 2018

Contributor

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.

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 added a commit that referenced this issue Jun 25, 2018

Add version of Alert dialog example ready for final publication revie…
…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 referenced this issue Jun 25, 2018

Open

Review Alert Dialog Example #736

1 of 3 tasks complete
@mcking65

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Jun 25, 2018

Contributor

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

Contributor

mcking65 commented Jun 25, 2018

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

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