Develop example of modal dialog design pattern

[mcking65]

[ZoeBijl]

I’ll take this one.

[terracoda]

@MichielBijl, are you planning on more than one example? I'm wondering where focus should go in the case where the content of the dialog is not a typical form with multiple interactive elements (including a close button), but rather a dialog where the content is information that the user should be able to read through with the arrow keys, and where the only interactive element is the close button. In this case, would it make sense to put the initial focus on the h1 of the dialog, a non-interactive element?

[umermughal]

@terracoda I think in your case alertdialog role would be good option here you can find detail information.
https://www.w3.org/TR/wai-aria-1.1/#alertdialog
https://www.w3.org/TR/wai-aria-practices/#alertdialog

[terracoda]

@umermughal, thanks for the quick reply. I should have been more explicit.

In my case, the dialog is a help dialog that contains a list of keyboard commands. The user actively requests the dialog. It is not an alert that interrupts the user's work flow. In some cases there can be a fair amount of content in the dialog that user should be able to read at their own pace. So I am wondering if it is best to set the focus on the only interactive element, the close button, or the H1 with tab-index -1. The H1 one seems logical to me because ideally the user will read some or all of the content before looking for the close button, or Escaping away.

[mcking65]

@terracoda, @MichielBijl was not aware I had this example sitting in the dialog-modal branch for a while. I will work on merging it into master very soon, like in the next 24 hours, so you can check it out.

It has 3 dialogs of various sizes.

For dialogs with lots of content that can scroll, it is good to have focus on an element in the portion that is visible when the dialog opens. That could be a heading if there are no interactive elements.

[terracoda]

@mcking65 thanks for your reply, and looking forward to reviewing the examples!

[mcking65]

Added commit 2493510 with first build of the
modal dialog example.

[mcking65]

Initial development is now complete. Closing this issue and starting the review process in issue 321.