Skip to content

Commit

Permalink
fix(listitem): clarify that li elements must be contained in a list o…
Browse files Browse the repository at this point in the history
…r role=list (#1894)

* fix(listitem): clarify that li elements must be contained in a list or role=list

* add message to remediation

* remove comment
  • Loading branch information
straker committed Dec 11, 2019
1 parent 3aba02c commit 8fa0964
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 30 deletions.
1 change: 1 addition & 0 deletions lib/checks/lists/listitem.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ if (parentRole === 'list') {
}

if (parentRole && axe.commons.aria.isValidRole(parentRole)) {
this.data('roleNotValid');
return false;
}

Expand Down
2 changes: 1 addition & 1 deletion lib/checks/lists/listitem.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"impact": "serious",
"messages": {
"pass": "List item has a <ul>, <ol> or role=\"list\" parent element",
"fail": "List item does not have a <ul>, <ol> or role=\"list\" parent element"
"fail": "List item does not have a <ul>, <ol>{{? it.data === 'roleNotValid'}} without a role, or a role=\"list\"{{?}} parent element"
}
}
}
65 changes: 36 additions & 29 deletions test/checks/lists/listitem.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,84 @@ describe('listitem', function() {
'use strict';

var fixture = document.getElementById('fixture');
var checkSetup = axe.testUtils.checkSetup;
var shadowSupport = axe.testUtils.shadowSupport;
var checkContext = axe.testUtils.MockCheckContext();

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

it('should pass if the listitem has a parent <ol>', function() {
var checkArgs = checkSetup('<ol><li id="target">My list item</li></ol>');
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML = '<ol><li id="target">My list item</li></ol>';
var target = fixture.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
});

it('should pass if the listitem has a parent <ul>', function() {
var checkArgs = checkSetup('<ul><li id="target">My list item</li></ul>');
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML = '<ul><li id="target">My list item</li></ul>';
var target = fixture.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
});

it('should pass if the listitem has a parent role=list', function() {
var checkArgs = checkSetup(
'<div role="list"><li id="target">My list item</li></div>'
);
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML =
'<div role="list"><li id="target">My list item</li></div>';
var target = fixture.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
});

it('should fail if the listitem has an incorrect parent', function() {
var checkArgs = checkSetup('<div><li id="target">My list item</li></div>');
assert.isFalse(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML = '<div><li id="target">My list item</li></div>';
var target = fixture.querySelector('#target');
assert.isFalse(checks.listitem.evaluate.call(checkContext, target));
});

it('should fail if the listitem has a parent <ol> with changed role', function() {
var checkArgs = checkSetup(
'<ol role="menubar"><li id="target">My list item</li></ol>'
);
assert.isFalse(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML =
'<ol role="menubar"><li id="target">My list item</li></ol>';
var target = fixture.querySelector('#target');
assert.isFalse(checks.listitem.evaluate.call(checkContext, target));
assert.equal(checkContext._data, 'roleNotValid');
});

it('should pass if the listitem has a parent <ol> with an invalid role', function() {
var checkArgs = checkSetup(
'<ol role="invalid-role"><li id="target">My list item</li></ol>'
);
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML =
'<ol role="invalid-role"><li id="target">My list item</li></ol>';
var target = fixture.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
});

it('should pass if the listitem has a parent <ol> with an abstract role', function() {
var checkArgs = checkSetup(
'<ol role="section"><li id="target">My list item</li></ol>'
);
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.innerHTML =
'<ol role="section"><li id="target">My list item</li></ol>';
var target = fixture.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
});

(shadowSupport.v1 ? it : xit)(
'should return true in a shadow DOM pass',
function() {
var node = document.createElement('div');
node.innerHTML = '<li>My list item </li>';
node.innerHTML = '<li id="target">My list item </li>';
var shadow = node.attachShadow({ mode: 'open' });
shadow.innerHTML = '<ul><slot></slot></ul>';
var checkArgs = checkSetup(node, 'li');
assert.isTrue(checks.listitem.evaluate.apply(null, checkArgs));
fixture.appendChild(node);
var target = node.querySelector('#target');
assert.isTrue(checks.listitem.evaluate.call(checkContext, target));
}
);

(shadowSupport.v1 ? it : xit)(
'should return false in a shadow DOM fail',
function() {
var node = document.createElement('div');
node.innerHTML = '<li>My list item </li>';
node.innerHTML = '<li id="target">My list item </li>';
var shadow = node.attachShadow({ mode: 'open' });
shadow.innerHTML = '<div><slot></slot></div>';
var checkArgs = checkSetup(node, 'li');
assert.isFalse(checks.listitem.evaluate.apply(null, checkArgs));
fixture.appendChild(node);
var target = node.querySelector('#target');
assert.isFalse(checks.listitem.evaluate.call(checkContext, target));
}
);
});

0 comments on commit 8fa0964

Please sign in to comment.