Develop example of alert dialog design pattern

[mcking65]

Develop example of the design pattern for alert dialog.

Links to WIP in Evan's repo:

• Alert dialog
• Modal dialog

[dfkaye]

@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]

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

[mcking65]

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

• Alert dialog
• Modal dialog

[mcking65]

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]

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]

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]

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.