Skip to content

Commit

Permalink
fix(page-has-h1): allow aria-level=1 on native headings (#2349)
Browse files Browse the repository at this point in the history
  • Loading branch information
@WilcoFiers
WilcoFiers authored Jul 8, 2020
1 parent 49fdb46 commit 70b10b2
Show file tree
Hide file tree
Showing 19 changed files with 457 additions and 10 deletions.
2 changes: 1 addition & 1 deletion lib/checks/keyboard/page-has-heading-one.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"evaluate": "has-descendant-evaluate",
"after": "has-descendant-after",
"options": {
"selector": "h1:not([role]), [role=heading][aria-level=1]"
"selector": "h1:not([role]):not([aria-level]), h1:not([role])[aria-level=1], h2:not([role])[aria-level=1], h3:not([role])[aria-level=1], h4:not([role])[aria-level=1], h5:not([role])[aria-level=1], h6:not([role])[aria-level=1], [role=heading][aria-level=1]"
},
"metadata": {
"impact": "moderate",
Expand Down
3 changes: 3 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-fail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
</head>
<body>
<p>No h1 here</p>
<h1 role="alert">Hello!</h1>
<h1 aria-level="2">Goodbye</h1>
<h1 role="alert" aria-level="1">Error</h1>
<iframe id="frame1" src="frames/level1-fail.html"></iframe>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full/page-has-heading-one/page-has-heading-one-pass1.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe('page-has-heading-one test pass', function() {
describe('page-has-heading-one test pass 1', function() {
'use strict';
var results;
before(function(done) {
Expand Down
2 changes: 1 addition & 1 deletion test/integration/full/page-has-heading-one/page-has-heading-one-pass2.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" id="pass1">
<html lang="en" id="pass2">
<head>
<meta charset="utf8" />
<link
Expand Down
6 changes: 3 additions & 3 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass2.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe('page-has-heading-one test pass', function() {
describe('page-has-heading-one test pass 2', function() {
'use strict';
var results;
before(function(done) {
Expand Down Expand Up @@ -31,8 +31,8 @@ describe('page-has-heading-one test pass', 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 #pass2', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass2']);
});
});

Expand Down
2 changes: 1 addition & 1 deletion test/integration/full/page-has-heading-one/page-has-heading-one-pass3.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" id="pass1">
<html lang="en" id="pass3">
<head>
<meta charset="utf8" />
<link
Expand Down
6 changes: 3 additions & 3 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass3.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe('page-has-heading-one test pass', function() {
describe('page-has-heading-one test pass 3', function() {
'use strict';
var results;
before(function(done) {
Expand Down Expand Up @@ -31,8 +31,8 @@ describe('page-has-heading-one test pass', 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 #pass3', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass3']);
});
});

Expand Down
28 changes: 28 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass4.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" id="pass4">
<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>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<h2 aria-level="1">Level one heading!</h2>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="page-has-heading-one-pass4.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-pass4.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
describe('page-has-heading-one test pass 4', 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 #pass4', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass4']);
});
});

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

it('should find 0 incomplete', function() {
assert.lengthOf(results.incomplete, 0);
});
});
28 changes: 28 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass5.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" id="pass5">
<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>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<h3 aria-level="1">Level one heading!</h3>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="page-has-heading-one-pass5.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-pass5.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
describe('page-has-heading-one test pass 5', 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 #pass5', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass5']);
});
});

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

it('should find 0 incomplete', function() {
assert.lengthOf(results.incomplete, 0);
});
});
28 changes: 28 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass6.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" id="pass6">
<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>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<h4 aria-level="1">Level one heading!</h4>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="page-has-heading-one-pass6.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-pass6.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
describe('page-has-heading-one test pass 6', 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 #pass6', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass6']);
});
});

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

it('should find 0 incomplete', function() {
assert.lengthOf(results.incomplete, 0);
});
});
28 changes: 28 additions & 0 deletions test/integration/full/page-has-heading-one/page-has-heading-one-pass7.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" id="pass7">
<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>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<h5 aria-level="1">Level one heading!</h5>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="page-has-heading-one-pass7.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-pass7.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
describe('page-has-heading-one test pass 7', 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 #pass7', function() {
assert.deepEqual(results.passes[0].nodes[0].target, ['#pass7']);
});
});

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

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

0 comments on commit 70b10b2

Please sign in to comment.