New Test - underlines
brianteeman opened this issue · comments
Brian Teeman commented
I wrote a new rule to check for underlines.
TEXT_UNDERLINE_WARNING: 'Underlined text can be confused with links.',
TEXT_UNDERLINE_WARNING_TIP: 'Consider using a different style such as <em><em>emphasis</em></em>.',
// ============================================================
// Ruleset: Underlined text
// ============================================================
// check text for <u> tags
checkUnderline () {
const underline = Array.from(this.$root.querySelectorAll('u'));
underline.forEach(($el) => {
this.warningCount++;
$el.insertAdjacentHTML(
'beforebegin',
this.annotate(
Lang._('WARNING'),
`${Lang._('TEXT_UNDERLINE_WARNING')} <hr aria-hidden="true"> ${Lang._('TEXT_UNDERLINE_WARNING_TIP')}`,
true
)
);
});
// check for text-decoration-line: underline
const computed = Array.from(this.$root.querySelectorAll('h1, h2, h3, h4, h5, h6, p, div, span, li, blockquote'));
computed.forEach(($el) => {
let style = getComputedStyle($el),
decoration = style.textDecorationLine;
if (decoration === 'underline') {
this.warningCount++;
$el.insertAdjacentHTML(
'beforebegin',
this.annotate(
Lang._('WARNING'),
`${Lang._('TEXT_UNDERLINE_WARNING')} <hr aria-hidden="true"> ${Lang._('TEXT_UNDERLINE_WARNING_TIP')}`,
true
)
);
}
});
}
Adam Chaboryk commented
Thanks for the addition, @brianteeman. I'll be including it in the next release!