Refactor accessibility checker userbar item

- Move dialog template code from the userbar base template to the
  accessibility item template
- Use fragment for the total results count in the header
- Wrap dialog header in a div to allow styling it separately from the
  rest of the dialog content
- Get selector from the first element of axe violation's node.target

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
 * Maintenance: Update djhtml (html formatting) library to v 1.5.2 (Loveth Omokaro)
 * Maintenance: Re-enable `strictPropertyInitialization` in tsconfig (Thibaud Colas)
+* Maintenance: Refactor accessibility checker userbar item (Albina Starykova)
 
 
 4.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/components/_userbar.scss

@@ -234,6 +234,10 @@ $positions: (
       margin-inline-end: 0.5em;
       fill: currentColor;
     }
+
+    .w-a11y-result__count {
+      margin-inline-end: theme('spacing.2');
+    }
   }
 
   .w-icon {
@@ -286,17 +290,25 @@ $positions: (
     max-height: 60vh;
   }
 
+  .w-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .w-dialog__title {
     @apply w-h3;
     padding: theme('spacing.4') theme('spacing.5');
+    margin-bottom: 0;
   }
 
   .w-dialog__subtitle {
     @apply w-body-text;
-    padding-inline-start: theme('spacing.5');
+    padding-inline-end: theme('spacing.5');
     display: flex;
     align-items: center;
     gap: theme('spacing.2');
+    margin-bottom: 0;
   }
 
   .w-a11y-result__row {
@@ -363,8 +375,8 @@ $positions: (
 }
 
 .w-a11y-result__count {
-  margin-inline-end: theme('spacing.2');
   display: flex;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   background-color: theme('colors.positive.100');

client/src/entrypoints/admin/userbar.js

@@ -322,8 +322,10 @@ class Userbar extends HTMLElement {
       this.trigger.appendChild(a11yErrorBadge);
     }
 
-    const dialogtemplates = document.querySelectorAll('[data-wagtail-dialog]');
-    const dialogs = dialog(dialogtemplates, this.shadowRoot);
+    const dialogTemplates = this.shadowRoot.querySelectorAll(
+      '[data-wagtail-dialog]',
+    );
+    const dialogs = dialog(dialogTemplates, this.shadowRoot);
 
     if (!dialogs.length) {
       return;
@@ -340,13 +342,6 @@ class Userbar extends HTMLElement {
       '#w-a11y-result-selector-template',
     );
 
-    const modalErrorBadge = document.createElement('span');
-    modalErrorBadge.setAttribute('data-a11y-result-count', '');
-    modalErrorBadge.classList.add('w-a11y-result__count');
-    const headerElement = modal.$el.querySelector('.w-dialog__subtitle');
-    headerElement.appendChild(modalErrorBadge);
-
-    // Solution for future refactoring to move badges to Django template
     const innerErrorBadges = this.shadowRoot.querySelectorAll(
       '[data-a11y-result-count]',
     );
@@ -403,13 +398,14 @@ class Userbar extends HTMLElement {
             const currentA11ySelectorText = currentA11ySelector.querySelector(
               '[data-a11y-result-selector-text]',
             );
+            const selectorName = node.target[0];
             // Remove unnecessary details before displaying selectors to the user
-            currentA11ySelectorText.textContent = `${node.target}`.replace(
+            currentA11ySelectorText.textContent = selectorName.replace(
               /\[data-block-key="\w{5}"\]/,
               '',
             );
             currentA11ySelector.addEventListener('click', () => {
-              const inaccessibleElement = document.querySelector(node.target);
+              const inaccessibleElement = document.querySelector(selectorName);
               inaccessibleElement.style.scrollMargin = '6.25rem';
               inaccessibleElement.scrollIntoView({
                 behavior: 'smooth',

docs/releases/4.2.md

@@ -199,6 +199,7 @@ This feature was developed by Matt Westcott, and sponsored by [YouGov](https://y
  * Add deprecation warnings for `wagtail.core` and other imports deprecated in Wagtail 3.0 (Matt Westcott)
  * Upgraded Transifex configuration to v3 (Loic Teixeira)
  * Replace repeated HTML `avatar` component with a template tag include `{% avatar ... %}` throughout the admin interface (Aman Pandey)
+ * Refactor accessibility checker userbar item (Albina Starykova)
 
 ## Upgrade considerations
 

wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html

@@ -29,14 +29,16 @@
             {% endif %}
 
             <div class="w-dialog__content">
-                <h2 class="w-dialog__title w-h1" id="title-{{ id }}">
-                    {% if icon_name %}{% icon name=icon_name classname="w-dialog__icon" %}{% endif %}
-                    {{ title }}
-                </h2>
+                <div class="w-dialog__header">
+                    <h2 class="w-dialog__title w-h1" id="title-{{ id }}">
+                        {% if icon_name %}{% icon name=icon_name classname="w-dialog__icon" %}{% endif %}
+                        {{ title }}
+                    </h2>
 
-                {% if subtitle %}
-                    <p class="w-dialog__subtitle w-help-text">{{ subtitle }}</p>
-                {% endif %}
+                    {% if subtitle %}
+                        <p class="w-dialog__subtitle w-help-text">{{ subtitle }}</p>
+                    {% endif %}
+                </div>
 
                 <div data-dialog-body>
                     {{ children }}

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

@@ -36,26 +36,6 @@
         </div>
     </div>
 </template>
-{% trans 'Warnings' as dialog_title %}
-{% trans 'Issues found' as issues_found %}
-{% dialog id="accessibility-results" theme="floating" classname="w-dialog--userbar" title=dialog_title subtitle=issues_found %}
-    {# Contents of the dialog created in JS based on these templates. #}
-    <template id="w-a11y-result-row-template">
-        <div class="w-a11y-result__row" data-a11y-result-row>
-            <h3 class="w-a11y-result__header">
-                <span class="w-a11y-result__name" data-a11y-result-name></span>
-                <span class="w-sr-only">{% trans 'Issues found' %}</span><span class="w-a11y-result__subtotal_count" data-a11y-result-count></span>
-            </h3>
-            <div class="w-a11y-result__container" data-a11y-result-container></div>
-        </div>
-    </template>
-    <template id="w-a11y-result-selector-template">
-        <button class="w-a11y-result__selector" data-a11y-result-selector type="button">
-            {% icon name="crosshairs" classname="w-a11y-result__icon" %}
-            <span data-a11y-result-selector-text></span>
-        </button>
-    </template>
-{% enddialog %}
 <wagtail-userbar></wagtail-userbar>
 <script src="{% versioned_static 'wagtailadmin/js/vendor.js' %}"></script>
 <script src="{% versioned_static 'wagtailadmin/js/userbar.js' %}"></script>

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

@@ -7,4 +7,27 @@
         {% trans 'Accessibility' %}
     </button>
     {{ axe_configuration|json_script:"accessibility-axe-configuration" }}
+    {% trans 'Warnings' as dialog_title %}
+    {% fragment as issues_found %}
+        {% trans 'Issues found' %}
+        <span class="w-a11y-result__count" data-a11y-result-count></span>
+    {% endfragment %}
+    {% dialog id="accessibility-results" theme="floating" classname="w-dialog--userbar" title=dialog_title subtitle=issues_found a11y_count="a11y_count" %}
+        {# Contents of the dialog created in JS based on these templates. #}
+        <template id="w-a11y-result-row-template">
+            <div class="w-a11y-result__row" data-a11y-result-row>
+                <h3 class="w-a11y-result__header">
+                    <span class="w-a11y-result__name" data-a11y-result-name></span>
+                    <span class="w-sr-only">{% trans 'Issues found' %}</span><span class="w-a11y-result__subtotal_count" data-a11y-result-count></span>
+                </h3>
+                <div class="w-a11y-result__container" data-a11y-result-container></div>
+            </div>
+        </template>
+        <template id="w-a11y-result-selector-template">
+            <button class="w-a11y-result__selector" data-a11y-result-selector type="button">
+                {% icon name="crosshairs" classname="w-a11y-result__icon" %}
+                <span data-a11y-result-selector-text></span>
+            </button>
+        </template>
+    {% enddialog %}
 {% endblock %}