-
Notifications
You must be signed in to change notification settings - Fork 776
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new rule landmark-complementary-is-top-level
Best practice requiring asides and complementary landmarks to be top level, in line with the ARIA Authoring Practices Guide. Closes #795
- Loading branch information
Marcy Sutton
committed
Nov 19, 2018
1 parent
89d18d0
commit 65a8485
Showing
11 changed files
with
243 additions
and
2 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,18 @@ | ||
{ | ||
"id": "landmark-complementary-is-top-level", | ||
"selector": "aside:not([role]), [role=complementary]", | ||
"matches": "landmark-has-body-context.js", | ||
"tags": [ | ||
"cat.semantics", | ||
"best-practice" | ||
], | ||
"metadata": { | ||
"description": "Ensures the complementary landmark or aside is at top level", | ||
"help": "Aside must not be contained in another landmark" | ||
}, | ||
"all": [], | ||
"any": [ | ||
"landmark-is-top-level" | ||
], | ||
"none": [] | ||
} |
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
15 changes: 15 additions & 0 deletions
15
test/integration/full/landmark-complementary-is-top-level/frames/level1-fail.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,15 @@ | ||
<!doctype html> | ||
<html id="violation2"> | ||
<head> | ||
<meta charset="utf8"> | ||
<script src="/axe.js"></script> | ||
</head> | ||
<body> | ||
<p>This iframe should fail, too</p> | ||
<main> | ||
<div role="complementary"> | ||
<p>This complementary landmark is in a main landmark</p> | ||
</div> | ||
</main> | ||
</body> | ||
</html> |
27 changes: 27 additions & 0 deletions
27
test/integration/full/landmark-complementary-is-top-level/frames/level1.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,27 @@ | ||
<!doctype html> | ||
<html id="pass2"> | ||
<head> | ||
<meta charset="utf8"> | ||
<script src="/axe.js"></script> | ||
</head> | ||
<body> | ||
<p>This iframe should pass, too</p> | ||
|
||
<div role="navigation"> | ||
<p>This div has role navigation</p> | ||
</div> | ||
<header> | ||
<p>This banner content is not within another landmark</p> | ||
</header> | ||
<div role="complementary"> | ||
<p>This div has role complementary</p> | ||
</div> | ||
<div role="search"> | ||
<p>This div has role search</p> | ||
</div> | ||
<div role="form"> | ||
<p>This div has role form<p> | ||
</div> | ||
<iframe id="frame2" src="level2.html"></iframe> | ||
</body> | ||
</html> |
13 changes: 13 additions & 0 deletions
13
test/integration/full/landmark-complementary-is-top-level/frames/level2.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,13 @@ | ||
<!doctype html> | ||
<html id="pass3"> | ||
<head> | ||
<meta charset="utf8"> | ||
<script src="/axe.js"></script> | ||
</head> | ||
<body> | ||
<p>This iframe should pass<p> | ||
<aside> | ||
<p>This aside is top level and should be ignored</p> | ||
</aside> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
...on/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-fail.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,29 @@ | ||
<!doctype html> | ||
<html lang="en" id="violation1"> | ||
<head> | ||
<title>landmark-complementary-is-top-level test</title> | ||
<meta charset="utf8"> | ||
<link rel="stylesheet" type="text/css" href="/node_modules/mocha/mocha.css" /> | ||
<script src="/node_modules/mocha/mocha.js"></script> | ||
<script src="/node_modules/chai/chai.js"></script> | ||
<script src="/axe.js"></script> | ||
<script> | ||
mocha.setup({ | ||
timeout: 10000, | ||
ui: 'bdd' | ||
}); | ||
var assert = chai.assert; | ||
</script> | ||
</head> | ||
<body> | ||
<div role="navigation"> | ||
<div role="complementary"> | ||
<p>This is going to fail</p> | ||
</div> | ||
</div> | ||
<iframe id="frame1" src="frames/level1-fail.html"></iframe> | ||
<div id="mocha"></div> | ||
<script src="landmark-complementary-is-top-level-fail.js"></script> | ||
<script src="/test/integration/adapter.js"></script> | ||
</body> | ||
</html> |
45 changes: 45 additions & 0 deletions
45
...tion/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-fail.js
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,45 @@ | ||
describe('landmark-complementary-is-top-level test fail', function() { | ||
'use strict'; | ||
var results; | ||
before(function(done) { | ||
window.addEventListener('load', function() { | ||
axe.run( | ||
{ | ||
runOnly: { | ||
type: 'rule', | ||
values: ['landmark-complementary-is-top-level'] | ||
} | ||
}, | ||
function(err, r) { | ||
assert.isNull(err); | ||
results = r; | ||
done(); | ||
} | ||
); | ||
}); | ||
}); | ||
|
||
describe('violations', function() { | ||
it('should find 1', function() { | ||
assert.lengthOf(results.violations, 1); | ||
}); | ||
|
||
it('should find 2 nodes', function() { | ||
assert.lengthOf(results.violations[0].nodes, 2); | ||
}); | ||
}); | ||
|
||
describe('passes', function() { | ||
it('should find none', function() { | ||
assert.lengthOf(results.passes, 0); | ||
}); | ||
}); | ||
|
||
it('should find 0 inapplicable', function() { | ||
assert.lengthOf(results.inapplicable, 0); | ||
}); | ||
|
||
it('should find 0 incomplete', function() { | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
}); |
42 changes: 42 additions & 0 deletions
42
...on/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.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,42 @@ | ||
<!doctype html> | ||
<html lang="en" id="pass1"> | ||
<head> | ||
<title>landmark-complementary-is-top-level test</title> | ||
<meta charset="utf8"> | ||
<link rel="stylesheet" type="text/css" href="/node_modules/mocha/mocha.css" /> | ||
<script src="/node_modules/mocha/mocha.js"></script> | ||
<script src="/node_modules/chai/chai.js"></script> | ||
<script src="/axe.js"></script> | ||
<script> | ||
mocha.setup({ | ||
timeout: 10000, | ||
ui: 'bdd' | ||
}); | ||
var assert = chai.assert; | ||
</script> | ||
</head> | ||
<body> | ||
<div role="navigation"> | ||
<p>This div has role navigation</p> | ||
</div> | ||
<div role="banner"> | ||
<p>This banner content is not within another landmark</p> | ||
</div> | ||
<aside> | ||
<p>This aside has an implicit role complementary</p> | ||
</aside> | ||
<div role="complementary"> | ||
<p>This div has role complementary</p> | ||
</div> | ||
<div role="search"> | ||
<p>This div has role search</p> | ||
</div> | ||
<div role="form"> | ||
<p>This div has role form<p> | ||
</div> | ||
<iframe id="frame1" src="frames/level1.html"></iframe> | ||
<div id="mocha"></div> | ||
<script src="landmark-complementary-is-top-level-pass.js"></script> | ||
<script src="/test/integration/adapter.js"></script> | ||
</body> | ||
</html> |
41 changes: 41 additions & 0 deletions
41
...tion/full/landmark-complementary-is-top-level/landmark-complementary-is-top-level-pass.js
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,41 @@ | ||
describe('landmark-complementary-is-top-level test pass', function() { | ||
'use strict'; | ||
var results; | ||
before(function(done) { | ||
window.addEventListener('load', function() { | ||
axe.run( | ||
{ | ||
runOnly: { | ||
type: 'rule', | ||
values: ['landmark-complementary-is-top-level'] | ||
} | ||
}, | ||
function(err, r) { | ||
assert.isNull(err); | ||
results = r; | ||
done(); | ||
} | ||
); | ||
}); | ||
}); | ||
|
||
describe('violations', function() { | ||
it('should find 0', function() { | ||
assert.lengthOf(results.violations, 0); | ||
}); | ||
}); | ||
|
||
describe('passes', function() { | ||
it('should find 3', function() { | ||
assert.lengthOf(results.passes[0].nodes, 2); | ||
}); | ||
}); | ||
|
||
it('should find 0 inapplicable', function() { | ||
assert.lengthOf(results.inapplicable, 0); | ||
}); | ||
|
||
it('should find 0 incomplete', function() { | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
}); |