Skip to content

Commit

Permalink
fix: update based on review
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeeyyy
jeeyyy committed Apr 11, 2019
1 parent 4764120 commit 16e3577
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 21 deletions.
16 changes: 10 additions & 6 deletions lib/checks/shared/avoid-inline-spacing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ const inlineSpacingCssProperties = [
'word-spacing'
];

const hasImportantPriority = inlineSpacingCssProperties.some(
property => node.style.getPropertyPriority(property) === `important`
);
const overriddenProperties = inlineSpacingCssProperties.filter(property => {
if (node.style.getPropertyPriority(property) === `important`) {
return property;
}
});

if (hasImportantPriority) {
return false; //-> fail
if (overriddenProperties.length > 0) {
this.data(overriddenProperties);
console.log(overriddenProperties);
return false;
}

return true; // -> pass
return true;
4 changes: 2 additions & 2 deletions lib/checks/shared/avoid-inline-spacing.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"metadata": {
"impact": "serious",
"messages": {
"pass": "No inline styles that affect text spacing has been specified",
"fail": "Inline styles that affect text spacing has been specified"
"pass": "No inline styles with '!important' that affect text spacing has been specified",
"fail": "Remove '!important' from inline style{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} that affect text spacing"
}
}
}
2 changes: 1 addition & 1 deletion lib/rules/avoid-inline-spacing.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"tags": ["wcag21", "wcag1412"],
"metadata": {
"description": "Ensure text spacing is not affected by inline spacing styles that affects CSS specificity",
"help": "No inline styles that affect text spacing should been specified"
"help": "No inline styles with '!important' that affect text spacing should been specified"
},
"all": ["avoid-inline-spacing"],
"any": [],
Expand Down
58 changes: 48 additions & 10 deletions test/checks/shared/avoid-inline-spacing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,118 @@ describe('avoid-inline-spacing tests', function() {
var fixture = document.getElementById('fixture');
var queryFixture = axe.testUtils.queryFixture;
var check = checks['avoid-inline-spacing'];
var checkContext = axe.testUtils.MockCheckContext();

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

it('returns true when no inline spacing styles are specified', function() {
var vNode = queryFixture(
'<p id="target" style="font-size: 200%;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when inline spacing styles has invalid value', function() {
var vNode = queryFixture(
'<p id="target" style="line-height: 5invalid;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when inline spacing styles has invalid value and `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="line-height: invalid !important;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when `line-height` style specified has no `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="line-height: 1.5;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when `letter-spacing` style specified has no `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="letter-spacing: 50px;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when `word-spacing` style specified has no `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="word-spacing: 10px;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns true when none of the multiple inline spacing styles specified have priority of `!important`', function() {
var vNode = queryFixture(
'<p id="target" style="word-spacing: 20ch; letter-spacing: 50rem; line-height: 3;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isTrue(actual);
assert.isNull(checkContext._data);
});

it('returns false when `line-height` style specified has `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="line-height: 1.5 !important;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isFalse(actual);
assert.deepEqual(checkContext._data, ['line-height']);
});

it('returns false when `letter-spacing` style specified has `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="letter-spacing: 100em !important;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isFalse(actual);
assert.deepEqual(checkContext._data, ['letter-spacing']);
});

it('returns false when `word-spacing` style specified has `!important` priority', function() {
var vNode = queryFixture(
'<p id="target" style="word-spacing: -.4ch !important;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isFalse(actual);
assert.deepEqual(checkContext._data, ['word-spacing']);
});

it('returns false when one(any) of the multiple inline spacing styles specified priority of `!important`', function() {
it('returns false when any of the multiple inline spacing styles specifies priority of `!important`', function() {
var vNode = queryFixture(
'<p id="target" style="word-spacing: 200%; letter-spacing: 50rem !important; line-height: 3;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate(vNode.actualNode);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isFalse(actual);
assert.deepEqual(checkContext._data, ['letter-spacing']);
});

it('returns false when multiple inline spacing styles specifies priority of `!important`', function() {
var vNode = queryFixture(
'<p id="target" style="line-height: 3 !important; letter-spacing: 50rem !important;">The quick brown fox jumped over the lazy dog</p>'
);
var actual = check.evaluate.call(checkContext, vNode.actualNode);
assert.isFalse(actual);
assert.deepEqual(checkContext._data, ['line-height', 'letter-spacing']);
});
});
9 changes: 7 additions & 2 deletions test/playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
<html lang="en">
<title>O hai</title>

<div class="foo" id="foo">foo</div>
<p id="target" style="word-spacing: 200% !important; letter-spacing: 50rem !important; line-height: 3 !important;">The quick brown fox jumped over the lazy dog</p>

<script src="/axe.js"></script>
<script>
window.addEventListener('load' , function () {
axe.run(document, function (err, res) {
axe.run({
runOnly: {
type: 'rule',
values: ['avoid-inline-spacing']
}
}, function (err, res) {
console.log(res.violations);
res.incomplete.forEach(issue => console.log(issue))
});
Expand Down

0 comments on commit 16e3577

Please sign in to comment.