Add ignoreElements input to API (#69)

* Generate pa11yOpts within getConfig

* Update function signatures to expect options object

* Add ignoreElements to manifest

* Update signature of getPa11yOpts

* Pass explicit pa11yOpts into runPa11y

Author: mxmason

manifest.yml

@@ -9,6 +9,8 @@ inputs:
   - name: ignoreDirectories
     default: []
     description: Array of directories whose pages the plugin should ignore when checking for a11y issues. Defaults to [].
+  - name: ignoreElements
+    description: A CSS selector to ignore elements when testing. Accepts multiple comma-separated selectors.
   - name: wcagLevel
     default: 'WCAG2AA'
     description: The level of WCAG 2.1 against which to check site pages. Defaults to 'WCAGAA'; can also be 'WCAGA' or 'WCAGAAA'.

src/config.js

@@ -9,25 +9,33 @@ const PA11Y_DEFAULT_WCAG_LEVEL = 'WCAG2AA'
 const PA11Y_RUNNERS = ['axe']
 const PA11Y_USER_AGENT = 'netlify-plugin-a11y'
 
-const getConfiguration = ({
+const getConfiguration = async ({
 	constants: { PUBLISH_DIR },
-	inputs: { checkPaths, ignoreDirectories, failWithIssues, wcagLevel },
+	inputs: { checkPaths, ignoreDirectories, ignoreElements, failWithIssues, wcagLevel },
 }) => {
 	return {
-		publishDir: PUBLISH_DIR || process.env.PUBLISH_DIR,
 		checkPaths: checkPaths || DEFAULT_CHECK_PATHS,
-		ignoreDirectories: ignoreDirectories || DEFAULT_IGNORE_DIRECTORIES,
 		failWithIssues: failWithIssues !== undefined ? failWithIssues : DEFAULT_FAIL_WITH_ISSUES,
-		wcagLevel: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,
+		ignoreDirectories: ignoreDirectories || DEFAULT_IGNORE_DIRECTORIES,
+		pa11yOpts: await getPa11yOpts({ hideElements: ignoreElements, standard: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL }),
+		publishDir: PUBLISH_DIR || process.env.PUBLISH_DIR,
 	}
 }
 
-const getPa11yOpts = async (wcagLevel) => {
+/**
+ * Generates the options object used to configure Pa11y.
+ * @param {Object} pa11yInputs
+ * @param {String} [pa11yInputs.hideElements]
+ * @param {'WCAG2A' | 'WCAG2AA' | 'WCAG2AAA'} [pa11yInputs.standard]
+ * @returns
+ */
+const getPa11yOpts = async ({ hideElements, standard }) => {
 	return {
 		browser: await puppeteer.launch({ ignoreHTTPSErrors: true }),
+		hideElements,
 		runners: PA11Y_RUNNERS,
 		userAgent: PA11Y_USER_AGENT,
-		standard: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,
+		standard,
 	}
 }
 

src/index.js

@@ -7,7 +7,7 @@ const pico = require('picocolors')
 module.exports = {
 	async onPostBuild({ constants, inputs, utils: { build } }) {
 		try {
-			const { publishDir, checkPaths, ignoreDirectories, wcagLevel, failWithIssues } = getConfiguration({
+			const { publishDir, checkPaths, ignoreDirectories, failWithIssues, pa11yOpts } = await getConfiguration({
 				constants,
 				inputs,
 			})
@@ -23,7 +23,7 @@ module.exports = {
 				build,
 				htmlFilePaths,
 				publishDir,
-				wcagLevel,
+				pa11yOpts,
 			})
 			const reportSummary =
 				`${issueCount === 0 ? 'No' : issueCount} accessibility issues found!` +

src/pluginCore.js

@@ -5,16 +5,14 @@ const { extname, join } = require('path')
 const { isDirectory, isFile } = require('path-type')
 const { results: cliReporter } = require('./reporter')
 const readdirp = require('readdirp')
-const { getPa11yOpts } = require('./config')
 const { StaticServer, SERVER_ADDRESS } = require('./server')
 
 const EMPTY_ARRAY = []
 const ASTERISK = '*'
 const HTML_EXT = '.html'
 const GLOB_HTML = '*.html'
 
-exports.runPa11y = async function ({ build, htmlFilePaths, publishDir, wcagLevel }) {
-	const pa11yOpts = await getPa11yOpts(wcagLevel)
+exports.runPa11y = async function ({ build, htmlFilePaths, pa11yOpts, publishDir }) {
 	let issueCount = 0
 
 	const staticServer = new StaticServer(publishDir).listen()

tests/runPa11y/this.test.js

@@ -1,12 +1,14 @@
 const path = require('path')
+const { getPa11yOpts } = require('../../src/config')
 const filePath = path.relative(process.cwd(), path.join(__dirname, 'publishDir/index.html'))
 
 // actual test
 const pluginCore = require('../../src/pluginCore')
 test('runPa11y works', async () => {
 	const results = await pluginCore.runPa11y({
-		htmlFilePaths: [filePath],
 		build: { failBuild() {} },
+		htmlFilePaths: [filePath],
+		pa11yOpts: await getPa11yOpts({}),
 	})
 	expect(results).toMatchSnapshot()
 })