Create WCAG information about HTMLCS issues

create-wcag-information.js

import { getLinkToCriterion, getLinkToTechnique } from 'wcag-reference';

/**
 * Parses the wcag information from the pa11y HTML_CS runner code string.
 *
 * @url https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules
 * @url https://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/
 *
 * @param issue
 * @return The pa11y-Issue with updated tags.
 */
export default function(issue) {
    if (!issue.code) {
        return issue;
    }

    const htmlCsCodeRegEx = new RegExp(
        /WCAG\d+(?<level>A{1,3})\.Principle\d\.Guideline[\d_]+\.(?<criterion>\d_\d_\d{1,2})[._](?<techniquesString>(?:(?:[A-Z]|ARIA|SCR)\d{1,3},?)+)?/
    );
    const match = htmlCsCodeRegEx.exec(issue.code);

    if (!match) {
        return issue;
    }

    const version = '2.1'; // WCAG Version is always 2.1 for HTMLCS
    const { level, criterion, techniquesString } = match.groups;

    // parse the bullet points from the criterion
    const [chapter, section, subsection] = criterion
        .split('_')
        .map((string) => Number.parseInt(string, 10));

    // add a link to the bullet point
    const criterions = [];
    try {
        const link = getLinkToCriterion(version, chapter, section, subsection);

        criterions.push({ chapter, section, subsection, link });
    } catch (error) {
        console.warn("Couldn't add a link to the WCAG criterion!", { error });
    }

    // add links to the techniques
    const techniques = techniquesString
        .split(',')
        .flatMap((technique) => {
            try {
                const link = getLinkToTechnique(version, technique);

                return {
                    name: technique,
                    link,
                };
            } catch (error) {
                console.warn("Couldn't add a link to the WCAG technique!", {
                    error,
                });

                return [];
            }
        });

    // add wcag information
    const tags: WcagInformation = {
        level: [...level].length, // is 1 | 2 | 3
        techniques,
        criterions,
        version,
    };

    issue.wcag = tags;

    return issue;
}