Render a11y issues in separate upgraded cards

albinazs · Jun 27, 2024 · 53f43bb · 53f43bb
1 parent ecefcb6
commit 53f43bb
Show file tree

Hide file tree

Showing 15 changed files with 182 additions and 144 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -14,6 +14,7 @@ Changelog
  * Add `copy_for_translation_done` signal when a page is copied for translation (Arnar Tumi Þorsteinsson)
  * Remove reduced opacity for draft page title in listings (Inju Michorius)
  * Adopt more compact representation for StreamField definitions in migrations (Matt Westcott)
+ * Implement a new design for locale labels in listings (Albina Starykova)
  * Fix: Make `WAGTAILIMAGES_CHOOSER_PAGE_SIZE` setting functional again (Rohit Sharma)
  * Fix: Enable `richtext` template tag to convert lazy translation values (Benjamin Bach)
  * Fix: Ensure permission labels on group permissions page are translated where available (Matt Westcott)

diff --git a/client/scss/components/_a11y-result.scss b/client/scss/components/_a11y-result.scss
@@ -1,10 +1,12 @@
 .w-a11y-result__row {
   @include box;
   padding: theme('spacing.4');
+  display: flex;
+  justify-content: space-between;
 }
 
 .w-a11y-result__header {
-  margin: 0;
+  margin: 0 0 theme('spacing.[0.5]');
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -21,40 +23,34 @@
   font-weight: theme('fontWeight.semibold');
 }
 
-.w-a11y-result__container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: theme('spacing.[2.5]');
-  padding-top: theme('spacing.3');
-}
-
-.w-a11y-result__subtotal_count {
-  color: theme('colors.icon-primary');
-  width: theme('spacing.5');
-  text-align: center;
-  font-size: theme('fontSize.11');
-  font-weight: theme('fontWeight.normal');
+.w-a11y-result__help {
+  color: theme('colors.text-placeholder');
+  font-size: theme('fontSize.14');
 
   .w-dialog--userbar & {
-    font-size: theme('fontSize.14');
+    font-size: theme('fontSize.16');
   }
 }
 
 .w-a11y-result__selector {
   display: flex;
   align-items: center;
-  background: theme('colors.surface-field-inactive');
-  color: theme('colors.text-context');
+  justify-content: center;
+  background: theme('colors.surface-page');
   border-radius: theme('borderRadius.DEFAULT');
-  padding: theme('spacing.[1.5]');
+  margin-top: calc(theme('spacing.[2.5]') * -1);
+  margin-inline-end: calc(theme('spacing.[2.5]') * -1);
+  height: theme('spacing.[7.5]');
+  width: theme('spacing.[7.5]');
 
   &:hover,
   &:focus {
-    background: theme('colors.surface-button-default');
-    color: theme('colors.text-button');
+    background: theme('colors.surface-header');
 
     .w-a11y-result__icon {
-      fill: theme('colors.text-button');
+      @apply w-scale-110;
+
+      fill: theme('colors.text-context');
     }
   }
 
@@ -64,11 +60,12 @@
 }
 
 .w-a11y-result__icon {
+  @apply w-transition hover:w-transform;
+
   flex-shrink: 0;
   fill: theme('colors.surface-button-default');
   height: theme('spacing.[3.5]');
   width: theme('spacing.[3.5]');
-  margin-inline-end: theme('spacing.[1.5]');
 }
 
 .w-a11y-result__count {

diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss
@@ -29,10 +29,12 @@
   }
 
   &--label {
-    color: theme('colors.text-context');
-    background: theme('colors.border-button-small-outline-default');
-    border: theme('colors.border-button-small-outline-default');
-    font-weight: 500;
+    padding: theme('spacing.[0.5]') theme('spacing.2');
+    color: theme('colors.text-status-label');
+    font-weight: theme('fontWeight.medium');
+    background: theme('colors.surface-status-label');
+    border: 1px solid theme('colors.text-status-label');
+    border-radius: theme('borderRadius.xl');
   }
 }
 

diff --git a/client/src/entrypoints/admin/preview-panel.js b/client/src/entrypoints/admin/preview-panel.js
@@ -9,9 +9,6 @@ import { gettext } from '../../utils/gettext';
 
 const runAccessibilityChecks = async (onClickSelector) => {
   const a11yRowTemplate = document.querySelector('#w-a11y-result-row-template');
-  const a11ySelectorTemplate = document.querySelector(
-    '#w-a11y-result-selector-template',
-  );
   const checksPanel = document.querySelector('[data-checks-panel]');
   const config = getAxeConfiguration(document.body);
   const toggleCounter = document.querySelector(
@@ -21,13 +18,7 @@ const runAccessibilityChecks = async (onClickSelector) => {
     '[data-side-panel="checks"] [data-a11y-result-count]',
   );
 
-  if (
-    !a11yRowTemplate ||
-    !a11ySelectorTemplate ||
-    !config ||
-    !toggleCounter ||
-    !panelCounter
-  ) {
+  if (!a11yRowTemplate || !config || !toggleCounter || !panelCounter) {
     return;
   }
 
@@ -60,7 +51,6 @@ const runAccessibilityChecks = async (onClickSelector) => {
     results,
     config,
     a11yRowTemplate,
-    a11ySelectorTemplate,
     onClickSelector,
   );
 };

diff --git a/client/src/includes/a11y-result.ts b/client/src/includes/a11y-result.ts
@@ -39,10 +39,14 @@ export const sortAxeViolations = (violations: Result[]) =>
  * Wagtail's Axe configuration object. This should reflect what's returned by
  * `wagtail.admin.userbar.AccessibilityItem.get_axe_configuration()`.
  */
+interface ErrorMessage {
+  error_name: string;
+  help_text: string;
+}
 interface WagtailAxeConfiguration {
   context: ElementContext;
   options: RunOptions;
-  messages: Record<string, string>;
+  messages: Record<string, ErrorMessage>;
 }
 
 /**
@@ -78,7 +82,6 @@ export const renderA11yResults = (
   results: AxeResults,
   config: WagtailAxeConfiguration,
   a11yRowTemplate: HTMLTemplateElement,
-  a11ySelectorTemplate: HTMLTemplateElement,
   onClickSelector: (selectorName: string, event: MouseEvent) => void,
 ) => {
   // Reset contents ahead of rendering new results.
@@ -87,54 +90,42 @@ export const renderA11yResults = (
 
   if (results.violations.length) {
     const sortedViolations = sortAxeViolations(results.violations);
-    sortedViolations.forEach((violation, violationIndex) => {
-      container.appendChild(a11yRowTemplate.content.cloneNode(true));
-      const currentA11yRow = container.querySelectorAll<HTMLDivElement>(
-        '[data-a11y-result-row]',
-      )[violationIndex];
-
-      const a11yErrorName = currentA11yRow.querySelector(
-        '[data-a11y-result-name]',
-      ) as HTMLSpanElement;
-      a11yErrorName.id = `w-a11y-result__name-${violationIndex}`;
-      // Display custom error messages supplied by Wagtail if available,
-      // fallback to default error message from Axe
-      a11yErrorName.textContent =
-        config.messages[violation.id] || violation.help;
-      const a11yErrorCount = currentA11yRow.querySelector(
-        '[data-a11y-result-count]',
-      ) as HTMLSpanElement;
-      a11yErrorCount.textContent = `${violation.nodes.length}`;
+    let nodeCounter = 0;
+    sortedViolations.forEach((violation) => {
+      violation.nodes.forEach((node) => {
+        container.appendChild(a11yRowTemplate.content.cloneNode(true));
 
-      const a11yErrorContainer = currentA11yRow.querySelector(
-        '[data-a11y-result-container]',
-      ) as HTMLDivElement;
-
-      violation.nodes.forEach((node, nodeIndex) => {
-        a11yErrorContainer.appendChild(
-          a11ySelectorTemplate.content.cloneNode(true),
-        );
-        const currentA11ySelector =
-          a11yErrorContainer.querySelectorAll<HTMLButtonElement>(
-            '[data-a11y-result-selector]',
-          )[nodeIndex];
+        const currentA11yRow = container.querySelectorAll<HTMLDivElement>(
+          '[data-a11y-result-row]',
+        )[nodeCounter];
+        nodeCounter += 1;
 
-        currentA11ySelector.setAttribute('aria-describedby', a11yErrorName.id);
-        const currentA11ySelectorText = currentA11ySelector.querySelector(
-          '[data-a11y-result-selector-text]',
+        const a11yErrorName = currentA11yRow.querySelector(
+          '[data-a11y-result-name]',
         ) as HTMLSpanElement;
+        a11yErrorName.id = `w-a11y-result__name-${nodeCounter}`;
+        // Display custom error messages supplied by Wagtail if available,
+        // fallback to default error message from Axe
+        a11yErrorName.textContent =
+          config.messages[violation.id].error_name || violation.help;
+        const a11yErrorHelp = currentA11yRow.querySelector(
+          '[data-a11y-result-help]',
+        ) as HTMLDivElement;
+        a11yErrorHelp.textContent =
+          config.messages[violation.id].help_text || '';
+
         // Special-case when displaying accessibility results within the admin interface.
         const selectorName = toSelector(
           node.target[0] === '#preview-iframe'
             ? node.target[1]
             : node.target[0],
         );
-        // Remove unnecessary details before displaying selectors to the user
-        currentA11ySelectorText.textContent = selectorName.replace(
-          /\[data-block-key="\w{5}"\]/,
-          '',
-        );
-        currentA11ySelector.addEventListener(
+
+        const a11ySelector = currentA11yRow.querySelector(
+          '[data-a11y-result-selector]',
+        ) as HTMLButtonElement;
+        a11ySelector.setAttribute('aria-describedby', a11yErrorName.id);
+        a11ySelector?.addEventListener(
           'click',
           onClickSelector.bind(null, selectorName),
         );

diff --git a/client/src/includes/userbar.ts b/client/src/includes/userbar.ts
@@ -360,21 +360,12 @@ export class Userbar extends HTMLElement {
     const a11yRowTemplate = this.shadowRoot.querySelector<HTMLTemplateElement>(
       '#w-a11y-result-row-template',
     );
-    const a11ySelectorTemplate =
-      this.shadowRoot.querySelector<HTMLTemplateElement>(
-        '#w-a11y-result-selector-template',
-      );
     const a11yOutlineTemplate =
       this.shadowRoot.querySelector<HTMLTemplateElement>(
         '#w-a11y-result-outline-template',
       );
 
-    if (
-      !accessibilityResultsBox ||
-      !a11yRowTemplate ||
-      !a11ySelectorTemplate ||
-      !a11yOutlineTemplate
-    ) {
+    if (!accessibilityResultsBox || !a11yRowTemplate || !a11yOutlineTemplate) {
       return;
     }
 
@@ -458,7 +449,6 @@ export class Userbar extends HTMLElement {
           results,
           config,
           a11yRowTemplate,
-          a11ySelectorTemplate,
           onClickSelector,
         );
       } else {

diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
@@ -100,6 +100,12 @@ const light = [
         textUtility: 'w-text-surface-button-critical-hover',
         cssVariable: '--w-color-surface-button-critical-hover',
       },
+      'surface-status-label': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-status-label',
+        textUtility: 'w-text-surface-status-label',
+        cssVariable: '--w-color-surface-status-label',
+      },
     },
   },
   {
@@ -189,6 +195,12 @@ const light = [
         textUtility: 'w-text-text-button-critical-outline-hover',
         cssVariable: '--w-color-text-button-critical-outline-hover',
       },
+      'text-status-label': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-text-status-label',
+        textUtility: 'w-text-text-status-label',
+        cssVariable: '--w-color-text-status-label',
+      },
     },
   },
   {
@@ -358,6 +370,12 @@ const dark = [
         textUtility: 'w-text-surface-button-critical-hover',
         cssVariable: '--w-color-surface-button-critical-hover',
       },
+      'surface-status-label': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-status-label',
+        textUtility: 'w-text-surface-status-label',
+        cssVariable: '--w-color-surface-status-label',
+      },
     },
   },
   {
@@ -447,6 +465,12 @@ const dark = [
         textUtility: 'w-text-text-button-critical-outline-hover',
         cssVariable: '--w-color-text-button-critical-outline-hover',
       },
+      'text-status-label': {
+        value: 'var(--w-color-info-75)',
+        bgUtility: 'w-bg-text-status-label',
+        textUtility: 'w-text-text-status-label',
+        cssVariable: '--w-color-text-status-label',
+      },
     },
   },
   {

diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
@@ -80,7 +80,7 @@ describe('generateColorVariables', () => {
         "--w-color-grey-800-lightness": "11.4%",
         "--w-color-grey-800-saturation": "0%",
         "--w-color-info-100": "hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness))",
-        "--w-color-info-100-hue": "calc(var(--w-color-info-125-hue) - 1)",
+        "--w-color-info-100-hue": "calc(var(--w-color-info-125-hue) - 0.1)",
         "--w-color-info-100-lightness": "calc(var(--w-color-info-125-lightness) + 6.5%)",
         "--w-color-info-100-saturation": "calc(var(--w-color-info-125-saturation) + 0.7%)",
         "--w-color-info-125": "hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness))",
@@ -91,6 +91,10 @@ describe('generateColorVariables', () => {
         "--w-color-info-50-hue": "calc(var(--w-color-info-125-hue) + 2.2)",
         "--w-color-info-50-lightness": "calc(var(--w-color-info-125-lightness) + 65.9%)",
         "--w-color-info-50-saturation": "calc(var(--w-color-info-125-saturation) + 15.1%)",
+        "--w-color-info-75": "hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness))",
+        "--w-color-info-75-hue": "calc(var(--w-color-info-125-hue) + 0.4)",
+        "--w-color-info-75-lightness": "calc(var(--w-color-info-125-lightness) + 36.3%)",
+        "--w-color-info-75-saturation": "calc(var(--w-color-info-125-saturation) - 27.4%)",
         "--w-color-positive-100": "hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness))",
         "--w-color-positive-100-hue": "162.1",
         "--w-color-positive-100-lightness": "31.6%",
@@ -213,6 +217,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-menu-item-active": "var(--w-color-primary-200)",
         "--w-color-surface-menus": "var(--w-color-primary)",
         "--w-color-surface-page": "var(--w-color-white)",
+        "--w-color-surface-status-label": "var(--w-color-info-50)",
         "--w-color-surface-tooltip": "var(--w-color-primary-200)",
         "--w-color-text-button": "var(--w-color-white)",
         "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-200)",
@@ -228,6 +233,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-text-link-hover": "var(--w-color-secondary-400)",
         "--w-color-text-meta": "var(--w-color-grey-400)",
         "--w-color-text-placeholder": "var(--w-color-grey-400)",
+        "--w-color-text-status-label": "var(--w-color-info-100)",
       }
     `);
   });
@@ -260,6 +266,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-menu-item-active": "var(--w-color-grey-700)",
         "--w-color-surface-menus": "var(--w-color-grey-800)",
         "--w-color-surface-page": "var(--w-color-grey-600)",
+        "--w-color-surface-status-label": "var(--w-color-grey-600)",
         "--w-color-surface-tooltip": "var(--w-color-grey-500)",
         "--w-color-text-button": "var(--w-color-white)",
         "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-50)",
@@ -275,6 +282,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-text-link-hover": "var(--w-color-secondary-75)",
         "--w-color-text-meta": "var(--w-color-grey-150)",
         "--w-color-text-placeholder": "var(--w-color-grey-200)",
+        "--w-color-text-status-label": "var(--w-color-info-75)",
       }
     `);
   });