From 041fe61c6f9cb312b067dd91daadef881c776dde Mon Sep 17 00:00:00 2001
From: Tom Brunet <thbrunet@us.ibm.com>
Date: Thu, 5 Dec 2024 04:12:05 -0600
Subject: [PATCH] Fixes for a1b64e, ebe86a due to surveys (#2209)

* Update a1b64e Pass 2 to add role

* Add a support note for issue 1909 regarding cycle to browser

* Add a passing modal example

* Fix spacing

* Fix spacing

---------

Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com>
---
 ...o-keyboard-trap-non-standard-nav-ebe86a.md |  2 +-
 ...le-no-keyboard-trap-standard-nav-a1b64e.md | 53 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/_rules/focusable-no-keyboard-trap-non-standard-nav-ebe86a.md b/_rules/focusable-no-keyboard-trap-non-standard-nav-ebe86a.md
index af0037814a..e03dd63300 100755
--- a/_rules/focusable-no-keyboard-trap-non-standard-nav-ebe86a.md
+++ b/_rules/focusable-no-keyboard-trap-non-standard-nav-ebe86a.md
@@ -51,7 +51,7 @@ For each target element focus can cycle to the browser UI by using the method ad
 
 ### Accessibility Support
 
-There are no accessibility support issues known.
+Some browsers have settings that will immediately cycle focus back to the web document. This fulfills the expectation because focus can cycle to the browser UI and the browser UI cycles focus back to the web document.
 
 ### Bibliography
 
diff --git a/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md b/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md
index 63dbb1ea99..9eee0be6ca 100755
--- a/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md
+++ b/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md
@@ -18,6 +18,7 @@ acknowledgments:
     - Malin Øvrebø
     - Shadi Abou-Zahra
     - Stein Erik Skotkjerra
+    - Tom Brunet
   funding:
     - WAI-Tools
 ---
@@ -43,7 +44,7 @@ This rule only requires navigation in one direction (either forward or backward)
 
 ### Accessibility Support
 
-There are no accessibility support issues known.
+Some browsers have settings that will immediately cycle focus back to the web document. This fulfills the expectation because focus can cycle to the browser UI and the browser UI cycles focus back to the web document.
 
 ### Bibliography
 
@@ -68,7 +69,7 @@ These [focusable][] elements do not create a trap for keyboard navigation.
 This element is made [focusable][] by the `tabindex` attribute. It does not create a trap for keyboard navigation.
 
 ```html
-<div tabindex="1">Text</div>
+<div role="button" tabindex="1">Text</div>
 ```
 
 #### Passed Example 3
@@ -79,6 +80,54 @@ This element is made [focusable][] by the `tabindex` attribute, even if it is no
 <div tabindex="-1">Text</div>
 ```
 
+#### Passed Example 4
+
+While the elements with id "sentinelBefore" and "sentinelAfter" contain focus to the contents of the div with name "Sample Modal", focus is not trapped since the user can
+use [standard keyboard navigation](#standard-keyboard-navigation) using the Escape key or by activating the "Close button" to dismiss the modal
+
+```html
+<div>Main page content with <a href="#">some link</a></div>
+<div aria-hidden="true">
+    <a href="#" id="sentinelBefore" style="position:absolute; top:-999em"
+        >Upon receiving focus, this focus sentinel should wrap focus to the bottom of the modal</a
+    >
+</div>
+<div
+    id="sampleModal"
+    role="dialog"
+    aria-label="Sample Modal"
+    aria-modal="true"
+    style="border: solid black 1px; padding: 1rem;"
+>
+    <label>First and last name <input id="dialogFirst"/></label><br />
+    <button id="closeButton">Close button</button>
+</div>
+<div aria-hidden="true">
+    <a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
+        >Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
+    >
+</div>
+<script>
+    window.addEventListener('load', () => {
+        document.getElementById('dialogFirst').focus();
+    })
+    document.getElementById('sentinelBefore').addEventListener('focus', () => {
+        document.getElementById('closeButton').focus()
+    })
+    document.getElementById('sentinelAfter').addEventListener('focus', () => {
+        document.getElementById('dialogFirst').focus()
+    })
+    document.getElementById('closeButton').addEventListener('click', () => {
+        document.getElementById('sampleModal').style.display = 'none'
+    })
+    document.getElementById('sampleModal').addEventListener('keydown', (evt) => {
+        if (evt.key === "Escape") {
+            document.getElementById('sampleModal').style.display = 'none';    
+        }
+    })
+</script>
+```
+
 ### Failed
 
 #### Failed Example 1