Skip to content

Commit

Permalink
fix(page-has-heading-one): find screen-reader only headings (#2065)
Browse files Browse the repository at this point in the history 
* fix(page-has-heading-one): find sreen-ready only headings

* integration tests
  • Loading branch information
@straker
straker committed Feb 28, 2020
1 parent 414cd09 commit 4c4c41a
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 1 deletion.
2 changes: 1 addition & 1 deletion lib/checks/keyboard/page-has-elm.js
View file
Expand Up @@ -7,7 +7,7 @@ if (!options || !options.selector || typeof options.selector !== 'string') {
const matchingElms = axe.utils.querySelectorAllFilter(
virtualNode,
options.selector,
vNode => axe.commons.dom.isVisible(vNode.actualNode)
vNode => axe.commons.dom.isVisible(vNode.actualNode, true)
);
this.relatedNodes(matchingElms.map(vNode => vNode.actualNode));
return matchingElms.length > 0;
24 changes: 24 additions & 0 deletions test/checks/keyboard/page-has-elm.js
View file
Expand Up @@ -54,6 +54,30 @@ describe('page-has-*', function() {
);
assert.isFalse(evaluate.apply(checkContext, params));
});

it('does find screen-reader only elements', function() {
var options = { selector: 'b' };
var params = checkSetup(
'<style type="text/css">' +
'.sr-only {' +
'border: 0;' +
'clip: rect(0 0 0 0);' +
'clip-path: polygon(0px 0px, 0px 0px, 0px 0px);' +
'-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);' +
'height: 1px;' +
'margin: -1px;' +
'overflow: hidden;' +
'padding: 0;' +
'position: absolute;' +
'width: 1px;' +
'white-space: nowrap;' +
'}' +
'</style>' +
'<div id="target"><b class="sr-only">No role</b></div>',
options
);
assert.isTrue(evaluate.apply(checkContext, params));
});
});

describe('after', function() {
Expand Down
45 changes: 45 additions & 0 deletions test/integration/full/landmark-one-main/landmark-one-main-pass3.html
View file
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en" id="pass1">
<head>
<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>
<style type="text/css">
.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
</style>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<main role="main" class="sr-only">
<p>Main content</p>
</main>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="landmark-one-main-pass3.js"></script>
<script src="/test/integration/adapter.js"></script>
</body>
</html>
40 changes: 40 additions & 0 deletions test/integration/full/landmark-one-main/landmark-one-main-pass3.js
View file
@@ -0,0 +1,40 @@
describe('landmark-one-main test pass', function() {
'use strict';
var results;
before(function(done) {
axe.testUtils.awaitNestedLoad(function() {
axe.run(
{ runOnly: { type: 'rule', values: ['landmark-one-main'] } },
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 1', function() {
assert.lengthOf(results.passes[0].nodes, 1);
});

it('should find #pass1', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass1']);
});
});

it('should find 0 inapplicable', function() {
assert.lengthOf(results.inapplicable, 0);
});

it('should find 0 incomplete', function() {
assert.lengthOf(results.incomplete, 0);
});
});
43 changes: 43 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass3.html
View file
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en" id="pass1">
<head>
<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>
<style type="text/css">
.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
</style>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<h1 class="sr-only">Level one heading!</h1>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="page-has-heading-one-pass3.js"></script>
<script src="/test/integration/adapter.js"></script>
</body>
</html>
46 changes: 46 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass3.js
View file
@@ -0,0 +1,46 @@
describe('page-has-heading-one test pass', function() {
'use strict';
var results;
before(function(done) {
axe.testUtils.awaitNestedLoad(function() {
// Stop messing with my tests Mocha!
var heading = document.querySelector('#mocha h1');
if (heading) {
heading.outerHTML = '<h2>page-has-heading-one test</h2>';
}

axe.run(
{ runOnly: { type: 'rule', values: ['page-has-heading-one'] } },
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 1', function() {
assert.lengthOf(results.passes[0].nodes, 1);
});

it('should find #pass1', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass1']);
});
});

it('should find 0 inapplicable', function() {
assert.lengthOf(results.inapplicable, 0);
});

it('should find 0 incomplete', function() {
assert.lengthOf(results.incomplete, 0);
});
});

0 comments on commit 4c4c41a

Please sign in to comment.