Merge pull request #95 from fourkitchens/pa11y

Added pa11y, set up testing for twig, scss reloading

gulp-config.js

@@ -82,5 +82,21 @@
       // WebPageTest API key https://www.webpagetest.org/getkey.php
       // key:
     },
+    pa11y: {
+      includeNotices: true,
+      includeWarnings: true,
+      ignore: [
+        'WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2',
+        'WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl',
+        'WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2',
+        'WCAG2AA.Principle3.Guideline3_2.3_2_1.G107',
+      ],
+      hideElements: '',
+      rootElement: null,
+      rules: [],
+      standard: 'WCAG2AA',
+      wait: 250,
+      actions: [],
+    },
   };
 })();

gulp-tasks/gulp-pattern-lab.js

@@ -4,6 +4,7 @@ const notifier = require('./notifier.js');
 const path = require('path');
 const yaml = require('js-yaml');
 const fs = require('fs');
+const pa11y = require('./pa11y');
 
 ((() => {
   module.exports = (gulp, config, { watch, compile }, browserSync) => {
@@ -37,6 +38,8 @@ const fs = require('fs');
             browserSync.reload('*.html');
           }
         });
+        // Accessibility.
+        pa11y.pa11yTest(event.path, browserSync, config);
       });
     });
 

gulp-tasks/pa11y.js

@@ -0,0 +1,79 @@
+const fs = require('fs');
+const pa11y = require('pa11y');
+// eslint-disable-next-line
+const pa11yCli = require('pa11y-reporter-cli');
+
+async function pa11yRun(pa11yUrl, config) {
+  try {
+    await pa11y(pa11yUrl, {
+      includeNotices: config.pa11y.includeNotices,
+      includeWarnings: config.pa11y.includeWarnings,
+      ignore: config.pa11y.ignore,
+      hideElements: config.pa11y.hideElements,
+      rootElement: config.pa11y.rootElement,
+      rules: config.pa11y.rules,
+      standard: config.pa11y.standard,
+      wait: config.pa11y.wait,
+      actions: config.pa11y.actions,
+    }).then((results) => {
+      if (results.issues === undefined || results.issues.length < 1) {
+        console.log('[pa11y] No accessibility issues found!');
+      } else {
+        console.log(pa11yCli.results(results));
+        if (config.pa11y.includeNotices === true) {
+          console.log('Note: pa11y notices are enabled by default. To disable notices, edit local.gulp-config.js and set "includeNotices" to false.');
+        }
+        if (config.pa11y.includeWarnings === true) {
+          console.log('Note: pa11y warnings are enabled by default. To disable warnings, edit local.gulp-config.js and set "includeWarnings" to false.');
+        }
+        if (config.pa11y.includeNotices === true || config.pa11y.includeWarnings === true) {
+          console.log('See https://github.com/fourkitchens/emulsify/wiki/Gulp-Config for details.');
+        }
+      }
+    });
+    // Do something with the results
+  } catch (error) {
+    // Handle the error
+    console.log(error);
+  }
+}
+
+/**
+ * Accessibility Testing
+ */
+
+// Accessibility testing via pa11y.
+function pa11yTest(path, browserSync, config) {
+  // Get local url.
+  const localUrl = browserSync.getOption('urls').get('local');
+  const filePath = path;
+  // Get remaining path after ../_patterns/.
+  const pLPath = filePath.split('_patterns/').pop();
+  // Change remaining path string to array.
+  const fileArray = pLPath.split('/');
+  // Remove filename (just want directory).
+  fileArray.splice(-1, 1);
+
+  // CSS returns a couple of paths and causes duplication.
+  if (filePath.split('/').includes('pattern-lab')) {
+    const fileDir = `${filePath.split('_patterns/')[0]}_patterns/${fileArray.join('/')}`;
+
+    fs.readdir(fileDir, (err, items) => {
+      items.forEach((item) => {
+        // Select components based on YAML files.
+        if (item.split('.').pop() === 'yml') {
+          // Change array to string separated by dash.
+          const twigFilePath = `${fileDir}/${item}`;
+          const twigFilePlPath = twigFilePath.split('_patterns/').pop();
+          const filetoArray = twigFilePlPath.split('/');
+          const arraytoPath = filetoArray.join('-');
+          const arraytoPathTweak = arraytoPath.replace('~', '-').slice(0, -4);
+          const pa11yPath = `${localUrl}patterns/${arraytoPathTweak}/${arraytoPathTweak}.html`;
+          pa11yRun(pa11yPath, config);
+        }
+      });
+    });
+  }
+}
+
+module.exports.pa11yTest = pa11yTest;

index.js

@@ -10,6 +10,7 @@ module.exports = (gulp, config) => {
   const babel = require('gulp-babel');
   const sourcemaps = require('gulp-sourcemaps');
   const defaultConfig = require('./gulp-config');
+  const pa11y = require('./gulp-tasks/pa11y');
 
   // eslint-disable-next-line no-redeclare, no-var
   var config = _.defaultsDeep(config, defaultConfig);
@@ -83,15 +84,15 @@ module.exports = (gulp, config) => {
 
   tasks.compile.push('icons');
 
-  // Pattern Lab
-  require('./gulp-tasks/gulp-pattern-lab.js')(gulp, config, tasks, browserSync);
-
   // Find open port using portscanner.
   let openPort = '';
   portscanner.findAPortNotInUse(3000, 3010, '127.0.0.1', (error, port) => {
     openPort = port;
   });
 
+  // Pattern Lab
+  require('./gulp-tasks/gulp-pattern-lab.js')(gulp, config, tasks, browserSync, openPort);
+
   /**
    * Task for running browserSync.
    */
@@ -117,8 +118,10 @@ module.exports = (gulp, config) => {
         port: openPort,
       });
     }
-    gulp.watch(config.paths.js, ['scripts']).on('change', browserSync.reload);
-    gulp.watch(`${config.paths.sass}/**/*.scss`, ['css']);
+    gulp.watch(config.paths.js, ['scripts']);
+    gulp.watch(`${config.paths.sass}/**/*.scss`, ['css']).on('change', (event) => {
+      pa11y.pa11yTest(event.path, browserSync, config);
+    });
     gulp.watch(config.patternLab.scssToYAML[0].src, ['pl:scss-to-yaml']);
   });
 

package.json

@@ -40,6 +40,7 @@
     "ngrok": "^2.2.2",
     "node-normalize-scss": "^3.0.0",
     "node-notifier": "^5.1.2",
+    "pa11y": "^5.1.0",
     "portscanner": "^2.1.1",
     "pre-commit": "^1.2.2",
     "psi": "^3.0.0",