-
Notifications
You must be signed in to change notification settings - Fork 795
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frame-focusable-content): new rule to test iframes with tabindex…
…=-1 do not have focusable content (#2785) * feat(frame-focusable-content): new rule to test iframes with tabindex=-1 do not have focusable content * add inapplicable * fix tests * after results * test * hmmm * fix * remove after * fix test
- Loading branch information
Showing
11 changed files
with
188 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| { | ||
| "id": "frame-focusable-content", | ||
| "evaluate": "no-focusable-content-evaluate", | ||
| "metadata": { | ||
| "impact": "serious", | ||
| "messages": { | ||
| "pass": "Element does not have focusable descendants", | ||
| "fail": "Element has focusable descendants", | ||
| "incomplete": "Could not determine if element has descendants" | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| function frameFocusableContentMatches(node, virtualNode, context) { | ||
| return ( | ||
| !context.initiator && | ||
| !context.focusable && | ||
| context.boundingClientRect.width * context.boundingClientRect.height > 1 | ||
| ); | ||
| } | ||
|
|
||
| export default frameFocusableContentMatches; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "id": "frame-focusable-content", | ||
| "selector": "html", | ||
| "matches": "frame-focusable-content-matches", | ||
| "tags": ["cat.keyboard", "wcag2a", "wcag211"], | ||
| "metadata": { | ||
| "description": "Ensures <frame> and <iframe> elements with tabindex=-1 do not have focusable content", | ||
| "help": "Frames with tabindex=-1 must not have focusable content" | ||
| }, | ||
| "all": [], | ||
| "any": ["frame-focusable-content"], | ||
| "none": [] | ||
| } |
43 changes: 43 additions & 0 deletions
43
test/integration/rules/frame-focusable-content/frame-focusable-content.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/not-focusable.html" | ||
| tabindex="-1" | ||
| id="pass1" | ||
| ></iframe> | ||
|
|
||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| tabindex="-1" | ||
| id="fail1" | ||
| ></iframe> | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| tabindex="-1" | ||
| width="2" | ||
| height="1" | ||
| id="fail2" | ||
| ></iframe> | ||
|
|
||
| <!-- inapplicable --> | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| id="inapplicable-1" | ||
| ></iframe> | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| tabindex="0" | ||
| id="inapplicable-2" | ||
| ></iframe> | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| tabindex="-1" | ||
| width="1" | ||
| height="1" | ||
| id="inapplicable-3" | ||
| ></iframe> | ||
| <iframe | ||
| src="/integration/rules/frame-focusable-content/frames/focusable.html" | ||
| tabindex="-1" | ||
| width="0" | ||
| height="0" | ||
| id="inapplicable-3" | ||
| ></iframe> |
9 changes: 9 additions & 0 deletions
9
test/integration/rules/frame-focusable-content/frame-focusable-content.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "description": "frame-focusable-content tests", | ||
| "rule": "frame-focusable-content", | ||
| "violations": [ | ||
| ["#fail1", "#focusable"], | ||
| ["#fail2", "#focusable"] | ||
| ], | ||
| "passes": [["#pass1", "#not-focusable"]] | ||
| } |
11 changes: 11 additions & 0 deletions
11
test/integration/rules/frame-focusable-content/frames/focusable.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html id="focusable"> | ||
| <head> | ||
| <title>Hello</title> | ||
| <meta charset="utf8" /> | ||
| <script src="/axe.js"></script> | ||
| </head> | ||
| <body> | ||
| <button>Click</button> | ||
| </body> | ||
| </html> |
11 changes: 11 additions & 0 deletions
11
test/integration/rules/frame-focusable-content/frames/not-focusable.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html id="not-focusable"> | ||
| <head> | ||
| <title>Hello</title> | ||
| <meta charset="utf8" /> | ||
| <script src="/axe.js"></script> | ||
| </head> | ||
| <body> | ||
| <p>Hello</p> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| describe('frame-focusable-content-matches', function() { | ||
| 'use strict'; | ||
| var rule; | ||
|
|
||
| beforeEach(function() { | ||
| rule = axe.utils.getRule('frame-focusable-content'); | ||
| }); | ||
|
|
||
| it('returns false for the top-level context', function() { | ||
| var result = rule.matches(null, null, { | ||
| initiator: true, | ||
| focusable: false, | ||
| boundingClientRect: { | ||
| width: 100, | ||
| height: 100 | ||
| } | ||
| }); | ||
| assert.isFalse(result); | ||
| }); | ||
|
|
||
| it('returns false for focusable iframes', function() { | ||
| var result = rule.matches(null, null, { | ||
| initiator: false, | ||
| focusable: true, | ||
| boundingClientRect: { | ||
| width: 100, | ||
| height: 100 | ||
| } | ||
| }); | ||
| assert.isFalse(result); | ||
| }); | ||
|
|
||
| it('returns false for non-focusable iframes that are too small (1x1)', function() { | ||
| var result = rule.matches(null, null, { | ||
| initiator: false, | ||
| focusable: false, | ||
| boundingClientRect: { | ||
| width: 1, | ||
| height: 1 | ||
| } | ||
| }); | ||
| assert.isFalse(result); | ||
| }); | ||
|
|
||
| it('returns false for non-focusable iframes that are too small (0x0)', function() { | ||
| var result = rule.matches(null, null, { | ||
| initiator: false, | ||
| focusable: false, | ||
| boundingClientRect: { | ||
| width: 0, | ||
| height: 0 | ||
| } | ||
| }); | ||
| assert.isFalse(result); | ||
| }); | ||
|
|
||
| it('returns true for non-focusable iframes', function() { | ||
| var result = rule.matches(null, null, { | ||
| initiator: false, | ||
| focusable: false, | ||
| boundingClientRect: { | ||
| width: 2, | ||
| height: 1 | ||
| } | ||
| }); | ||
| assert.isTrue(result); | ||
| }); | ||
| }); |