Develop example of alert dialog design pattern #101
Comments
mcking65
added
the
Example Page
|
@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 |
|
Consider whether we need a separate folder or can add this to the dialog example folder. |
|
All, please, test Evan's new code. Here are links to pages in the Rawgit view of Evan's repo: |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
Note about "No screen reader testing performed." above: currently unable to get any audio from either JAWS or NVDA.....grrrrrr........... |
|
Tested with FF 60.0.1 and Chrome 66.0.3359.181 on Win10. Per Matt's 6/8/2018 email:
Confirmed expected result. |
This appears to be an issue with the latest editor's draft from master. It's likely a separate issue. |
…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
|
With commit 9c2cfca, this issue is now complete and we are ready for final review. |
Develop example of the design pattern for alert dialog.
Links to WIP in Evan's repo:
The text was updated successfully, but these errors were encountered: