From 5802d92ad4d143dfec8abdf1ad029cd86c79c4f2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 28 Oct 2020 16:54:34 +0800 Subject: [PATCH 1/8] Try using axe disableFrame function --- .../e2e-tests/config/setup-test-framework.js | 4 +++ packages/jest-puppeteer-axe/src/index.js | 29 +++++++++++-------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index e420c7cdaa4cb..fcaaeb9c7b397 100644 --- a/packages/e2e-tests/config/setup-test-framework.js +++ b/packages/e2e-tests/config/setup-test-framework.js @@ -206,6 +206,10 @@ async function runAxeTestsForBlockEditor() { 'aria-required-parent', 'frame-title', ], + disabledFrames: [ + // Ignore block previews. + '.block-editor-block-preview__container iframe', + ], exclude: [ // Ignores elements created by metaboxes. '.edit-post-layout__metaboxes', diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index 587de4f8a142f..639ee9d3bc28a 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -62,23 +62,24 @@ function formatViolations( violations ) { * * @see https://github.com/dequelabs/axe-core-npm/tree/develop/packages/puppeteer * - * @param {Page} page Puppeteer's page instance. - * @param {?Object} params Optional params that allow better control over Axe API. - * @param {?string|Array} params.include CSS selector(s) to add to the list of elements - * to include in analysis. - * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements - * to exclude from analysis. - * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. - * @param {?RunOptions} params.options A flexible way to configure how Axe run operates, - * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. - * @param {?Spec} params.config Axe configuration object, - * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure. + * @param {Page} page Puppeteer's page instance. + * @param {?Object} params Optional params that allow better control over Axe API. + * @param {?string|Array} params.include CSS selector(s) to add to the list of elements + * to include in analysis. + * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements + * to exclude from analysis. + * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. + * @param {?Array} params.disabledFrames An array of selectors for iframes that are disabled in axe tests + * @param {?RunOptions} params.options A flexible way to configure how Axe run operates, + * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. + * @param {?Spec} params.config Axe configuration object, + * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure. * * @return {Object} A matcher object with two keys `pass` and `message`. */ async function toPassAxeTests( page, - { include, exclude, disabledRules, options, config } = {} + { include, exclude, disabledRules, disabledFrames, options, config } = {} ) { const axe = new AxePuppeteer( page ); @@ -98,6 +99,10 @@ async function toPassAxeTests( axe.disableRules( disabledRules ); } + if ( disabledFrames ) { + disabledFrames.forEach( axe.disableFrame ); + } + if ( config ) { axe.configure( config ); } From 1d25b0da5ac822642daec1049eac17e0dc859ac3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 28 Oct 2020 17:31:34 +0800 Subject: [PATCH 2/8] Arrow --- packages/jest-puppeteer-axe/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index 639ee9d3bc28a..01df9b616230b 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -100,7 +100,7 @@ async function toPassAxeTests( } if ( disabledFrames ) { - disabledFrames.forEach( axe.disableFrame ); + disabledFrames.forEach( ( frame ) => axe.disableFrame( frame ) ); } if ( config ) { From 194d51270701d07a84055d20891ac35542346db8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 28 Oct 2020 17:42:47 +0800 Subject: [PATCH 3/8] Use a valid selector --- packages/e2e-tests/config/setup-test-framework.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index fcaaeb9c7b397..e9ac04aec4e49 100644 --- a/packages/e2e-tests/config/setup-test-framework.js +++ b/packages/e2e-tests/config/setup-test-framework.js @@ -208,7 +208,7 @@ async function runAxeTestsForBlockEditor() { ], disabledFrames: [ // Ignore block previews. - '.block-editor-block-preview__container iframe', + '[aria-hidden="true"]', ], exclude: [ // Ignores elements created by metaboxes. From 01eff11b02b74376384f6de3ee1ba8bc3b57a94a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 28 Oct 2020 14:01:09 +0100 Subject: [PATCH 4/8] Testing if axe rules will fail tests --- packages/e2e-tests/config/setup-test-framework.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index e9ac04aec4e49..1dc66abe22d6c 100644 --- a/packages/e2e-tests/config/setup-test-framework.js +++ b/packages/e2e-tests/config/setup-test-framework.js @@ -193,15 +193,15 @@ async function runAxeTestsForBlockEditor() { 'aria-hidden-focus', 'aria-input-field-name', 'aria-valid-attr-value', - 'button-name', - 'color-contrast', - 'dlitem', + // 'button-name', + // 'color-contrast', + // 'dlitem', 'duplicate-id', - 'label', - 'landmark-one-main', + // 'label', + // 'landmark-one-main', 'link-name', - 'listitem', - 'region', + // 'listitem', + // 'region', 'aria-required-children', 'aria-required-parent', 'frame-title', From 6f55f9b87be5ff7d8db33515ef3f6f1f5716fe77 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 30 Oct 2020 11:11:49 +0800 Subject: [PATCH 5/8] Make disabledFrames an experimental property --- packages/jest-puppeteer-axe/src/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index 01df9b616230b..bc1c6968d9189 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -69,7 +69,6 @@ function formatViolations( violations ) { * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements * to exclude from analysis. * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. - * @param {?Array} params.disabledFrames An array of selectors for iframes that are disabled in axe tests * @param {?RunOptions} params.options A flexible way to configure how Axe run operates, * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. * @param {?Spec} params.config Axe configuration object, @@ -79,7 +78,14 @@ function formatViolations( violations ) { */ async function toPassAxeTests( page, - { include, exclude, disabledRules, disabledFrames, options, config } = {} + { + include, + exclude, + disabledRules, + __experimentalDisabledFrames: disabledFrames, + options, + config, + } = {} ) { const axe = new AxePuppeteer( page ); From 1e51f1741381561d563eb736e901603ddf5427a6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 30 Oct 2020 11:14:00 +0800 Subject: [PATCH 6/8] Uncomment out disabled rules that were commented for testing --- packages/e2e-tests/config/setup-test-framework.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index 1dc66abe22d6c..e9ac04aec4e49 100644 --- a/packages/e2e-tests/config/setup-test-framework.js +++ b/packages/e2e-tests/config/setup-test-framework.js @@ -193,15 +193,15 @@ async function runAxeTestsForBlockEditor() { 'aria-hidden-focus', 'aria-input-field-name', 'aria-valid-attr-value', - // 'button-name', - // 'color-contrast', - // 'dlitem', + 'button-name', + 'color-contrast', + 'dlitem', 'duplicate-id', - // 'label', - // 'landmark-one-main', + 'label', + 'landmark-one-main', 'link-name', - // 'listitem', - // 'region', + 'listitem', + 'region', 'aria-required-children', 'aria-required-parent', 'frame-title', From d5761ed6aa25fbef1a0f2977767e7d2d53ebcd26 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 30 Oct 2020 11:16:59 +0800 Subject: [PATCH 7/8] Improve comment --- packages/e2e-tests/config/setup-test-framework.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index e9ac04aec4e49..e9cab64c3d5dc 100644 --- a/packages/e2e-tests/config/setup-test-framework.js +++ b/packages/e2e-tests/config/setup-test-framework.js @@ -207,7 +207,10 @@ async function runAxeTestsForBlockEditor() { 'frame-title', ], disabledFrames: [ - // Ignore block previews. + // Ignore any aria-hidden iframes, in particular those added by + // react-resize-aware in the `useResizeObserver` hook. Axe often + // throws errors when trying to inject its scripts into these + // iframes. '[aria-hidden="true"]', ], exclude: [ From cecd4f21c5ce05ba755d182c88a141c751f48cd3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 30 Oct 2020 11:19:08 +0800 Subject: [PATCH 8/8] Fix comment indentation --- packages/jest-puppeteer-axe/src/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index bc1c6968d9189..75ca92239574b 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -62,17 +62,17 @@ function formatViolations( violations ) { * * @see https://github.com/dequelabs/axe-core-npm/tree/develop/packages/puppeteer * - * @param {Page} page Puppeteer's page instance. - * @param {?Object} params Optional params that allow better control over Axe API. - * @param {?string|Array} params.include CSS selector(s) to add to the list of elements - * to include in analysis. - * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements - * to exclude from analysis. - * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. - * @param {?RunOptions} params.options A flexible way to configure how Axe run operates, - * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. - * @param {?Spec} params.config Axe configuration object, - * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure. + * @param {Page} page Puppeteer's page instance. + * @param {?Object} params Optional params that allow better control over Axe API. + * @param {?string|Array} params.include CSS selector(s) to add to the list of elements + * to include in analysis. + * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements + * to exclude from analysis. + * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. + * @param {?RunOptions} params.options A flexible way to configure how Axe run operates, + * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. + * @param {?Spec} params.config Axe configuration object, + * see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure. * * @return {Object} A matcher object with two keys `pass` and `message`. */