Accessibility checker outlines feature (#10176)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -14,6 +14,7 @@ Changelog
  * Implement new simplified userbar designs (Albina Starykova)
  * Add more Axe rules to the accessibility checker (Albina Starykova)
  * Sort accessibility checker results by position on the page (Albina Starykova)
+ * Highlight elements with errors in accessibility checker (Albina Starykova)
  * Add usage view for pages (Sage Abdullah)
  * Copy page form now updates the slug field dynamically with a slugified value on blur (Loveth Omokaro)
  * Ensure selected collection is kept when navigating from documents or images listings to add multiple views & upon upload (Aman Pandey, Bojan Mihelac)

client/src/includes/userbar.ts

@@ -384,8 +384,17 @@ export class Userbar extends HTMLElement {
       this.shadowRoot.querySelector<HTMLTemplateElement>(
         '#w-a11y-result-selector-template',
       );
+    const a11yOutlineTemplate =
+      this.shadowRoot.querySelector<HTMLTemplateElement>(
+        '#w-a11y-result-outline-template',
+      );
 
-    if (!accessibilityResultsBox || !a11yRowTemplate || !a11ySelectorTemplate) {
+    if (
+      !accessibilityResultsBox ||
+      !a11yRowTemplate ||
+      !a11ySelectorTemplate ||
+      !a11yOutlineTemplate
+    ) {
       return;
     }
 
@@ -455,10 +464,65 @@ export class Userbar extends HTMLElement {
             currentA11ySelector.addEventListener('click', () => {
               const inaccessibleElement =
                 document.querySelector<HTMLElement>(selectorName);
-              if (!inaccessibleElement) return;
+              const a11yOutlineContainer =
+                this.shadowRoot?.querySelector<HTMLElement>(
+                  '[data-a11y-result-outline-container]',
+                );
+              if (a11yOutlineContainer?.firstElementChild) {
+                a11yOutlineContainer.removeChild(
+                  a11yOutlineContainer.firstElementChild,
+                );
+              }
+              a11yOutlineContainer?.appendChild(
+                a11yOutlineTemplate.content.cloneNode(true),
+              );
+              const currentA11yOutline =
+                this.shadowRoot?.querySelector<HTMLElement>(
+                  '[data-a11y-result-outline]',
+                );
+              if (
+                !this.shadowRoot ||
+                !inaccessibleElement ||
+                !currentA11yOutline ||
+                !a11yOutlineContainer
+              )
+                return;
+
+              const styleA11yOutline = () => {
+                const rect = inaccessibleElement.getBoundingClientRect();
+                currentA11yOutline.style.cssText = `
+                top: ${
+                  rect.height < 5
+                    ? `${rect.top + window.scrollY - 2.5}px`
+                    : `${rect.top + window.scrollY}px`
+                };
+                left: ${
+                  rect.width < 5
+                    ? `${rect.left + window.scrollX - 2.5}px`
+                    : `${rect.left + window.scrollX}px`
+                };
+                width: ${Math.max(rect.width, 5)}px;
+                height: ${Math.max(rect.height, 5)}px;
+                position: absolute;
+                z-index: 129;
+                outline: 1px solid #CD4444;
+                box-shadow: 0px 0px 12px 1px #FF0000;
+                `;
+              };
+
+              styleA11yOutline();
+
+              window.addEventListener('resize', styleA11yOutline);
+
               inaccessibleElement.style.scrollMargin = '6.25rem';
               inaccessibleElement.scrollIntoView();
               inaccessibleElement.focus();
+
+              accessibilityResultsBox.addEventListener('hide', () => {
+                currentA11yOutline.style.cssText = '';
+
+                window.removeEventListener('resize', styleA11yOutline);
+              });
             });
           });
         });

docs/releases/5.0.md

@@ -41,14 +41,22 @@ For more details, see our new [icons documentation](icons).
 
 This has been made possible thanks to a multi-year refactoring effort to migrate all icons to SVG. Thank you to all contributors who participated in this effort: Coen van der Kamp, LB (Ben) Johnston, Dan Braghis, Daniel Kirkham, Sage Abdullah, Thibaud Colas, Scott Cranfill, Storm Heg, Steve Steinwand, Jérôme Lebleu, Abayomi Victory.
 
+### Accessibility checker improvements
+
+The accessibility checker has been updated with:
+
+ * 5 more Axe rules enabled by default
+ * Sorting of checker results according to their position on the page
+ * Highlight styles to more easily identify elements with errors
+
+Those improvements were implemented by Albina Starykova as part of an [Outreachy internship](https://wagtail.org/blog/introducing-wagtails-new-accessibility-checker/), with support from mentors Thibaud Colas, Sage Abdullah, and Joshua Munn.
+
 ### Other features
 
  * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R)
  * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari)
  * Migrate `.button-longrunning` behaviour to a Stimulus controller with support for custom label element & duration (Loveth Omokaro)
  * Implement new simplified userbar designs (Albina Starykova)
- * Add more Axe rules to the accessibility checker (Albina Starykova)
- * Sort accessibility checker results by position on the page (Albina Starykova)
  * Add usage view for pages (Sage Abdullah)
  * Copy page form now updates the slug field dynamically with a slugified value on blur (Loveth Omokaro)
  * Ensure selected collection is kept when navigating from documents or images listings to add multiple views & upon upload (Aman Pandey, Bojan Mihelac)

wagtail/admin/templates/wagtailadmin/userbar/base.html

@@ -36,6 +36,7 @@
             </ul>
         </div>
     </div>
+    <div data-a11y-result-outline-container></div>
 </template>
 <wagtail-userbar></wagtail-userbar>
 <script src="{% versioned_static 'wagtailadmin/js/vendor.js' %}"></script>

wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html

@@ -29,5 +29,8 @@
                 <span data-a11y-result-selector-text></span>
             </button>
         </template>
+        <template id="w-a11y-result-outline-template">
+            <div class="w-a11y-result__outline" data-a11y-result-outline></div>
+        </template>
     {% enddialog %}
 {% endblock %}