A11y infrastructure

entities/core-result.entity.ts

@@ -22,6 +22,7 @@ export type CoreResultPages = {
   robotsTxt: ScanPage.RobotsTxtPageScan;
   sitemapXml: ScanPage.SitemapXmlPageScan;
   dns: ScanPage.DnsPageScan;
+  accessibility: ScanPage.AccessibilityPageScan;
 };
 
 @Entity()
@@ -366,6 +367,26 @@ export class CoreResult {
   @Expose({ name: 'searchgov' })
   searchgov?: boolean;
 
+  @Column({ nullable: true })
+  @Expose({ name: 'accessibility_scan_status' })
+  @Exclude()
+  accessibilityScanStatus?: string;
+
+  @Column({ nullable: true })
+  @Expose({ name: 'missing_img_alt_issues' })
+  @Exclude()
+  missingImgAltIssues?: number;
+
+  @Column({ nullable: true })
+  @Expose({ name: 'html_attribute_issues' })
+  @Exclude()
+  htmlAttributeIssues?: number;
+
+  @Column({ nullable: true })
+  @Expose({ name: 'color_contrast_issues' })
+  @Exclude()
+  colorContrastIssues?: number;
+
   static getColumnNames(): string[] {
     // return class-transformer version of column names
     return Object.keys(classToPlain(new CoreResult()));

entities/scan-data.entity.ts

@@ -106,3 +106,9 @@ export type SearchScan = {
   searchDetected: boolean;
   searchgov: boolean;
 };
+
+export type AccessibilityScan = {
+  missingImgAltIssues: number;
+  htmlAttributeIssues: number;
+  colorContrastIssues: number;
+};

entities/scan-page.entity.ts

@@ -47,3 +47,9 @@ export type DnsScans = {
   dnsScan: ScanData.DnsScan;
 };
 export type DnsPageScan = PageScan<DnsScans>;
+
+export type AccessibilityScans = {
+  accessibilityScan: ScanData.AccessibilityScan;
+};
+
+export type AccessibilityPageScan = PageScan<AccessibilityScans>;

libs/core-scanner/src/core-scanner.service.ts

@@ -39,6 +39,11 @@ export class CoreScannerService
         robotsTxt: await this.runRobotsTxtScan(browser, input, scanLogger),
         sitemapXml: await this.runSitemapXmlScan(browser, input, scanLogger),
         dns: await this.runDnsScan(input.url, scanLogger),
+        accessibility: await this.runAccessibilityScan(
+          browser,
+          input,
+          scanLogger,
+        ),
       };
 
       scanLogger.info({ result }, 'solutions scan results');
@@ -177,6 +182,33 @@ export class CoreScannerService
     }
   }
 
+  private async runAccessibilityScan(
+    browser: Browser,
+    input: CoreInputDto,
+    logger: Logger,
+  ): Promise<ScanPage.AccessibilityPageScan> {
+    try {
+      const result = await this.browserService.processPage(
+        browser,
+        pages.createAccessibilityScanner(
+          logger.child({ page: 'accessibility' }),
+          input,
+        ),
+      );
+      return {
+        status: ScanStatus.Completed,
+        result,
+        error: null,
+      };
+    } catch (error) {
+      return {
+        status: this.getScanStatus(error, input.url, logger),
+        result: null,
+        error,
+      };
+    }
+  }
+
   private getScanStatus(error: Error, url: string, logger: Logger) {
     const scanStatus = parseBrowserError(error);
     if (scanStatus === ScanStatus.UnknownError) {

libs/core-scanner/src/pages/accessibility.ts

@@ -0,0 +1,95 @@
+import { join } from 'path';
+import { Logger } from 'pino';
+import * as HTMLCS from 'html_codesniffer';
+import { Message } from 'html_codesniffer';
+import { getHttpsUrl } from '../util';
+import { CoreInputDto } from '../core.input.dto';
+import { Page } from 'puppeteer';
+import { AccessibilityScan } from 'entities/scan-data.entity';
+import { AccessibilityScans } from 'entities/scan-page.entity';
+
+export const createAccessibilityScanner = (
+  logger: Logger,
+  input: CoreInputDto,
+) => {
+  return async (page: Page): Promise<AccessibilityScans> => {
+    await page.goto(getHttpsUrl(input.url));
+
+    const scriptPath = join(
+      __dirname,
+      '..',
+      '..',
+      '..',
+      'node_modules',
+      'html_codesniffer',
+      'build',
+      'HTMLCS.js',
+    );
+
+    await page.addScriptTag({
+      path: scriptPath,
+    });
+
+    return {
+      accessibilityScan: await buildAccessibilityResult(logger, page),
+    };
+  };
+};
+
+async function buildAccessibilityResult(
+  logger: Logger,
+  page: Page,
+): Promise<AccessibilityScan> {
+  try {
+    const htmlcsResults = await getHtmlcsResults(logger, page);
+
+    if (!htmlcsResults) {
+      throw new Error('html_codesniffer could not run');
+    } else {
+      return {
+        missingImgAltIssues: getIssueTotalByCategory(
+          htmlcsResults,
+          'WCAG2AA.Principle1.Guideline1_1',
+        ),
+        htmlAttributeIssues: getIssueTotalByCategory(
+          htmlcsResults,
+          'WCAG2AA.Principle4.Guideline4_1',
+        ),
+        colorContrastIssues: getIssueTotalByCategory(
+          htmlcsResults,
+          'WCAG2AA.Principle1.Guideline1_4',
+        ),
+      };
+    }
+  } catch (err) {
+    logger.warn(`Error running HTMLCS in page: ${err}`);
+    throw err;
+  }
+}
+
+async function getHtmlcsResults(
+  logger: Logger,
+  page: Page,
+): Promise<Message[]> | undefined {
+  const htmlcsResults: any = await page.evaluate(() => {
+    return new Promise((resolve, reject) => {
+      try {
+        HTMLCS.process('WCAG2AA', document.documentElement, () => {
+          const results = HTMLCS.getMessages();
+          resolve(results);
+        });
+      } catch (err) {
+        reject(err);
+      }
+    });
+  });
+
+  return htmlcsResults;
+}
+
+function getIssueTotalByCategory(results: any[], category: string): number {
+  const HTMLCS_ERROR_CODE = 1;
+  return results
+    .filter((msg) => msg.type === HTMLCS_ERROR_CODE)
+    .filter((msg) => msg.code.includes(category)).length;
+}

libs/core-scanner/src/pages/index.ts

@@ -3,3 +3,4 @@ export * from './primary';
 export * from './not-found';
 export * from './robots-txt';
 export * from './sitemap-xml';
+export * from './accessibility';

libs/database/src/core-results/core-result.service.spec.ts

@@ -193,6 +193,16 @@ describe('CoreResultService', () => {
           },
         },
       },
+      accessibility: {
+        status: scanStatus,
+        result: {
+          accessibilityScan: {
+            missingImgAltIssues: 0,
+            htmlAttributeIssues: 0,
+            colorContrastIssues: 0,
+          },
+        },
+      },
     };
     const logger = mock<Logger>();
 

libs/database/src/core-results/core-result.service.ts

@@ -35,6 +35,7 @@ export class CoreResultService {
     this.updateRobotsTxtScanResults(coreResult, pages, logger);
     this.updateSitemapXmlScanResults(coreResult, pages, logger);
     this.updateDnsScanResults(coreResult, pages, logger);
+    this.updateAccessibilityScanResults(coreResult, pages, logger);
 
     return this.create(coreResult);
   }
@@ -296,4 +297,32 @@ export class CoreResultService {
       coreResult.dnsHostname = null;
     }
   }
+
+  private updateAccessibilityScanResults(
+    coreResult: CoreResult,
+    pages: CoreResultPages,
+    logger: Logger,
+  ) {
+    coreResult.accessibilityScanStatus = pages.accessibility.status;
+
+    if (pages.accessibility.status === ScanStatus.Completed) {
+      coreResult.missingImgAltIssues =
+        pages.accessibility.result.accessibilityScan.missingImgAltIssues;
+
+      coreResult.htmlAttributeIssues =
+        pages.accessibility.result.accessibilityScan.htmlAttributeIssues;
+
+      coreResult.colorContrastIssues =
+        pages.accessibility.result.accessibilityScan.colorContrastIssues;
+    } else {
+      logger.error({
+        msg: pages.accessibility.error,
+        page: 'accessibility',
+      });
+
+      coreResult.missingImgAltIssues = null;
+      coreResult.htmlAttributeIssues = null;
+      coreResult.colorContrastIssues = null;
+    }
+  }
 }