diff --git a/lib/rules/empty-heading.json b/lib/rules/empty-heading.json index 5f978b5894..df0534e6f9 100644 --- a/lib/rules/empty-heading.json +++ b/lib/rules/empty-heading.json @@ -1,6 +1,7 @@ { "id": "empty-heading", "selector": "h1, h2, h3, h4, h5, h6, [role=\"heading\"]", + "matches": "heading-matches.js", "tags": [ "cat.name-role-value", "best-practice" @@ -11,9 +12,7 @@ }, "all": [], "any": [ - "has-visible-text", - "role-presentation", - "role-none" + "has-visible-text" ], "none": [] } diff --git a/lib/rules/heading-matches.js b/lib/rules/heading-matches.js new file mode 100644 index 0000000000..0edcd1599b --- /dev/null +++ b/lib/rules/heading-matches.js @@ -0,0 +1,13 @@ +// Get all valid roles +let explicitRoles; +if (node.hasAttribute('role')) { + explicitRoles = node.getAttribute('role').split(/\s+/i) + .filter(axe.commons.aria.isValidRole); +} + +// Check valid roles if there are any, otherwise fall back to the inherited role +if (explicitRoles && explicitRoles.length > 0) { + return explicitRoles.includes('heading'); +} else { + return axe.commons.aria.implicitRole(node) === 'heading'; +} diff --git a/lib/rules/heading-order.json b/lib/rules/heading-order.json index f9150bacee..c9372ad242 100644 --- a/lib/rules/heading-order.json +++ b/lib/rules/heading-order.json @@ -1,6 +1,7 @@ { "id": "heading-order", "selector": "h1, h2, h3, h4, h5, h6, [role=heading]", + "matches": "heading-matches.js", "tags": [ "cat.semantics", "best-practice" diff --git a/test/integration/rules/empty-heading/empty-heading.html b/test/integration/rules/empty-heading/empty-heading.html index d37d118d33..8e6c2693c9 100644 --- a/test/integration/rules/empty-heading/empty-heading.html +++ b/test/integration/rules/empty-heading/empty-heading.html @@ -6,6 +6,8 @@ +

Meh

+

Ok

Ok

Ok

@@ -16,8 +18,6 @@
Ok

Not Ok

- -

Should also work

diff --git a/test/integration/rules/empty-heading/empty-heading.json b/test/integration/rules/empty-heading/empty-heading.json index 95091e38cf..6165c51142 100644 --- a/test/integration/rules/empty-heading/empty-heading.json +++ b/test/integration/rules/empty-heading/empty-heading.json @@ -13,8 +13,6 @@ ["#pass4"], ["#pass5"], ["#pass6"], - ["#pass7"], - ["#pass8"], - ["#pass9"] + ["#pass7"] ] } diff --git a/test/integration/rules/heading-order/heading-order.html b/test/integration/rules/heading-order/heading-order.html index cc8c86876d..76e12320e3 100644 --- a/test/integration/rules/heading-order/heading-order.html +++ b/test/integration/rules/heading-order/heading-order.html @@ -6,3 +6,5 @@

Header

Header

Header

Header

+ +
Ignore
\ No newline at end of file diff --git a/test/rule-matches/heading-matches.js b/test/rule-matches/heading-matches.js new file mode 100644 index 0000000000..efb4946553 --- /dev/null +++ b/test/rule-matches/heading-matches.js @@ -0,0 +1,55 @@ +describe('heading-matches', function () { + 'use strict'; + + var fixture = document.getElementById('fixture'); + var rule; + + beforeEach(function () { + rule = axe._audit.rules.find(function (rule) { + return rule.id === 'empty-heading'; + }); + }); + + afterEach(function () { + fixture.innerHTML = ''; + }); + + it('is a function', function () { + assert.isFunction(rule.matches); + }); + + it('should return false on elements that are not headings', function () { + var div = document.createElement('div'); + assert.isFalse(rule.matches(div)); + }); + + it('should return true on elements with "heading" in the role', function () { + var div = document.createElement('div'); + div.setAttribute('role', 'heading'); + assert.isTrue(rule.matches(div)); + + div.setAttribute('role', 'slider heading'); + assert.isTrue(rule.matches(div)); + }); + + it('should return true on regular headings without roles', function () { + var h1 = document.createElement('h1'); + var h2 = document.createElement('h2'); + var h3 = document.createElement('h3'); + assert.isTrue(rule.matches(h1)); + assert.isTrue(rule.matches(h2)); + assert.isTrue(rule.matches(h3)); + }); + + it('should return false on headings with their role changes', function () { + var h1 = document.createElement('h1'); + h1.setAttribute('role', 'banner'); + assert.isFalse(rule.matches(h1)); + }); + + it('should return true on headings with their role changes to an invalid role', function () { + var h1 = document.createElement('h1'); + h1.setAttribute('role', 'bruce'); + assert.isTrue(rule.matches(h1)); + }); +}); \ No newline at end of file