Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(aria-roledescription): use virtual node #3570

Merged
merged 5 commits into from
Aug 2, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/checks/aria/aria-roledescription-evaluate.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { getRole } from '../../commons/aria';
* @param {String[]} options.supportedRoles List of ARIA roles that support the `aria-roledescription` attribute
* @return {Mixed} True if the semantic role supports `aria-roledescription`. Undefined if the semantic role is `presentation` or `none`. False otherwise.
*/
function ariaRoledescriptionEvaluate(node, options = {}) {
const role = getRole(node);
function ariaRoledescriptionEvaluate(node, options = {}, virtualNode) {
const role = getRole(virtualNode);
const supportedRoles = options.supportedRoles || [];

if (supportedRoles.includes(role)) {
Expand Down
87 changes: 46 additions & 41 deletions test/checks/aria/aria-roledescription.js
Original file line number Diff line number Diff line change
@@ -1,81 +1,86 @@
describe('aria-roledescription', function() {
describe('aria-roledescription', function () {
'use strict';

var fixture = document.getElementById('fixture');
var flatTreeSetup = axe.testUtils.flatTreeSetup;
var checkContext = axe.testUtils.MockCheckContext();
var queryFixture = axe.testUtils.queryFixture;

afterEach(function() {
fixture.innerHTML = '';
afterEach(function () {
checkContext.reset();
});

it('returns true for elements with an implicit supported role', function() {
fixture.innerHTML =
'<button aria-roledescription="Awesome Button">Click</button>';
flatTreeSetup(fixture);
var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild, {
it('returns true for elements with an implicit supported role', function () {
var vNode = queryFixture(
'<button aria-roledescription="Awesome Button" id="target">Click</button>'
);
var actual = axe.testUtils.getCheckEvaluate('aria-roledescription').call(
checkContext,
null,
{
supportedRoles: ['button']
});
},
vNode
);
assert.equal(actual, true);
assert.isNull(checkContext._data, null);
});

it('returns true for elements with an explicit supported role', function() {
fixture.innerHTML =
'<div role="radio" aria-roledescription="Awesome Radio">Click</div>';
flatTreeSetup(fixture);
var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild, {
it('returns true for elements with an explicit supported role', function () {
var vNode = queryFixture(
'<div role="radio" aria-roledescription="Awesome Radio" id="target">Click</div>'
);
var actual = axe.testUtils.getCheckEvaluate('aria-roledescription').call(
checkContext,
null,
{
supportedRoles: ['radio']
});
},
vNode
);
assert.equal(actual, true);
assert.isNull(checkContext._data, null);
});

it('returns undefined for elements with an unsupported role', function() {
fixture.innerHTML =
'<div role="main" aria-roledescription="Awesome Main">The main element</div>';
flatTreeSetup(fixture);
it('returns undefined for elements with an unsupported role', function () {
var vNode = queryFixture(
'<div role="main" aria-roledescription="Awesome Main" id="target">The main element</div>'
);
var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild);
.call(checkContext, null, {}, vNode);
assert.equal(actual, undefined);
assert.isNull(checkContext._data, null);
});

it('returns false for elements without role', function() {
fixture.innerHTML =
'<div aria-roledescription="Awesome Main">The main element</div>';
flatTreeSetup(fixture);
it('returns false for elements without role', function () {
var vNode = queryFixture(
'<div aria-roledescription="Awesome Main" id="target">The main element</div>'
);
var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild);
.call(checkContext, null, {}, vNode);
assert.equal(actual, false);
assert.isNull(checkContext._data, null);
});

it('returns false for elements with role=presentation', function() {
fixture.innerHTML =
'<div role="presentation" aria-roledescription="Awesome Main">The main element</div>';
flatTreeSetup(fixture);
it('returns false for elements with role=presentation', function () {
var vNode = queryFixture(
'<div role="presentation" aria-roledescription="Awesome Main" id="target">The main element</div>'
);
var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild);
.call(checkContext, null, {}, vNode);
assert.equal(actual, false);
assert.isNull(checkContext._data, null);
});

it('returns false for elements with role=none', function() {
fixture.innerHTML =
'<div role="none" aria-roledescription="Awesome Main">The main element</div>';
flatTreeSetup(fixture);
it('returns false for elements with role=none', function () {
var vNode = queryFixture(
'<div role="none" aria-roledescription="Awesome Main" id="target">The main element</div>'
);

var actual = axe.testUtils
.getCheckEvaluate('aria-roledescription')
.call(checkContext, fixture.firstChild);
.call(checkContext, null, {}, vNode);
assert.equal(actual, false);
assert.isNull(checkContext._data, null);
});
Expand Down
95 changes: 95 additions & 0 deletions test/integration/virtual-rules/aria-roledescription.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
describe('aria-roledescription virtual-rule', function () {
it('should pass for elements with an implicit supported role', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'button',
attributes: {
'aria-roledescription': 'Awesome Button'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 1);
assert.lengthOf(results.violations, 0);
assert.lengthOf(results.incomplete, 0);
});

it('should pass for elements with an explicit supported role', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'div',
attributes: {
'aria-roledescription': 'Awesome Radio',
role: 'radio'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 1);
assert.lengthOf(results.violations, 0);
assert.lengthOf(results.incomplete, 0);
});

it('should incomplete for elements with an unsupported role', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'div',
attributes: {
'aria-roledescription': 'Awesome Main',
role: 'main'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 0);
assert.lengthOf(results.violations, 0);
assert.lengthOf(results.incomplete, 1);
});

it('should fail for elements without role', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'div',
attributes: {
'aria-roledescription': 'Awesome Main'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 0);
assert.lengthOf(results.violations, 1);
assert.lengthOf(results.incomplete, 0);
});

it('should fail for elements with role=presentation', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'div',
attributes: {
'aria-roledescription': 'Awesome Main',
role: 'presentation'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 0);
assert.lengthOf(results.violations, 1);
assert.lengthOf(results.incomplete, 0);
});

it('should fail for elements with role=none', function () {
var node = new axe.SerialVirtualNode({
nodeName: 'div',
attributes: {
'aria-roledescription': 'Awesome Main',
role: 'none'
}
});

var results = axe.runVirtualRule('aria-roledescription', node);

assert.lengthOf(results.passes, 0);
assert.lengthOf(results.violations, 1);
assert.lengthOf(results.incomplete, 0);
});
});