Merge pull request #1325 from i-dot-ai/feature/accessibility

Feature/accessibility

django_app/frontend/src/css/chats/canned-prompts.scss

@@ -59,6 +59,14 @@ main:has(.iai-chat-bubble) .chat-options {
     gap: 1.5rem;
   }
   .chat-options__option {
+    gap: 0.5rem;
+    padding: 0.875rem 0.5rem;
     width: 33%;
   }
 }
+@media (min-width: 1280px) {
+  .chat-options__option {
+    gap: 1rem;
+    padding: 0.875rem 1rem;
+  }
+}

django_app/frontend/src/css/chats/documents.scss

@@ -3,6 +3,9 @@
   border: 1px solid black;
   padding: 1rem;
 }
+.rb-document-upload--js-active {
+  display: none;
+}
 
 .rb-uploaded-docs {
   display: none;

django_app/frontend/src/css/print.scss

@@ -18,4 +18,4 @@
     display: none !important;
   }
 
-}
+}

django_app/frontend/src/js/web-components/chats/chat-controller.js

@@ -91,8 +91,8 @@ class ChatController extends HTMLElement {
       document.createElement("chat-message")
     );
     errorMessage.dataset.role = "ai";
-    errorMessage.dataset.text = `<p><strong>${fileName}</strong> can't be uploaded</p><p>You can:</p><ul><li>try uploading again</li><li>check the document opens outside Redbox on your computer</li><li>report to <a href="mailto:[email protected]">Redbox support</a></li></ul>`;
     this.messageContainer?.append(errorMessage);
+    errorMessage.showError(`<p><strong>${fileName}</strong> can't be uploaded</p><p>You can:</p><ul><li>try uploading again</li><li>check the document opens outside Redbox on your computer</li><li>report to <a href="mailto:[email protected]">Redbox support</a></li></ul>`);
   };
 
 }

django_app/frontend/src/js/web-components/chats/chat-message.js

@@ -47,6 +47,15 @@ export class ChatMessage extends HTMLElement {
     this.programmaticScroll = true;
     this.scrollIntoView({ block: "end" });
 
+    this.responseContainer =
+      /** @type {import("./markdown-converter").MarkdownConverter} */ (
+        this.querySelector("markdown-converter")
+      );
+
+    this.loadingMessage = /** @type HTMLElement */ (
+      this.querySelector("loading-message")
+    );
+
   }
 
   /**
@@ -74,13 +83,6 @@ export class ChatMessage extends HTMLElement {
       scrollOverride = true;
     });
 
-    this.responseContainer =
-      /** @type {import("./markdown-converter").MarkdownConverter} */ (
-        this.querySelector("markdown-converter")
-      );
-    let responseLoading = /** @type HTMLElement */ (
-      this.querySelector(".rb-loading-ellipsis")
-    );
     let responseComplete = this.querySelector(".rb-loading-complete");
     let webSocket = new WebSocket(endPoint);
     let streamedContent = "";
@@ -120,7 +122,7 @@ export class ChatMessage extends HTMLElement {
     };
 
     webSocket.onclose = (event) => {
-      responseLoading.style.display = "none";
+      this.loadingMessage?.remove();
       if (responseComplete) {
         responseComplete.textContent = "Response complete";
       }
@@ -188,5 +190,18 @@ export class ChatMessage extends HTMLElement {
       }
     };
   };
+
+  /** This is the same as adding content to the data-text attribute, except that this also reads the content out to screen-reader users */
+  showError(message) {
+    this.dataset.status = "stopped";
+    this.loadingMessage?.remove();
+    this.setAttribute("aria-live", "assertive");
+    window.setTimeout(() => {
+      if (this.responseContainer) {
+        this.responseContainer.innerHTML = message;
+      }
+    }, 100);
+  };
+
 }
 customElements.define("chat-message", ChatMessage);

django_app/frontend/src/js/web-components/documents/document-upload.mjs

@@ -74,7 +74,7 @@ export class DocumentUpload extends RedboxElement {
 
   render() {
     return html`
-      <form class="rb-document-upload ${this.jsInitialised ? `govuk-visually-hidden` : ''}" action="/upload/" method="post" enctype="multipart/form-data">
+      <form class="rb-document-upload ${this.jsInitialised ? `rb-document-upload--js-active` : ''}" action="/upload/" method="post" enctype="multipart/form-data">
         <input type="hidden" name="csrfmiddlewaretoken" value=${this["csrfToken"]} />
         <input type="hidden" name="chat_id" value=${this["chatId"]} />
         <label class="govuk-label" for="upload-docs">

django_app/frontend/src/js/web-components/documents/file-status.mjs

@@ -2,12 +2,19 @@
 import { html } from "lit";
 import { RedboxElement } from "../redbox-element.mjs";
 
+
 class FileStatus extends RedboxElement {
 
+  constructor() {
+    super();
+    this.name = "";
+  }
+
   static properties = {
     id: { type: String, attribute: "data-id" },
     status: { type: String, state: true },
-    positionInQueue: { type: Number, state: true }
+    positionInQueue: { type: Number, state: true },
+    name: { type: String, attribute: "data-name" }
   };
 
   connectedCallback() {
@@ -37,12 +44,17 @@ class FileStatus extends RedboxElement {
     } else if (statusAttr === "processing") {
         icon = html`<img src="/static/icons/file-status/processing.svg" alt="" width="22" height="20"/>`;
     } else if (statusAttr === "error") {
-      icon = html`<img src="/static/icons/file-status/exclamation.svg" alt="" height="20"/>`;
+      icon = html`<img src="/static/icons/file-status/exclamation.svg" alt="" width="23" height="20"/>`;
+    } else if (statusAttr === "uploading") {
+      icon = html`<img src="/static/icons/file-status/uploading.svg" alt="" width="23" height="20"/>`;
     }
 
     return html`
       ${icon}
-      <span data-status=${statusAttr}>${statusText}</span>
+      <span data-status=${statusAttr} aria-live="assertive" aria-atomic="true">
+        ${statusText}
+        <span class="govuk-visually-hidden">${this.name}</span>
+      </span>
     `;
   }
 
@@ -73,7 +85,7 @@ class FileStatus extends RedboxElement {
     if (responseObj.status.toLowerCase() === "error") {
       const fileErrorEvent = new CustomEvent("file-error", {
         detail: {
-          name: this.dataset.name
+          name: this.name
         },
       });
       document.dispatchEvent(fileErrorEvent);

django_app/frontend/src/js/web-components/documents/upload-container.mjs

@@ -11,6 +11,7 @@ export class UploadContainer extends RedboxElement {
     super.connectedCallback();
     // on message-send move the uploaded docs to the correct container
     document.addEventListener("chat-response-start", () => {
+      /** @type {NodeListOf<import("./document-container.mjs").DocumentContainer>} */
       const documentContainers = document.querySelectorAll("document-container");
       const lastDocumentContainer = documentContainers[documentContainers.length - 1];
       lastDocumentContainer.addDocuments(this.docs);
@@ -23,13 +24,13 @@ export class UploadContainer extends RedboxElement {
       <div class="rb-upload-container">
         <h3 class="govuk-visually-hidden">Uploading documents</h3>
         <ul>
-          ${this.docs.map(
+          ${this.docs?.map(
             (doc) => html`
               <li class="rb-upload-container__doc">
                 <file-status data-id=${doc.id} data-name=${doc.file_name}>${doc.file_status}</file-status>
                 <span class="rb-upload-container__filename-container">
-                  <span class="rb-upload-container__filename">${doc.file_name}</span>
-                  <button class="rb-upload-container__remove-button" @click=${this.#remove} aria-label="Remove" type="button">&times;</button>
+                  <span class="rb-upload-container__filename" aria-hidden="true">${doc.file_name}</span>
+                  <button class="rb-upload-container__remove-button" @click=${this.#remove} aria-label="Remove ${doc.file_name}" type="button">&times;</button>
                 </span>
               </li>
             `
@@ -43,7 +44,7 @@ export class UploadContainer extends RedboxElement {
 
     const tempId = crypto.randomUUID();
 
-    this.docs.push({
+    this.docs?.push({
       temp_id: tempId,
       file_name: doc.name,
       status: "Uploading"
@@ -52,12 +53,12 @@ export class UploadContainer extends RedboxElement {
 
     const formData = new FormData();
     formData.append('file', doc);
-    formData.append('chat_id', this.dataset.chatid);
+    formData.append('chat_id', this.dataset.chatid || "");
 
     const response = await fetch("/api/v0/file/", {
       method: "POST",
       headers: {
-        "X-CSRFToken": this.dataset.csrftoken,
+        "X-CSRFToken": this.dataset.csrftoken || "",
       },
       body: formData,
     });
@@ -66,7 +67,9 @@ export class UploadContainer extends RedboxElement {
     }
 
     const data = await response.json();
-    this.docs.find(doc => doc.temp_id === tempId).id = data.file_id;
+    if (this.docs) {
+      this.docs.find(doc => doc.temp_id === tempId).id = data.file_id;
+    }
     this.requestUpdate();
 
   }
@@ -84,10 +87,14 @@ export class UploadContainer extends RedboxElement {
     fetch(`/remove-doc/${id}`, {
       method: "POST",
       headers: {
-        "X-CSRFToken": this.dataset.csrftoken,
+        "X-CSRFToken": this.dataset.csrftoken || "",
       },
       body: formData,
     });
+
+    window.setTimeout(() => {
+      /** @type {HTMLInputElement | null} */(document.querySelector("message-input textarea"))?.focus();
+    }, 100);
   }
 
 }