From ba516ef492a305bdcd7731ad1fa2ca07a2303cc9 Mon Sep 17 00:00:00 2001 From: LB Johnston Date: Tue, 6 Feb 2024 09:54:28 +1000 Subject: [PATCH] a11y results - coerce CrossTreeSelector into a string - Ensures that TypeScript will allow these values to be passed into querySelector --- client/src/includes/a11y-result.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/client/src/includes/a11y-result.ts b/client/src/includes/a11y-result.ts index e8aa9cd3ee..3b208f450d 100644 --- a/client/src/includes/a11y-result.ts +++ b/client/src/includes/a11y-result.ts @@ -6,10 +6,17 @@ import { RunOptions, } from 'axe-core'; +const toSelector = (str: string | string[]) => + Array.isArray(str) ? str.join(' ') : str; + const sortAxeNodes = (nodeResultA?: NodeResult, nodeResultB?: NodeResult) => { if (!nodeResultA || !nodeResultB) return 0; - const nodeA = document.querySelector(nodeResultA.target[0]); - const nodeB = document.querySelector(nodeResultB.target[0]); + const nodeA = document.querySelector( + toSelector(nodeResultA.target[0]), + ); + const nodeB = document.querySelector( + toSelector(nodeResultB.target[0]), + ); if (!nodeA || !nodeB) return 0; // Method works with bitwise https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition // eslint-disable-next-line no-bitwise @@ -117,10 +124,11 @@ export const renderA11yResults = ( '[data-a11y-result-selector-text]', ) as HTMLSpanElement; // Special-case when displaying accessibility results within the admin interface. - const selectorName = + const selectorName = toSelector( node.target[0] === '#preview-iframe' ? node.target[1] - : node.target[0]; + : node.target[0], + ); // Remove unnecessary details before displaying selectors to the user currentA11ySelectorText.textContent = selectorName.replace( /\[data-block-key="\w{5}"\]/,