-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Bump into the top edge of a Nested modal dialog Test (#1077)
* Modify Bump into the top edge of a Nested modal dialog test for more accurate navigation * Update setupScript * Correct Screen reader commands for test * Update setupScritp
- Loading branch information
Showing
14 changed files
with
211 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
tests/modal-dialog/data/js/openAddressAddedDialogAndFocusAddressAddedHeading.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| // opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'Address added' heading inside the second dialog | ||
| const btn = testPageDocument.querySelector('#ex1 > button'); | ||
| testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add'); | ||
| testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_label'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
195 changes: 195 additions & 0 deletions
195
...og/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusAddressAddedHeading.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Modal Dialog Example</title> | ||
|
|
||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <!-- js and css for this example. --> | ||
| <link href="css/dialog.css" rel="stylesheet"> | ||
| <script src="js/utils.js" type="text/javascript"></script> | ||
| <script src="js/dialog.js" type="text/javascript"></script> | ||
|
|
||
|
|
||
| <!-- Generated by process-test-directory.js --> | ||
| <script> | ||
| (function() { | ||
| function setupScript(testPageDocument) { | ||
| // openAddressAddedDialogAndFocusAddressAddedHeading | ||
| // opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'Address added' heading inside the second dialog | ||
| const btn = testPageDocument.querySelector('#ex1 > button'); | ||
| testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add'); | ||
| testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_label'); | ||
|
|
||
| }; | ||
| document.addEventListener('click', function(event) { | ||
| if (event.target.classList.contains('button-run-test-setup')) { | ||
| event.target.disabled = true; | ||
| setupScript(document); | ||
| } | ||
| }); | ||
| })(); | ||
| </script> | ||
| <!-- End of generated output --></head> | ||
| <body> | ||
| <main> | ||
| <h1>Modal Dialog Example</h1> | ||
| <p> | ||
| Following is an example implementation of the | ||
| <a href="https://w3c.github.io/aria-practices/#dialog_modal">design pattern for modal dialogs.</a> | ||
| The below <q>Add Delivery Address</q> button opens a modal dialog that contains two buttons that open other dialogs. | ||
| </p> | ||
| <section> | ||
| <div class="example-header"> | ||
| <h2 id="ex_label">Example</h2> | ||
| </div> | ||
| <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div> | ||
| <div id="ex1"> | ||
| <a id="beforelink" href="#beforelink">Navigate forwards from here</a> | ||
| <button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button> | ||
| <div id="dialog_layer" class="dialogs"> | ||
| <div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden"> | ||
| <h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2> | ||
| <div class="dialog_form"> | ||
| <div class="dialog_form_item"> | ||
| <label> | ||
| <span class="label_text">Street:</span> | ||
| <input type="text" class="wide_input"> | ||
| </label> | ||
| </div> | ||
| <div class="dialog_form_item"> | ||
| <label> | ||
| <span class="label_text">City:</span> | ||
| <input type="text" class="city_input"> | ||
| </label> | ||
| </div> | ||
| <div class="dialog_form_item"> | ||
| <label> | ||
| <span class="label_text">State:</span> | ||
| <input type="text" class="state_input"> | ||
| </label> | ||
| </div> | ||
| <div class="dialog_form_item"> | ||
| <label> | ||
| <span class="label_text">Zip:</span> | ||
| <input type="text" class="zip_input"> | ||
| </label> | ||
| </div> | ||
|
|
||
| <div class="dialog_form_item"> | ||
| <label for="special_instructions"> | ||
| <span class="label_text">Special instructions:</span> | ||
| </label> | ||
| <input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input"> | ||
| <div class="label_info" id="special_instructions_desc"> | ||
| For example, gate code or other information to help the driver find you | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="dialog_form_actions"> | ||
| <button id="dialog1_verify" type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button> | ||
| <button id="dialog1_add" type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button> | ||
| <button id="dialog1_cancel" type="button" onclick="closeDialog(this)">Cancel</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Second modal to open on top of the first modal --> | ||
| <div id="dialog2" role="dialog" aria-labelledby="dialog2_label" | ||
| aria-describedby="dialog2_desc" aria-modal="true" class="hidden"> | ||
| <h2 id="dialog2_label" class="dialog_label">Verification Result</h2> | ||
| <div id="dialog2_desc" class="dialog_desc"> | ||
| <p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would | ||
| provide a message telling whether the entered address is valid.</p> | ||
| <p> | ||
| For demonstration purposes, this dialog has a lot of text. It demonstrates a | ||
| scenario where: | ||
| </p> | ||
| <ul> | ||
| <li>The first interactive element, the help link, is at the bottom of the dialog.</li> | ||
| <li>If focus is placed on the first interactive element when the dialog opens, the | ||
| validation message may not be visible.</li> | ||
| <li>If the validation message is visible and the focus is on the help link, then | ||
| the focus may not be visible.</li> | ||
| <li> | ||
| When the dialog opens, it is important that both: | ||
| <ul> | ||
| <li>The beginning of the text is visible so users do not have to scroll back to | ||
| start reading.</li> | ||
| <li>The keyboard focus always remains visible.</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| <p>There are several ways to resolve this issue:</p> | ||
| <ul> | ||
| <li>Place an interactive element at the top of the dialog, e.g., a button or link.</li> | ||
| <li>Make a static element focusable, e.g., the dialog title or the first block of | ||
| text.</li> | ||
| </ul> | ||
| <p> | ||
| Please <em>DO NOT </em> make the element with role dialog focusable! | ||
| </p> | ||
| <ul> | ||
| <li>The larger a focusable element is, the more difficult it is to visually | ||
| identify the location of focus, especially for users with a narrow field of view.</li> | ||
| <li>The dialog has a visual border, so creating a clear visual indicator of focus | ||
| when the entire dialog has focus is not very feasible.</li> | ||
| <li>Screen readers read the label and content of focusable elements. The dialog | ||
| contains its label and a lot of content! If a dialog like this one has focus, the | ||
| actual focus is difficult to comprehend.</li> | ||
| </ul> | ||
| <p> | ||
| In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first | ||
| paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced | ||
| by <code>aria-describedby</code>. With some screen readers, this may have one negative | ||
| but relatively insignificant side effect when the dialog opens -- the first paragraph | ||
| may be announced twice. Nonetheless, making the first paragraph focusable and setting | ||
| the initial focus on it is the most broadly accessible option. | ||
| </p> | ||
| </div> | ||
| <div class="dialog_form_actions"> | ||
| <a href="#" onclick="openDialog('dialog4', this)">link to help</a> | ||
| <button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button> | ||
| <button id="dialog2_close_btn" type="button" onclick="closeDialog(this)">Close</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Dialog that replaces dialog 1. --> | ||
| <div id="dialog3" role="dialog" aria-labelledby="dialog3_label" | ||
| aria-describedby="dialog3_desc" aria-modal="true" class="hidden"> | ||
| <h2 tabindex="-1" id="dialog3_label" class="dialog_label">Address Added</h2> | ||
| <p id="dialog3_desc" class="dialog_desc"> | ||
| The address you provided has been added to your list of delivery addresses. It is ready | ||
| for immediate use. If you wish to remove it, you can do so from | ||
| <a id="dialog3_profile" href="#" onclick="openDialog('dialog4', this)">your profile.</a> | ||
| </p> | ||
| <div class="dialog_form_actions"> | ||
| <button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="dialog4" role="dialog" aria-labelledby="dialog4_label" | ||
| aria-describedby="dialog4_desc" class="hidden" | ||
| aria-modal="true"> | ||
| <h2 id="dialog4_label" class="dialog_label">End of the Road!</h2> | ||
| <p id="dialog4_desc" class="dialog_desc"> | ||
| You activated a fake link or button that goes nowhere! | ||
| The link or button is present for demonstration purposes only. | ||
| </p> | ||
| <div class="dialog_form_actions"> | ||
| <button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <a id="afterlink" href="#afterlink">Navigate backwards from here</a> | ||
| </div> | ||
| <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div> | ||
| </section> | ||
|
|
||
| <!-- Generated by process-test-directory.js --> | ||
| <div style="position: relative; left: 0; right: 0; height: 2rem;"> | ||
| <button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button> | ||
| </div> | ||
| <!-- End of generated output --></main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters