Improves accessibility for QA features (#1863)

- 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.

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")}

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

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>
       `;