From 3d76cbd124500f0b5e6ee6a14dfe22189bbd7d4e Mon Sep 17 00:00:00 2001
From: IsaDC <70024509+IsaDC@users.noreply.github.com>
Date: Tue, 4 Jun 2024 17:00:38 -0600
Subject: [PATCH] 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
---
 tests/modal-dialog/data/jaws-commands.csv     |   2 +-
 ...sAddedDialogAndFocusAddressAddedHeading.js |   4 +
 tests/modal-dialog/data/nvda-commands.csv     |   2 +-
 tests/modal-dialog/data/scripts.csv           |   1 +
 tests/modal-dialog/data/tests.csv             |   2 +-
 .../data/voiceover_macos-commands.csv         |   2 +-
 .../reference/2022-4-7_15544/dialog.html      |   2 +-
 ...g.moveFocusToAddDeliveryAddressButton.html |   2 +-
 ...eliveryAddressDialogAndFocusAddButton.html |   2 +-
 ...veryAddressDialogAndFocusCancelButton.html |   2 +-
 ...liveryAddressDialogAndFocusFirstInput.html |   2 +-
 ...ddedDialogAndFocusAddressAddedHeading.html | 195 ++++++++++++++++++
 ...essAddedDialogAndFocusYourProfileLink.html |   2 +-
 ...cationResultDialogAndFocusCloseButton.html |   2 +-
 14 files changed, 211 insertions(+), 11 deletions(-)
 create mode 100644 tests/modal-dialog/data/js/openAddressAddedDialogAndFocusAddressAddedHeading.js
 create mode 100644 tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusAddressAddedHeading.html

diff --git a/tests/modal-dialog/data/jaws-commands.csv b/tests/modal-dialog/data/jaws-commands.csv
index d353b5e81..500605dc8 100644
--- a/tests/modal-dialog/data/jaws-commands.csv
+++ b/tests/modal-dialog/data/jaws-commands.csv
@@ -25,5 +25,5 @@ closeNestedModalDialog,space,virtualCursor,,24.1
 closeNestedModalDialog,enter,virtualCursor,,24.2
 closeNestedModalDialog,space,pcCursor,,24.3
 closeNestedModalDialog,enter,pcCursor,,24.4
-bumpTopEdgeOfNestedModal,ctrl+home up up ins+up,virtualCursor,,30
+bumpTopEdgeOfNestedModal,up up ins+up,virtualCursor,,30
 bumpBottomEdgeOfNestedModal,ctrl+end down down ins+up,virtualCursor,,31
diff --git a/tests/modal-dialog/data/js/openAddressAddedDialogAndFocusAddressAddedHeading.js b/tests/modal-dialog/data/js/openAddressAddedDialogAndFocusAddressAddedHeading.js
new file mode 100644
index 000000000..c8a5c4b19
--- /dev/null
+++ b/tests/modal-dialog/data/js/openAddressAddedDialogAndFocusAddressAddedHeading.js
@@ -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');
diff --git a/tests/modal-dialog/data/nvda-commands.csv b/tests/modal-dialog/data/nvda-commands.csv
index ad369367e..aeb3207d5 100644
--- a/tests/modal-dialog/data/nvda-commands.csv
+++ b/tests/modal-dialog/data/nvda-commands.csv
@@ -25,5 +25,5 @@ closeNestedModalDialog,space,browseMode,,24.1
 closeNestedModalDialog,enter,browseMode,,24.2
 closeNestedModalDialog,space,focusMode,,24.3
 closeNestedModalDialog,enter,focusMode,,24.4
-bumpTopEdgeOfNestedModal,ctrl+home up up ins+up,browseMode,,30
+bumpTopEdgeOfNestedModal,up up ins+up,browseMode,,30
 bumpBottomEdgeOfNestedModal,ctrl+end down down ins+up,browseMode,,31
diff --git a/tests/modal-dialog/data/scripts.csv b/tests/modal-dialog/data/scripts.csv
index ebfa62da0..d8a8d8a0c 100644
--- a/tests/modal-dialog/data/scripts.csv
+++ b/tests/modal-dialog/data/scripts.csv
@@ -5,3 +5,4 @@ openAddDeliveryAddressDialogAndFocusCancelButton,"opens the 'Add Delivery Addres
 openAddDeliveryAddressDialogAndFocusFirstInput,"opens the 'Add Delivery Address' modal dialog, and sets focus on the first input"
 openAddressAddedDialogAndFocusYourProfileLink,"opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog"
 openVerificationResultDialogAndFocusCloseButton,"opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog"
+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"
diff --git a/tests/modal-dialog/data/tests.csv b/tests/modal-dialog/data/tests.csv
index 151805eca..138006c36 100644
--- a/tests/modal-dialog/data/tests.csv
+++ b/tests/modal-dialog/data/tests.csv
@@ -9,5 +9,5 @@ bumpTopEdge,Bump into the top edge of a modal dialog,16,openAddDeliveryAddressDi
 bumpBottomEdge,Bump into the bottom edge of a modal dialog,16.1,openAddDeliveryAddressDialogAndFocusAddButton,"Starting at the 'Add' button inside the dialog, navigate to the bottom of the dialog and make multiple attempts to navigate past the bottom edge.",cursorAtCancelButton
 openNestedModalDialog,Open a nested modal dialog ,20,openAddDeliveryAddressDialogAndFocusAddButton,"Starting at the 'Add' button inside the dialog, activate it to open the nested 'Address Added' dialog.",roleDialog nameAddressAdded dialogDescriptionAsTheAddressYouProvidedHasBeenAddedToYourListDeliveryAddressesItIsReadyForImmediateUseIfYouWishToRemoveItYouCanDoSoFromYourProfile roleFocusedElementButton nameFocusedElementOk
 closeNestedModalDialog,Close a nested modal dialog,30,openVerificationResultDialogAndFocusCloseButton,"Starting at the 'Close' button inside the nested dialog, close the dialog.",roleDialog nameAddDeliveryAddress roleButton nameVerifyAddress
-bumpTopEdgeOfNestedModal,Bump into the top edge of a Nested modal dialog,40,openAddressAddedDialogAndFocusYourProfileLink,"Starting at the 'Your Profile' link inside the nested dialog, navigate to the top of the dialog and make multiple attempts to navigate past the top edge.",cursorAtAddressAddedHeading
+bumpTopEdgeOfNestedModal,Bump into the top edge of a Nested modal dialog,40,openAddressAddedDialogAndFocusAddressAddedHeading,"Starting at the 'Address Added' heading inside the nested dialog, navigate to the top of the dialog and make multiple attempts to navigate past the top edge.",cursorAtAddressAddedHeading
 bumpBottomEdgeOfNestedModal,Bump into the bottom edge of a Nested modal dialog,40.1,openAddressAddedDialogAndFocusYourProfileLink,"Starting at the 'Your Profile' link inside the nested dialog, navigate to the bottom of the dialog and make multiple attempts to navigate past the bottom edge.",cursorAtOKButton
diff --git a/tests/modal-dialog/data/voiceover_macos-commands.csv b/tests/modal-dialog/data/voiceover_macos-commands.csv
index f0ebd6b2c..003cac57b 100644
--- a/tests/modal-dialog/data/voiceover_macos-commands.csv
+++ b/tests/modal-dialog/data/voiceover_macos-commands.csv
@@ -19,5 +19,5 @@ closeNestedModalDialog,esc,,,23
 closeNestedModalDialog,ctrl+opt+space,,,23.1
 closeNestedModalDialog,space,,,23.2
 closeNestedModalDialog,enter,,,23.3
-bumpTopEdgeOfNestedModal,ctrl+opt+home ctrl+opt+left ctrl+opt+left ctrl+opt+f3,,,30
+bumpTopEdgeOfNestedModal,ctrl+opt+left ctrl+opt+left ctrl+opt+f3,,,30
 bumpBottomEdgeOfNestedModal,ctrl+opt+end ctrl+opt+right ctrl+opt+right ctrl+opt+f3,,,31
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.html
index f714d8edc..abef188e2 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.html
@@ -137,7 +137,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.moveFocusToAddDeliveryAddressButton.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.moveFocusToAddDeliveryAddressButton.html
index 498486152..9c42165bb 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.moveFocusToAddDeliveryAddressButton.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.moveFocusToAddDeliveryAddressButton.html
@@ -155,7 +155,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusAddButton.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusAddButton.html
index 3a208e913..2f01d94cc 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusAddButton.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusAddButton.html
@@ -156,7 +156,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusCancelButton.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusCancelButton.html
index 6b07b2027..106d54825 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusCancelButton.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusCancelButton.html
@@ -156,7 +156,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusFirstInput.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusFirstInput.html
index 9c83316de..94fe88b2a 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusFirstInput.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddDeliveryAddressDialogAndFocusFirstInput.html
@@ -156,7 +156,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusAddressAddedHeading.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusAddressAddedHeading.html
new file mode 100644
index 000000000..3e4d4b52f
--- /dev/null
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusAddressAddedHeading.html
@@ -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>
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusYourProfileLink.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusYourProfileLink.html
index df6ef0aaf..52c88d5ef 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusYourProfileLink.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openAddressAddedDialogAndFocusYourProfileLink.html
@@ -157,7 +157,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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
diff --git a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openVerificationResultDialogAndFocusCloseButton.html b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openVerificationResultDialogAndFocusCloseButton.html
index 99524e44d..a72319122 100644
--- a/tests/modal-dialog/reference/2022-4-7_15544/dialog.openVerificationResultDialogAndFocusCloseButton.html
+++ b/tests/modal-dialog/reference/2022-4-7_15544/dialog.openVerificationResultDialogAndFocusCloseButton.html
@@ -157,7 +157,7 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
           <!--  Dialog that replaces dialog 1.  -->
           <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
                aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
-            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <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