Skip to content

Commit 813dacb

Browse files
[80af7b] Focusable element has no keyboard trap - move Failed Example 2 to passed since it's currently passing the ACT rule (#2340)
* Remove Failed Example 2 since it's currently passing the ACT rule * Update focusable-no-keyboard-trap-80af7b.md
1 parent 1098dca commit 813dacb

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,22 @@ These focusable `button` elements have scripts that create a keyboard trap. The
148148
<a id="link2" href="#">Link 2</a>
149149
```
150150

151+
#### Passed Example 7
152+
153+
The [focusable][] `button` labeled "Button3" creates a keyboard trap when navigating forward, as it moves focus back to "Button1" preventing users to focus "Button3". However, when navigating backward, all focusable elements receive focus as expected. Therefore, according to the background notes, this behavior is considered compliant with the rule, despite being recognized as a poor practice in terms of keyboard accessibility.
154+
155+
```html
156+
<button onblur="setTimeout(() => this.nextElementSibling.focus(), 10)">
157+
Button1
158+
</button>
159+
<button onblur="setTimeout(() => this.previousElementSibling.focus(), 10)">
160+
Button2
161+
</button>
162+
<button>
163+
Button3
164+
</button>
165+
```
166+
151167
### Failed
152168

153169
#### Failed Example 1
@@ -164,22 +180,6 @@ This [focusable][] element creates a keyboard trap bringing focus to the `button
164180

165181
#### Failed Example 2
166182

167-
These [focusable][] `button` elements create a keyboard trap preventing the last `button` to be reached using the keyboard.
168-
169-
```html
170-
<button onblur="setTimeout(() => this.nextElementSibling.focus(), 10)">
171-
Button1
172-
</button>
173-
<button onblur="setTimeout(() => this.previousElementSibling.focus(), 10)">
174-
Button2
175-
</button>
176-
<button>
177-
Button3
178-
</button>
179-
```
180-
181-
#### Failed Example 3
182-
183183
This `button` element is between other `button` elements creating a keyboard trap.
184184

185185
```html
@@ -188,7 +188,7 @@ This `button` element is between other `button` elements creating a keyboard tra
188188
<button onblur="setTimeout(() => this.focus(), 10)">Button 3</button>
189189
```
190190

191-
#### Failed Example 4
191+
#### Failed Example 3
192192

193193
These focusable `button` elements create a keyboard trap with no instructions.
194194

@@ -205,7 +205,7 @@ These focusable `button` elements create a keyboard trap with no instructions.
205205
<a id="link2" href="#">Link 2</a>
206206
```
207207

208-
#### Failed Example 5
208+
#### Failed Example 4
209209

210210
These focusable `button` elements create a keyboard trap with instructions that don't give advice on the method for proceeding.
211211

@@ -223,7 +223,7 @@ These focusable `button` elements create a keyboard trap with instructions that
223223
<a id="link2" href="#">Link 2</a>
224224
```
225225

226-
#### Failed Example 6
226+
#### Failed Example 5
227227

228228
These focusable `button` elements create a keyboard trap with help text, where the method advised doesn't work.
229229

0 commit comments

Comments
 (0)