From dd20171ed441ff4a263aa664252be6d7ae3b1361 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 19:56:10 -0800
Subject: [PATCH 01/22] Create common/keyboard-accessibility-utils.js

---
 common/keyboard-accessibility-utils.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 common/keyboard-accessibility-utils.js

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
new file mode 100644
index 00000000000000..8cbdc240ccd83d
--- /dev/null
+++ b/common/keyboard-accessibility-utils.js
@@ -0,0 +1,5 @@
+/* Utilities for testing keyboard-focused accessibility */
+
+const keyboardAccessibilityUtils {
+
+};

From 18545d82299717beb0aad24c843f11a087860db8 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 20:23:11 -0800
Subject: [PATCH 02/22] Add verifyElementsAreFocusable()

---
 common/keyboard-accessibility-utils.js | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 8cbdc240ccd83d..5f47ee4011864a 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -1,5 +1,29 @@
-/* Utilities for testing keyboard-focused accessibility */
+/* Utilities for keyboard-focused accessibility */
 
-const keyboardAccessibilityUtils {
+const keyboardAccessibilityUtils = {
 
+  /*
+  Tests that all elements matching selector can
+  receive focus (and related) events.
+
+    Ex: <div role="button"
+            tabindex="0"
+            data-testname="div with role button and tabindex is focusable"
+            class="ex">
+
+        keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+  */
+  verifyElementsAreFocusable: function(selector) {
+    const els = document.querySelectorAll(selector);
+        if (!els.length) {
+            throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+        }
+        for (const el of els) {
+            let testName = el.getAttribute("data-testname");
+            test(() => {
+                el.focus();
+                assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
+              }, `${testName}`);
+        }
+    }
 };

From 0cef09bb2c4da7ea92686ee865cfceaaf9b04602 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 21:19:32 -0800
Subject: [PATCH 03/22] Add verifyElementsAreTabbable()

---
 common/keyboard-accessibility-utils.js | 51 +++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 5f47ee4011864a..5459c07a7b69c4 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -14,16 +14,47 @@ const keyboardAccessibilityUtils = {
         keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
+  const els = document.querySelectorAll(selector);
+    if (!els.length) {
+        throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      test(() => {
+          el.focus();
+          assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
+        }, `${testName}`);
+    }
+  },
+
+
+  /*
+  Tests that all elements matching selector are
+  tabbable, i.e., present in the keyboard tab order.
+
+    Ex: <button style="display: contents;"
+          data-testname="button with display: contents is in keyboard tab order"
+          class="ex-tabbable">
+
+        keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+  */
+  verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);
-        if (!els.length) {
-            throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
-        }
-        for (const el of els) {
-            let testName = el.getAttribute("data-testname");
-            test(() => {
-                el.focus();
-                assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
-              }, `${testName}`);
-        }
+    let parentElement = "";
+    if (!els.length) {
+        throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      promise_test(async t => {
+        const focusablePreviousElement = document.createElement("a", { href: "#" }, "A focusable link");
+        el.parentNode.insertBefore(focusablePreviousElement, el);
+        focusablePreviousElement.focus();
+        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous sibling is focused");
+        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
+        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is WebDriver Tab key codepoint (https://w3c.github.io/webdriver/#keyboard-actions)
+        assert_equals(document.activeElement, el, "Element is tabbable");
+      }, `${testName}`);
     }
+  },
 };

From aa83477bc010bf1897019cd91ca161bf5bc492ad Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 21:24:20 -0800
Subject: [PATCH 04/22] Minor changes to verifyElementsAreTabbable()

---
 common/keyboard-accessibility-utils.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 5459c07a7b69c4..e63d8a00e27f86 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -6,24 +6,24 @@ const keyboardAccessibilityUtils = {
   Tests that all elements matching selector can
   receive focus (and related) events.
 
-    Ex: <div role="button"
-            tabindex="0"
-            data-testname="div with role button and tabindex is focusable"
-            class="ex">
+  Ex: <div role="button"
+          tabindex="0"
+          data-testname="div with role button and tabindex is focusable"
+          class="ex">
 
-        keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
   const els = document.querySelectorAll(selector);
     if (!els.length) {
-        throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+      throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
     }
     for (const el of els) {
       let testName = el.getAttribute("data-testname");
       test(() => {
-          el.focus();
-          assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
-        }, `${testName}`);
+        el.focus();
+        assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
+      }, `${testName}`);
     }
   },
 
@@ -42,7 +42,7 @@ const keyboardAccessibilityUtils = {
     const els = document.querySelectorAll(selector);
     let parentElement = "";
     if (!els.length) {
-        throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+      throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
     }
     for (const el of els) {
       let testName = el.getAttribute("data-testname");
@@ -50,9 +50,9 @@ const keyboardAccessibilityUtils = {
         const focusablePreviousElement = document.createElement("a", { href: "#" }, "A focusable link");
         el.parentNode.insertBefore(focusablePreviousElement, el);
         focusablePreviousElement.focus();
-        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous sibling is focused");
+        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is WebDriver Tab key codepoint (https://w3c.github.io/webdriver/#keyboard-actions)
+        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is the Tab key (see WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions)
         assert_equals(document.activeElement, el, "Element is tabbable");
       }, `${testName}`);
     }

From 89b3048b37f6089e4aad222346bd799dd6998db3 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 21:29:08 -0800
Subject: [PATCH 05/22] More changes to verifyElementsAreTabbable()

---
 common/keyboard-accessibility-utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index e63d8a00e27f86..fbb43d20b9d88f 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -40,20 +40,20 @@ const keyboardAccessibilityUtils = {
   */
   verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);
-    let parentElement = "";
+    const focusablePreviousElement = document.createElement("a", { href: "#" }, "A focusable link");
     if (!els.length) {
       throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
     }
     for (const el of els) {
       let testName = el.getAttribute("data-testname");
       promise_test(async t => {
-        const focusablePreviousElement = document.createElement("a", { href: "#" }, "A focusable link");
         el.parentNode.insertBefore(focusablePreviousElement, el);
         focusablePreviousElement.focus();
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
         await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is the Tab key (see WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions)
         assert_equals(document.activeElement, el, "Element is tabbable");
+        document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);
     }
   },

From 84d65417a4792c39cab768211942facf27e81a7c Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 22:10:27 -0800
Subject: [PATCH 06/22] Misc changes

---
 common/keyboard-accessibility-utils.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index fbb43d20b9d88f..a3f350a80eee52 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -1,6 +1,6 @@
 /* Utilities for keyboard-focused accessibility */
 
-const keyboardAccessibilityUtils = {
+const KeyboardAccessibilityUtils = {
 
   /*
   Tests that all elements matching selector can
@@ -32,15 +32,17 @@ const keyboardAccessibilityUtils = {
   Tests that all elements matching selector are
   tabbable, i.e., present in the keyboard tab order.
 
-    Ex: <button style="display: contents;"
-          data-testname="button with display: contents is in keyboard tab order"
-          class="ex-tabbable">
+  Ex: <button style="display: contents;"
+        data-testname="button with display: contents is in keyboard tab order"
+        class="ex-tabbable">
 
-        keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
   */
   verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);
-    const focusablePreviousElement = document.createElement("a", { href: "#" }, "A focusable link");
+    const focusablePreviousElement = document.createElement("a");
+    focusablePreviousElement.setAttribute("href", "#");
+    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
     if (!els.length) {
       throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
     }

From bd1651af58e15b8c3d92423991bff1d51977251e Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 22:30:48 -0800
Subject: [PATCH 07/22] Add verifyElementIsFocused()

---
 common/keyboard-accessibility-utils.js | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index a3f350a80eee52..db3bb6a6a95697 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -11,7 +11,7 @@ const KeyboardAccessibilityUtils = {
           data-testname="div with role button and tabindex is focusable"
           class="ex">
 
-      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+      KeyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
   const els = document.querySelectorAll(selector);
@@ -27,6 +27,30 @@ const KeyboardAccessibilityUtils = {
     }
   },
 
+  /*
+  Tests that all elements matching selector
+  are currently focused at the point of test execution.
+
+  Ex: <div role="button"
+          tabindex="0"
+          data-testname="native button is focused after associated <dialog> dismissal"
+          class="ex-focused">
+
+      KeyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
+  */
+  verifyElementIsFocused: function(selector) {
+    const els = document.querySelectorAll(selector);
+    if (!els.length) {
+      throw `Selector passed in verifyElementIsFocused("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      test(() => {
+        assert_equals(document.activeElement, el, "Element is currently focused");
+      }, `${testName}`);
+    }
+  },
+
 
   /*
   Tests that all elements matching selector are
@@ -36,7 +60,7 @@ const KeyboardAccessibilityUtils = {
         data-testname="button with display: contents is in keyboard tab order"
         class="ex-tabbable">
 
-      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+      KeyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
   */
   verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);

From 70edfabe9765c0eed2abcda5961cf2d04662ba02 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 22:33:05 -0800
Subject: [PATCH 08/22] Misc documentation fix

---
 common/keyboard-accessibility-utils.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index db3bb6a6a95697..9f565ac4bd087a 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -10,6 +10,7 @@ const KeyboardAccessibilityUtils = {
           tabindex="0"
           data-testname="div with role button and tabindex is focusable"
           class="ex">
+      </div>
 
       KeyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
@@ -31,10 +32,10 @@ const KeyboardAccessibilityUtils = {
   Tests that all elements matching selector
   are currently focused at the point of test execution.
 
-  Ex: <div role="button"
-          tabindex="0"
-          data-testname="native button is focused after associated <dialog> dismissal"
+  Ex: <button tabindex="0"
+          data-testname="button is focused after associated <dialog> dismissal"
           class="ex-focused">
+      </button>
 
       KeyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
   */
@@ -59,6 +60,7 @@ const KeyboardAccessibilityUtils = {
   Ex: <button style="display: contents;"
         data-testname="button with display: contents is in keyboard tab order"
         class="ex-tabbable">
+      </button>
 
       KeyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
   */

From 1adf26aa63354ead0607f01428b41c48798e6800 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 22:57:48 -0800
Subject: [PATCH 09/22] Add verifyElementsDoNotCauseKeyboardTrap()

---
 common/keyboard-accessibility-utils.js | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 9f565ac4bd087a..d2f5619a8706c6 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -85,4 +85,40 @@ const KeyboardAccessibilityUtils = {
       }, `${testName}`);
     }
   },
+
+  /*
+  Tests that all elements matching selector are
+  tabbable and do not create a focus trap.
+
+  Ex: <button style="display: flex;"
+        data-testname="button with display: flex does not cause keyboard trap"
+        class="ex-no-keyboard-trap">
+      </button>
+
+      KeyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
+  */
+  verifyElementsDoNotCauseKeyboardTrap: function(selector) {
+    const els = document.querySelectorAll(selector);
+    const focusablePreviousElement = document.createElement("a");
+    focusablePreviousElement.setAttribute("href", "#");
+    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
+    if (!els.length) {
+      throw `Selector passed in verifyElementsDoNotCauseKeyboardTrap("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      promise_test(async t => {
+        el.focus();
+        assert_equals(document.activeElement, el, "precondition: el is currently focused");
+        el.parentNode.insertBefore(focusablePreviousElement, el);
+        await test_driver.send_keys(el, "\uE004" + "\uE008");
+        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
+        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
+        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is the Tab key (see WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions)
+        assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
+        document.body.removeChild(focusablePreviousElement);
+      }, `${testName}`);
+    }
+  },
 };
+

From 3fca138550b5441a532508e7b2b215c6c9701f74 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 23:27:56 -0800
Subject: [PATCH 10/22] Updates to keyboard trap method, add keys{} object for
 keystrokes

---
 common/keyboard-accessibility-utils.js | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index d2f5619a8706c6..9cfee45b048fbb 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -1,6 +1,12 @@
 /* Utilities for keyboard-focused accessibility */
 
-const KeyboardAccessibilityUtils = {
+const keys = {
+  // See WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions
+  "Tab": "\uE004",
+  "ShiftAndTab": "\uE008" + "\uE004",
+};
+
+const keyboardAccessibilityUtils = {
 
   /*
   Tests that all elements matching selector can
@@ -12,7 +18,7 @@ const KeyboardAccessibilityUtils = {
           class="ex">
       </div>
 
-      KeyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
   const els = document.querySelectorAll(selector);
@@ -37,7 +43,7 @@ const KeyboardAccessibilityUtils = {
           class="ex-focused">
       </button>
 
-      KeyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
+      keyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
   */
   verifyElementIsFocused: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -62,7 +68,7 @@ const KeyboardAccessibilityUtils = {
         class="ex-tabbable">
       </button>
 
-      KeyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
   */
   verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -79,7 +85,7 @@ const KeyboardAccessibilityUtils = {
         focusablePreviousElement.focus();
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is the Tab key (see WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions)
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab); //
         assert_equals(document.activeElement, el, "Element is tabbable");
         document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);
@@ -95,7 +101,7 @@ const KeyboardAccessibilityUtils = {
         class="ex-no-keyboard-trap">
       </button>
 
-      KeyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
+      keyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
   */
   verifyElementsDoNotCauseKeyboardTrap: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -111,14 +117,13 @@ const KeyboardAccessibilityUtils = {
         el.focus();
         assert_equals(document.activeElement, el, "precondition: el is currently focused");
         el.parentNode.insertBefore(focusablePreviousElement, el);
-        await test_driver.send_keys(el, "\uE004" + "\uE008");
+        await test_driver.send_keys(el, keys.ShiftAndTab);
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, "\uE004"); // \uE004 is the Tab key (see WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions)
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
         assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
         document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);
     }
   },
-};
-
+};
\ No newline at end of file

From 2ece4ca340b7dcee43dbb71f1d420fc6402e7905 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 23:49:38 -0800
Subject: [PATCH 11/22] More key related changes

---
 common/keyboard-accessibility-utils.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 9cfee45b048fbb..a41c8c6b3ecd41 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -2,8 +2,8 @@
 
 const keys = {
   // See WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions
+  "LeftShiftAndTab": "\uE008" + "\uE004", // Left Shift = \uE008 and Right Shift = \uE050 however, they should be indistinguishable
   "Tab": "\uE004",
-  "ShiftAndTab": "\uE008" + "\uE004",
 };
 
 const keyboardAccessibilityUtils = {
@@ -13,15 +13,15 @@ const keyboardAccessibilityUtils = {
   receive focus (and related) events.
 
   Ex: <div role="button"
-          tabindex="0"
-          data-testname="div with role button and tabindex is focusable"
-          class="ex">
+        tabindex="0"
+        data-testname="div with role button and tabindex is focusable"
+        class="ex">
       </div>
 
       keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
-  const els = document.querySelectorAll(selector);
+    const els = document.querySelectorAll(selector);
     if (!els.length) {
       throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
     }
@@ -39,8 +39,8 @@ const keyboardAccessibilityUtils = {
   are currently focused at the point of test execution.
 
   Ex: <button tabindex="0"
-          data-testname="button is focused after associated <dialog> dismissal"
-          class="ex-focused">
+        data-testname="button is focused after associated <dialog> dismissal"
+        class="ex-focused">
       </button>
 
       keyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
@@ -117,10 +117,10 @@ const keyboardAccessibilityUtils = {
         el.focus();
         assert_equals(document.activeElement, el, "precondition: el is currently focused");
         el.parentNode.insertBefore(focusablePreviousElement, el);
-        await test_driver.send_keys(el, keys.ShiftAndTab);
+        await test_driver.send_keys(el, keys.LeftShiftAndTab);
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
+        await test_driver.send_keys(focusablePreviousElement, keys.LeftShiftAndTab);
         assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
         document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);

From 1f8c36a62de95cbdc6481b0161a3d862be9542b9 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Wed, 31 Jan 2024 23:51:29 -0800
Subject: [PATCH 12/22] Minor key reference update

---
 common/keyboard-accessibility-utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index a41c8c6b3ecd41..af6f5fa44d3dc1 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -120,7 +120,7 @@ const keyboardAccessibilityUtils = {
         await test_driver.send_keys(el, keys.LeftShiftAndTab);
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.LeftShiftAndTab);
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
         assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
         document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);

From d69c461ebcc0ded755fa1e7f6be18ab17a235cd0 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 00:29:14 -0800
Subject: [PATCH 13/22] Fix documentation references

---
 common/keyboard-accessibility-utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index af6f5fa44d3dc1..0f587148361720 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -15,7 +15,7 @@ const keyboardAccessibilityUtils = {
   Ex: <div role="button"
         tabindex="0"
         data-testname="div with role button and tabindex is focusable"
-        class="ex">
+        class="ex-focusable">
       </div>
 
       keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
@@ -38,8 +38,8 @@ const keyboardAccessibilityUtils = {
   Tests that all elements matching selector
   are currently focused at the point of test execution.
 
-  Ex: <button tabindex="0"
-        data-testname="button is focused after associated <dialog> dismissal"
+  Ex: <button
+        data-testname="button is focused after associated <dialog> Escape key dismissal"
         class="ex-focused">
       </button>
 

From 95ad8a4816a40e5818148106a94456b2ac5e0590 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 09:17:03 -0800
Subject: [PATCH 14/22] Remove extraneous comment

---
 common/keyboard-accessibility-utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
index 0f587148361720..336c9613b196d3 100644
--- a/common/keyboard-accessibility-utils.js
+++ b/common/keyboard-accessibility-utils.js
@@ -85,7 +85,7 @@ const keyboardAccessibilityUtils = {
         focusablePreviousElement.focus();
         assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab); //
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
         assert_equals(document.activeElement, el, "Element is tabbable");
         document.body.removeChild(focusablePreviousElement);
       }, `${testName}`);

From 8e9dc0e78534f80c460a5ca664fbeb0db623b730 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 09:44:40 -0800
Subject: [PATCH 15/22] Change filename, keyboard-accessibility-utils.js -> 
 keyboard-utils.js

---
 common/keyboard-utils.js | 129 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 common/keyboard-utils.js

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
new file mode 100644
index 00000000000000..7024239b98a2f0
--- /dev/null
+++ b/common/keyboard-utils.js
@@ -0,0 +1,129 @@
+/* Utilities for keyboard-focused accessibility */
+
+const keys = {
+  // See WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions
+  "LeftShiftAndTab": "\uE008" + "\uE004", // Left Shift = \uE008 and Right Shift = \uE050 however, they should be indistinguishable
+  "Tab": "\uE004",
+};
+
+const keyboardAccessibilityUtils = {
+
+  /*
+  Tests that all elements matching selector can
+  receive focus (and related) events.
+
+  Ex: <div role="button"
+        tabindex="0"
+        data-testname="div with role button and tabindex=0 is focusable"
+        class="ex-focusable">
+      </div>
+
+      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+  */
+  verifyElementsAreFocusable: function(selector) {
+    const els = document.querySelectorAll(selector);
+    if (!els.length) {
+      throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      test(() => {
+        el.focus();
+        assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
+      }, `${testName}`);
+    }
+  },
+
+  /*
+  Tests that all elements matching selector
+  are currently focused at the point of test execution.
+
+  Ex: <button
+        data-testname="button is focused after associated <dialog> escape key dismissal"
+        class="ex-focused">
+      </button>
+
+      keyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
+  */
+  verifyElementIsFocused: function(selector) {
+    const els = document.querySelectorAll(selector);
+    if (!els.length) {
+      throw `Selector passed in verifyElementIsFocused("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      test(() => {
+        assert_equals(document.activeElement, el, "Element is currently focused");
+      }, `${testName}`);
+    }
+  },
+
+
+  /*
+  Tests that all elements matching selector are
+  tabbable, i.e., present in the keyboard tab order.
+
+  Ex: <button style="display: contents;"
+        data-testname="button with display: contents is in keyboard tab order"
+        class="ex-tabbable">
+      </button>
+
+      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+  */
+  verifyElementsAreTabbable: function(selector) {
+    const els = document.querySelectorAll(selector);
+    const focusablePreviousElement = document.createElement("a");
+    focusablePreviousElement.setAttribute("href", "#");
+    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
+    if (!els.length) {
+      throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      promise_test(async t => {
+        el.parentNode.insertBefore(focusablePreviousElement, el);
+        focusablePreviousElement.focus();
+        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
+        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
+        assert_equals(document.activeElement, el, "Element is tabbable");
+        document.body.removeChild(focusablePreviousElement);
+      }, `${testName}`);
+    }
+  },
+
+  /*
+  Tests that all elements matching selector are
+  tabbable and do not create a focus trap.
+
+  Ex: <button style="display: flex;"
+        data-testname="button with display: flex does not cause keyboard trap"
+        class="ex-no-keyboard-trap">
+      </button>
+
+      keyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
+  */
+  verifyElementsDoNotCauseKeyboardTrap: function(selector) {
+    const els = document.querySelectorAll(selector);
+    const focusablePreviousElement = document.createElement("a");
+    focusablePreviousElement.setAttribute("href", "#");
+    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
+    if (!els.length) {
+      throw `Selector passed in verifyElementsDoNotCauseKeyboardTrap("${selector}") should match at least one element.`;
+    }
+    for (const el of els) {
+      let testName = el.getAttribute("data-testname");
+      promise_test(async t => {
+        el.focus();
+        assert_equals(document.activeElement, el, "precondition: el is currently focused");
+        el.parentNode.insertBefore(focusablePreviousElement, el);
+        await test_driver.send_keys(el, keys.LeftShiftAndTab);
+        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
+        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
+        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
+        assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
+        document.body.removeChild(focusablePreviousElement);
+      }, `${testName}`);
+    }
+  },
+};
\ No newline at end of file

From dfa528a4b999f3041b3036693e5e013541a02d2e Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 09:56:23 -0800
Subject: [PATCH 16/22] Remove accessibility references

---
 common/keyboard-utils.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
index 7024239b98a2f0..8ac656de1ccc4d 100644
--- a/common/keyboard-utils.js
+++ b/common/keyboard-utils.js
@@ -1,4 +1,4 @@
-/* Utilities for keyboard-focused accessibility */
+/* Utilities for keyboard testing */
 
 const keys = {
   // See WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions
@@ -6,7 +6,7 @@ const keys = {
   "Tab": "\uE004",
 };
 
-const keyboardAccessibilityUtils = {
+const keyboardUtils = {
 
   /*
   Tests that all elements matching selector can
@@ -18,7 +18,7 @@ const keyboardAccessibilityUtils = {
         class="ex-focusable">
       </div>
 
-      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
+      keyboardUtils.verifyElementsAreFocusable(".ex-focusable")
   */
   verifyElementsAreFocusable: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -43,7 +43,7 @@ const keyboardAccessibilityUtils = {
         class="ex-focused">
       </button>
 
-      keyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
+      keyboardUtils.verifyElementIsFocused(".ex-focused")
   */
   verifyElementIsFocused: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -68,7 +68,7 @@ const keyboardAccessibilityUtils = {
         class="ex-tabbable">
       </button>
 
-      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
+      keyboardUtils.verifyElementsAreTabbable(".ex-tabbable")
   */
   verifyElementsAreTabbable: function(selector) {
     const els = document.querySelectorAll(selector);
@@ -101,7 +101,7 @@ const keyboardAccessibilityUtils = {
         class="ex-no-keyboard-trap">
       </button>
 
-      keyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
+      keyboardUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
   */
   verifyElementsDoNotCauseKeyboardTrap: function(selector) {
     const els = document.querySelectorAll(selector);

From 54de2703793caa87d7285d5353ed94e8a3d88415 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 09:57:06 -0800
Subject: [PATCH 17/22] Remove keyboard-accessibility-utils.js

---
 common/keyboard-accessibility-utils.js | 129 -------------------------
 1 file changed, 129 deletions(-)
 delete mode 100644 common/keyboard-accessibility-utils.js

diff --git a/common/keyboard-accessibility-utils.js b/common/keyboard-accessibility-utils.js
deleted file mode 100644
index 336c9613b196d3..00000000000000
--- a/common/keyboard-accessibility-utils.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/* Utilities for keyboard-focused accessibility */
-
-const keys = {
-  // See WebDriver key codepoints: https://w3c.github.io/webdriver/#keyboard-actions
-  "LeftShiftAndTab": "\uE008" + "\uE004", // Left Shift = \uE008 and Right Shift = \uE050 however, they should be indistinguishable
-  "Tab": "\uE004",
-};
-
-const keyboardAccessibilityUtils = {
-
-  /*
-  Tests that all elements matching selector can
-  receive focus (and related) events.
-
-  Ex: <div role="button"
-        tabindex="0"
-        data-testname="div with role button and tabindex is focusable"
-        class="ex-focusable">
-      </div>
-
-      keyboardAccessibilityUtils.verifyElementsAreFocusable(".ex-focusable")
-  */
-  verifyElementsAreFocusable: function(selector) {
-    const els = document.querySelectorAll(selector);
-    if (!els.length) {
-      throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
-    }
-    for (const el of els) {
-      let testName = el.getAttribute("data-testname");
-      test(() => {
-        el.focus();
-        assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
-      }, `${testName}`);
-    }
-  },
-
-  /*
-  Tests that all elements matching selector
-  are currently focused at the point of test execution.
-
-  Ex: <button
-        data-testname="button is focused after associated <dialog> Escape key dismissal"
-        class="ex-focused">
-      </button>
-
-      keyboardAccessibilityUtils.verifyElementIsFocused(".ex-focused")
-  */
-  verifyElementIsFocused: function(selector) {
-    const els = document.querySelectorAll(selector);
-    if (!els.length) {
-      throw `Selector passed in verifyElementIsFocused("${selector}") should match at least one element.`;
-    }
-    for (const el of els) {
-      let testName = el.getAttribute("data-testname");
-      test(() => {
-        assert_equals(document.activeElement, el, "Element is currently focused");
-      }, `${testName}`);
-    }
-  },
-
-
-  /*
-  Tests that all elements matching selector are
-  tabbable, i.e., present in the keyboard tab order.
-
-  Ex: <button style="display: contents;"
-        data-testname="button with display: contents is in keyboard tab order"
-        class="ex-tabbable">
-      </button>
-
-      keyboardAccessibilityUtils.verifyElementsAreTabbable(".ex-tabbable")
-  */
-  verifyElementsAreTabbable: function(selector) {
-    const els = document.querySelectorAll(selector);
-    const focusablePreviousElement = document.createElement("a");
-    focusablePreviousElement.setAttribute("href", "#");
-    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
-    if (!els.length) {
-      throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
-    }
-    for (const el of els) {
-      let testName = el.getAttribute("data-testname");
-      promise_test(async t => {
-        el.parentNode.insertBefore(focusablePreviousElement, el);
-        focusablePreviousElement.focus();
-        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
-        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
-        assert_equals(document.activeElement, el, "Element is tabbable");
-        document.body.removeChild(focusablePreviousElement);
-      }, `${testName}`);
-    }
-  },
-
-  /*
-  Tests that all elements matching selector are
-  tabbable and do not create a focus trap.
-
-  Ex: <button style="display: flex;"
-        data-testname="button with display: flex does not cause keyboard trap"
-        class="ex-no-keyboard-trap">
-      </button>
-
-      keyboardAccessibilityUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap")
-  */
-  verifyElementsDoNotCauseKeyboardTrap: function(selector) {
-    const els = document.querySelectorAll(selector);
-    const focusablePreviousElement = document.createElement("a");
-    focusablePreviousElement.setAttribute("href", "#");
-    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
-    if (!els.length) {
-      throw `Selector passed in verifyElementsDoNotCauseKeyboardTrap("${selector}") should match at least one element.`;
-    }
-    for (const el of els) {
-      let testName = el.getAttribute("data-testname");
-      promise_test(async t => {
-        el.focus();
-        assert_equals(document.activeElement, el, "precondition: el is currently focused");
-        el.parentNode.insertBefore(focusablePreviousElement, el);
-        await test_driver.send_keys(el, keys.LeftShiftAndTab);
-        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
-        assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
-        assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
-        document.body.removeChild(focusablePreviousElement);
-      }, `${testName}`);
-    }
-  },
-};
\ No newline at end of file

From 2f1f4bb0a5df24add2cecab9ce03abfdced708f3 Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Thu, 1 Feb 2024 10:06:34 -0800
Subject: [PATCH 18/22] Change tabbable/focusable to tab focusable/script
 focusable

---
 common/keyboard-utils.js | 52 ++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
index 8ac656de1ccc4d..bf4262a2ea9ba2 100644
--- a/common/keyboard-utils.js
+++ b/common/keyboard-utils.js
@@ -15,15 +15,15 @@ const keyboardUtils = {
   Ex: <div role="button"
         tabindex="0"
         data-testname="div with role button and tabindex=0 is focusable"
-        class="ex-focusable">
+        class="ex-script-focusable">
       </div>
 
-      keyboardUtils.verifyElementsAreFocusable(".ex-focusable")
+      keyboardUtils.verifyElementsAreScriptFocusable(".ex-script-focusable")
   */
-  verifyElementsAreFocusable: function(selector) {
+  verifyElementsAreScriptFocusable: function(selector) {
     const els = document.querySelectorAll(selector);
     if (!els.length) {
-      throw `Selector passed in verifyElementsAreFocusable("${selector}") should match at least one element.`;
+      throw `Selector passed in verifyElementsAreScriptFocusable("${selector}") should match at least one element.`;
     }
     for (const el of els) {
       let testName = el.getAttribute("data-testname");
@@ -61,40 +61,40 @@ const keyboardUtils = {
 
   /*
   Tests that all elements matching selector are
-  tabbable, i.e., present in the keyboard tab order.
+  tab focusable, i.e., present in the keyboard tab order.
 
   Ex: <button style="display: contents;"
         data-testname="button with display: contents is in keyboard tab order"
-        class="ex-tabbable">
+        class="ex-tab-focusable">
       </button>
 
-      keyboardUtils.verifyElementsAreTabbable(".ex-tabbable")
+      keyboardUtils.verifyElementsAreTabFocusable(".ex-tab-focusable")
   */
-  verifyElementsAreTabbable: function(selector) {
+  verifyElementsAreTabFocusable: function(selector) {
     const els = document.querySelectorAll(selector);
-    const focusablePreviousElement = document.createElement("a");
-    focusablePreviousElement.setAttribute("href", "#");
-    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
+    const focusablePreviousLinkElement = document.createElement("a");
+    focusablePreviousLinkElement.setAttribute("href", "#");
+    focusablePreviousLinkElement.appendChild(document.createTextNode("a focusable link"));
     if (!els.length) {
-      throw `Selector passed in verifyElementsAreTabbable("${selector}") should match at least one element.`;
+      throw `Selector passed in verifyElementsAreTabFocusable("${selector}") should match at least one element.`;
     }
     for (const el of els) {
       let testName = el.getAttribute("data-testname");
       promise_test(async t => {
-        el.parentNode.insertBefore(focusablePreviousElement, el);
-        focusablePreviousElement.focus();
-        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
+        el.parentNode.insertBefore(focusablePreviousLinkElement, el);
+        focusablePreviousLinkElement.focus();
+        assert_equals(document.activeElement, focusablePreviousLinkElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
-        assert_equals(document.activeElement, el, "Element is tabbable");
-        document.body.removeChild(focusablePreviousElement);
+        await test_driver.send_keys(focusablePreviousLinkElement, keys.Tab);
+        assert_equals(document.activeElement, el, "Element is tab focusable");
+        document.body.removeChild(focusablePreviousLinkElement);
       }, `${testName}`);
     }
   },
 
   /*
   Tests that all elements matching selector are
-  tabbable and do not create a focus trap.
+  tab focusable and do not create a focus trap.
 
   Ex: <button style="display: flex;"
         data-testname="button with display: flex does not cause keyboard trap"
@@ -105,9 +105,9 @@ const keyboardUtils = {
   */
   verifyElementsDoNotCauseKeyboardTrap: function(selector) {
     const els = document.querySelectorAll(selector);
-    const focusablePreviousElement = document.createElement("a");
-    focusablePreviousElement.setAttribute("href", "#");
-    focusablePreviousElement.appendChild(document.createTextNode("a focusable link"));
+    const focusablePreviousLinkElement = document.createElement("a");
+    focusablePreviousLinkElement.setAttribute("href", "#");
+    focusablePreviousLinkElement.appendChild(document.createTextNode("a focusable link"));
     if (!els.length) {
       throw `Selector passed in verifyElementsDoNotCauseKeyboardTrap("${selector}") should match at least one element.`;
     }
@@ -116,13 +116,13 @@ const keyboardUtils = {
       promise_test(async t => {
         el.focus();
         assert_equals(document.activeElement, el, "precondition: el is currently focused");
-        el.parentNode.insertBefore(focusablePreviousElement, el);
+        el.parentNode.insertBefore(focusablePreviousLinkElement, el);
         await test_driver.send_keys(el, keys.LeftShiftAndTab);
-        assert_equals(document.activeElement, focusablePreviousElement, "precondition: el's previous focusable element is currently focused");
+        assert_equals(document.activeElement, focusablePreviousLinkElement, "precondition: el's previous focusable element is currently focused");
         assert_not_equals(document.activeElement, el, "precondition: el is not focused");
-        await test_driver.send_keys(focusablePreviousElement, keys.Tab);
+        await test_driver.send_keys(focusablePreviousLinkElement, keys.Tab);
         assert_equals(document.activeElement, el, "el has successfully lost and received focus, and is now focused");
-        document.body.removeChild(focusablePreviousElement);
+        document.body.removeChild(focusablePreviousLinkElement);
       }, `${testName}`);
     }
   },

From 0e97f0c610eb8f0c4ee45d3412d00731d3d5945f Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Sat, 3 Feb 2024 15:41:19 -0800
Subject: [PATCH 19/22] Create function shell for
 findAllFocusableDescendantNodes()

---
 common/keyboard-utils.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
index bf4262a2ea9ba2..65b70700266343 100644
--- a/common/keyboard-utils.js
+++ b/common/keyboard-utils.js
@@ -126,4 +126,11 @@ const keyboardUtils = {
       }, `${testName}`);
     }
   },
-};
\ No newline at end of file
+
+  /*
+  Helper function that returns all of a
+  node's focusable descendants.
+  */
+  findAllFocusableDescendantNodes: function(parentNode)  {
+  },
+};

From 5e502b86ef0421f6374520926f0e7971c45aeebd Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Sat, 3 Feb 2024 15:43:09 -0800
Subject: [PATCH 20/22] Minor doc fix for findAllFocusableDescendantNodes()

---
 common/keyboard-utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
index 65b70700266343..b56bc3a8e30f82 100644
--- a/common/keyboard-utils.js
+++ b/common/keyboard-utils.js
@@ -128,8 +128,8 @@ const keyboardUtils = {
   },
 
   /*
-  Helper function that returns all of a
-  node's focusable descendants.
+  Helper function that returns all focusable
+  descendants for a parent node.
   */
   findAllFocusableDescendantNodes: function(parentNode)  {
   },

From 0175f3beb8c1062f2789e17341dad0828537f78a Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Sat, 3 Feb 2024 16:25:20 -0800
Subject: [PATCH 21/22] Remove focusable elements function (for now)

---
 common/keyboard-utils.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/common/keyboard-utils.js b/common/keyboard-utils.js
index b56bc3a8e30f82..bf4262a2ea9ba2 100644
--- a/common/keyboard-utils.js
+++ b/common/keyboard-utils.js
@@ -126,11 +126,4 @@ const keyboardUtils = {
       }, `${testName}`);
     }
   },
-
-  /*
-  Helper function that returns all focusable
-  descendants for a parent node.
-  */
-  findAllFocusableDescendantNodes: function(parentNode)  {
-  },
-};
+};
\ No newline at end of file

From d8b3ffcc22b8a66bc120e4076c524dd2cc6b4e7e Mon Sep 17 00:00:00 2001
From: Rahim Abdi <rahim_abdi@apple.com>
Date: Sun, 5 May 2024 12:29:01 -0700
Subject: [PATCH 22/22] add tests for keyboard trap check

---
 .../keyboard/keyboard-utils-test.html         | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 accessibility/keyboard/keyboard-utils-test.html

diff --git a/accessibility/keyboard/keyboard-utils-test.html b/accessibility/keyboard/keyboard-utils-test.html
new file mode 100644
index 00000000000000..91215dcf373939
--- /dev/null
+++ b/accessibility/keyboard/keyboard-utils-test.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+  <title>Tests for keyboard-utils.js' keyboard trap check</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <script src="/resources/testdriver-actions.js"></script>
+  <script src="/common/keyboard-utils.js"></script>
+</head>
+<body>
+
+  <h1>Tests for keyboard-utils.js' keyboard trap check</h1>
+
+  <button class="ex-no-keyboard-trap" data-testname="button does not cause keyboard focus trap">x</button>
+  <a href="#" class="ex-no-keyboard-trap" data-testname="link does not cause keyboard focus trap">x</a>
+  <textarea class="ex-no-keyboard-trap" data-testname="textarea does not cause keyboard focus trap">x</textarea>
+  <input type="checkbox" class="ex-no-keyboard-trap" data-testname="input[checkbox] does not cause keyboard focus trap">
+
+  <span role="button" tabindex="0" class="ex-no-keyboard-trap" data-testname="span with button role, tabindex=0 does not cause keyboard focus trap">x</span>
+  <span role="link" tabindex="0" class="ex-no-keyboard-trap" data-testname="span with link role, tabindex=0 does not cause keyboard focus trap">x</span>
+  <span role="checkbox" tabindex="0" class="ex-no-keyboard-trap" data-testname="span with checkbox role, tabindex=0 cause keyboard focus trap">x</span>
+
+<script>
+  keyboardUtils.verifyElementsDoNotCauseKeyboardTrap(".ex-no-keyboard-trap");
+</script>
+
+</body>
+</html>
\ No newline at end of file