Skip to content

Commit

Permalink
Update "focusable element has no keyboard trap" examples to not use s…
Browse files Browse the repository at this point in the history 
…ingle 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 <[email protected]>

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

Co-authored-by: Kathy Eng <[email protected]>

Co-authored-by: Kathy Eng <[email protected]>
  • Loading branch information
@carlosapaduarte @kengdoj
carlosapaduarte and kengdoj authored May 18, 2022
1 parent d52fcf0 commit 0abf83c
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 149 deletions.
112 changes: 39 additions & 73 deletions _rules/focusable-no-keyboard-trap-80af7b.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 0abf83c

Please sign in to comment.