Update "focusable element has no keyboard trap" examples to not use single key shortcuts (80af7b) (#1794)

* Made editorial update

* Updated examples to not use single key shortcut

* Update example descriptions

* Moved note to background

* Moved notes to background

* Update the descriptions of examples

* Improved readability of the examples

* Removed note from background

* Fixed typo

* Move scripts to test-assets

* Update focusable-no-keyboard-trap-80af7b.md

* Fix html

* Update _rules/focusable-no-keyboard-trap-80af7b.md

Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com>

* Update _rules/focusable-no-keyboard-trap-non-standard-nav-ebe86a.md

Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com>

Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com>

Author: carlosapaduarte

_rules/focusable-no-keyboard-trap-80af7b.md

@@ -35,9 +35,7 @@ acknowledgments:
 
 ## Applicability
 
-This rule only applies to any [HTML or SVG element][] that is [focusable][].
-
-**Note:** This rule only applies to HTML and SVG. Thus, it is a partial check for WCAG 2.0 success criterion 2.1.2, which applies to all content.
+This rule applies to any [HTML or SVG element][] that is [focusable][].
 
 ## Expectation
 
@@ -68,97 +66,79 @@ _There are no major accessibility support issues known for this rule._
 
 #### Passed Example 1
 
-No trap for keyboard navigation.
+These [focusable][] elements do not create a trap for keyboard navigation.
 
 ```html
 <a href="#">Link 1</a> <button>Button1</button>
 ```
 
 #### Passed Example 2
 
-Using `tabindex="1"`.
+This element is made [focusable][] by the `tabindex` attribute. It does not create a trap for keyboard navigation.
 
 ```html
 <div tabindex="1">Text</div>
 ```
 
 #### Passed Example 3
 
-Using `tabindex="-1"`.
+This element is made [focusable][] by the `tabindex` attribute, even if it is not part of the sequential focus navigation. It does not create a trap for keyboard navigation.
 
 ```html
 <div tabindex="-1">Text</div>
 ```
 
 #### Passed Example 4
 
-Keyboard trap with help information in a paragraph before, and where the method advised works.
+These focusable `button` elements have scripts that create a keyboard trap. The document includes help information in a paragraph before the `button` elements and the method advised works to escape the keyboard trap.
 
 ```html
-<script>
-	var trapOn = false
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
-<p>Press the M-key to Exit</p>
+<p>Press Ctrl+M to Exit</p>
 <a id="link1" href="#">Link 1</a>
-<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">
+<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 1
 </button>
-<button
-	id="btn2"
-	onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)"
-	onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)"
->
+<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 2
 </button>
 <a id="link2" href="#">Link 2</a>
 ```
 
 #### Passed Example 5
 
-Keyboard trap with help information within the trap, and where the method advised works.
+These focusable `button` elements have scripts that create a keyboard trap. The document includes help information within the trap and the method advised works to escape the keyboard trap.
 
 ```html
-<script>
-	var trapOn = false
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
 <a id="link1" href="#">Link 1</a>
-<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">
+<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 1
 </button>
-<p>Press the M-key to Exit</p>
-<button
-	id="btn2"
-	onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)"
-	onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)"
->
+<p>Press Ctrl+M to Exit</p>
+<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 2
 </button>
 <a id="link2" href="#">Link 2</a>
 ```
 
 #### Passed Example 6
 
-Keyboard trap with "help" link that once clicked exposes the instructions.
+These focusable `button` elements have scripts that create a keyboard trap. The document includes help information in a "help" link that once clicked exposes the instructions to escape the keyboard trap.
 
 ```html
-<script>
-	var trapOn = false
-
-	function showHelpText() {
-		document.getElementById('helptext').innerHTML = '<p>Press the M-key to Exit</p>'
-	}
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
-<div onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)">
+<div onkeydown="escapeTrapOnCtrlM(event)">
 	<a id="link1" href="#">Link 1</a>
-	<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('helpLink').focus();})(event)">
+	<button id="btn1" onfocus="trapOn = true" onblur="moveFocusTo('helpLink')">
 		Button 1
 	</button>
 	<a id="helpLink" href="#" onclick="showHelpText()">How to go the next element</a>
 	<div id="helptext"></div>
-	<button id="btn2" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">
+	<button id="btn2" onblur="moveFocusTo('btn1')">
 		Button 2
 	</button>
 </div>
@@ -169,7 +149,7 @@ Keyboard trap with "help" link that once clicked exposes the instructions.
 
 #### Failed Example 1
 
-Keyboard trap one element.
+This [focusable][] element creates a keyboard trap bringing focus to the `button`.
 
 ```html
 <a href="#">Link 1</a>
@@ -180,7 +160,7 @@ Keyboard trap one element.
 
 #### Failed Example 2
 
-Keyboard trap group.
+These [focusable][] `button` elements create a keyboard trap preventing the last `button` to be reached using the keyboard.
 
 ```html
 <button onblur="setTimeout(() => this.nextElementSibling.focus(), 10)">
@@ -196,7 +176,7 @@ Keyboard trap group.
 
 #### Failed Example 3
 
-A [focusable][] element between keyboard traps.
+This `button` element is between other `button` elements creating a keyboard trap.
 
 ```html
 <button onblur="setTimeout(() => this.focus(), 10)">Button 1</button>
@@ -206,66 +186,52 @@ A [focusable][] element between keyboard traps.
 
 #### Failed Example 4
 
-Keyboard trap with no instructions.
+These focusable `button` elements create a keyboard trap with no instructions.
 
 ```html
-<script>
-	var trapOn = false
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
 <a id="link1" href="#">Link 1</a>
-<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">
+<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 1
 </button>
-<button
-	id="btn2"
-	onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)"
-	onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)"
->
+<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 2
 </button>
 <a id="link2" href="#">Link 2</a>
 ```
 
 #### Failed Example 5
 
-Keyboard trap with instructions that doesn't give advise on the method for proceeding.
+These focusable `button` elements create a keyboard trap with instructions that don't give advice on the method for proceeding.
 
 ```html
-<script>
-	var trapOn = false
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
 <p>Go to the next element</p>
 <a id="link1" href="#">Link 1</a>
-<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">
+<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 1
 </button>
-<button
-	id="btn2"
-	onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)"
-	onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)"
->
+<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
 	Button 2
 </button>
 <a id="link2" href="#">Link 2</a>
 ```
 
 #### Failed Example 6
 
-Keyboard trap with help text, where the method advised doesn't work.
+These focusable `button` elements create a keyboard trap with help text, where the method advised doesn't work.
 
 ```html
-<script>
-	var trapOn = false
-</script>
+<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>
 
 <a id="link1" href="#">Link 1</a>
-<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">
+<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')">
 	Button 1
 </button>
-<p>Press the M-key to Exit</p>
-<button id="btn2" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">
+<p>Press Ctrl+M to Exit</p>
+<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')">
 	Button 2
 </button>
 <a id="link2" href="#">Link 2</a>
@@ -275,31 +241,31 @@ Keyboard trap with help text, where the method advised doesn't work.
 
 #### Inapplicable Example 1
 
-No [focusable][] element.
+There is no [focusable][] element.
 
 ```html
 <h1>Page 1</h1>
 ```
 
 #### Inapplicable Example 2
 
-Disabled element.
+There is no [focusable][] element.
 
 ```html
 <button type="button" disabled>Click Me!</button>
 ```
 
 #### Inapplicable Example 3
 
-Hidden element using `display:none`.
+There is no [focusable][] element.
 
 ```html
 <button type="button" style="display:none;">Click Me!</button>
 ```
 
 #### Inapplicable Example 4
 
-Hidden element using `visibility:hidden`.
+There is no [focusable][] element.
 
 ```html
 <a href="#" style="visibility:hidden;">Link 1</a> <button style="visibility:hidden;">Button1</button>