Re-instate accessibility check selectors in CMS. Fix #12157

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');

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}"\]/,
+            '',
+          );
+        }
       });
     });
   }

wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html

@@ -7,10 +7,15 @@
             </h3>
             <div class="w-a11y-result__help" data-a11y-result-help></div>
         </div>
-        <button class="w-a11y-result__selector"
-                data-a11y-result-selector
-                aria-label="{% trans 'Show issue' %}"
-                type="button">{% icon name="crosshairs" classname="w-a11y-result__icon" %}</button>
+        <button
+            class="w-a11y-result__selector"
+            data-a11y-result-selector
+            aria-label="{% trans 'Show issue' %}"
+            type="button"
+        >
+            <span data-a11y-result-selector-text></span>
+            {% icon name="link-external" classname="w-a11y-result__icon" %}
+        </button>
     </div>
 </template>
 <div class="w-divide-y w-divide-border-furniture w-py-6 w-pl-2 lg:w-pl-8">