ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.

Home Page:https://sa11y.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

New Test - underlines

brianteeman opened this issue · comments

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 &lt;em&gt;<em>emphasis</em>&lt;/em&gt;.',
      // ============================================================
       // 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
                       )
                   );
               }
           });
       }

Thanks for the addition, @brianteeman. I'll be including it in the next release!