From dc9069d1bfc02d195b43c19f0d2b40ce15b567f9 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Wed, 12 Jun 2024 21:32:43 -0400
Subject: [PATCH] Improves accessibility for QA features (#1863)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switches from spans with classes to `ins` and `del` tags for text
comparison
- Adds `aria-label` attributes for screen readers. Text comparison is
accessible now! 🎉
- I kept the strikethrough text on the `del` tag but can remove? Only
visible on hover.
- Removes autofocus on the delete analysis run cancel button
- Adds `aria-label` attribute for the heuristic nav bar to describe the
context of the content users will be seeing on each page.
---
 .../pages/org/archived-item-detail/ui/qa.ts   |  1 -
 .../org/archived-item-qa/archived-item-qa.ts  |  1 +
 .../src/pages/org/archived-item-qa/ui/text.ts | 52 ++++++++++++-------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
index af0559db..24e5f38d 100644
--- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts
+++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
@@ -425,7 +425,6 @@ export class ArchivedItemDetailQA extends TailwindElement {
           <div slot="footer" class="flex justify-between">
             <sl-button
               size="small"
-              .autofocus=${true}
               @click=${() => void this.deleteQADialog?.hide()}
             >
               ${msg("Cancel")}
diff --git a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
index a5ea3936..1eb2f19e 100644
--- a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
+++ b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
@@ -508,6 +508,7 @@ export class ArchivedItemQA extends TailwindElement {
 
         <div class="grid--tabGroup flex min-w-0 flex-col">
           <nav
+            aria-label="${msg("Page heuristics")}"
             class="-mx-3 my-0 flex gap-2 overflow-x-auto px-3 py-2 lg:mx-0 lg:px-0"
           >
             <btrix-navigation-button
diff --git a/frontend/src/pages/org/archived-item-qa/ui/text.ts b/frontend/src/pages/org/archived-item-qa/ui/text.ts
index fa5d5dc0..73ef0f47 100644
--- a/frontend/src/pages/org/archived-item-qa/ui/text.ts
+++ b/frontend/src/pages/org/archived-item-qa/ui/text.ts
@@ -20,7 +20,7 @@ function renderDiff(
     diffImport.then(({ diffWords }) => {
       const diff = diffWords(crawlText, qaText);
 
-      const addedText = tw`bg-red-100 text-red-700`;
+      const addedText = tw`bg-red-100 text-red-700 no-underline`;
       const removedText = tw`bg-red-100 text-red-100`;
 
       return html`
@@ -29,16 +29,23 @@ function renderDiff(
           aria-labelledby="crawlTextHeading"
         >
           ${diff.map((part) => {
-            return html`
-              <span
-                class=${part.added
-                  ? removedText
-                  : part.removed
-                    ? addedText
-                    : ""}
+            if (part.added) {
+              return html`<del
+                aria-label="${msg("Missing text: Crawl")}"
+                class="${removedText}"
+                >${part.value}</del
+              >`;
+            } else if (part.removed) {
+              return html`<ins
+                aria-label="${msg("Added text: Crawl")}"
+                class="${addedText}"
+                >${part.value}</ins
+              >`;
+            } else {
+              return html`<span aria-label="${msg("Identical text")}"
                 >${part.value}</span
-              >
-            `;
+              >`;
+            }
           })}
         </div>
         <div
@@ -46,16 +53,23 @@ function renderDiff(
           aria-labelledby="qaTextHeading"
         >
           ${diff.map((part) => {
-            return html`
-              <span
-                class=${part.added
-                  ? addedText
-                  : part.removed
-                    ? removedText
-                    : ""}
+            if (part.added) {
+              return html`<ins
+                aria-label="${msg("Added text: Analysis")}"
+                class="${addedText}"
+                >${part.value}</ins
+              >`;
+            } else if (part.removed) {
+              return html`<del
+                aria-label="${msg("Missing text: Analysis")}"
+                class="${removedText}"
+                >${part.value}</del
+              >`;
+            } else {
+              return html`<span aria-label="${msg("Identical text")}"
                 >${part.value}</span
-              >
-            `;
+              >`;
+            }
           })}
         </div>
       `;