diff --git a/client/scss/components/_a11y-result.scss b/client/scss/components/_a11y-result.scss index a76488b17e..10ac55ad37 100644 --- a/client/scss/components/_a11y-result.scss +++ b/client/scss/components/_a11y-result.scss @@ -3,6 +3,11 @@ padding: theme('spacing.4'); display: flex; justify-content: space-between; + + // Shows additional details within the CMS only. + .form-side--checks & { + display: block; + } } .w-a11y-result__header { @@ -43,6 +48,15 @@ height: theme('spacing.[7.5]'); width: theme('spacing.[7.5]'); + .form-side--checks & { + background-color: theme('colors.surface-button-outline-hover'); + margin-top: theme('spacing.[2.5]'); + margin-inline-end: 0; + padding: theme('spacing.1'); + gap: theme('spacing.[1.5]'); + width: auto; + } + &:hover, &:focus { background: theme('colors.surface-header'); diff --git a/client/src/includes/a11y-result.ts b/client/src/includes/a11y-result.ts index 06971b9ccc..05a90568e5 100644 --- a/client/src/includes/a11y-result.ts +++ b/client/src/includes/a11y-result.ts @@ -194,20 +194,32 @@ export const renderA11yResults = ( messages?.help_text || violation.description; // Special-case when displaying accessibility results within the admin interface. + const isInCMS = node.target[0] === '#preview-iframe'; const selectorName = toSelector( - node.target[0] === '#preview-iframe' - ? node.target[1] - : node.target[0], + isInCMS ? node.target[1] : node.target[0], ); const a11ySelector = currentA11yRow.querySelector( '[data-a11y-result-selector]', ) as HTMLButtonElement; a11ySelector.setAttribute('aria-describedby', a11yErrorName.id); - a11ySelector?.addEventListener( + a11ySelector.addEventListener( 'click', onClickSelector.bind(null, selectorName), ); + + // Display the selector text in the CMS, + // as a workaround until we highlight errors within the preview panel. + if (isInCMS) { + const selectorText = a11ySelector.querySelector( + '[data-a11y-result-selector-text]', + ) as HTMLSpanElement; + // Remove unnecessary details before displaying selectors to the user + selectorText.textContent = selectorName.replace( + /\[data-block-key="\w{5}"\]/, + '', + ); + } }); }); } diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html b/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html index 6d5634a944..176c4ac1c4 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html +++ b/wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html @@ -7,10 +7,15 @@
- +