From 9b8840ab5f712a6634b77df014083071fa253ba0 Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Fri, 28 Jun 2024 17:03:44 +0100
Subject: [PATCH] Ensure chatbot messages are visible to screenreaders (#8631)

* fix aria label for message.type

* add changeset

* tweak

* improve aria-label for files

* copy tweak

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/great-insects-see.md  |  6 ++++++
 js/chatbot/shared/ChatBot.svelte | 29 ++++++++++++++++++-----------
 2 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/great-insects-see.md

diff --git a/.changeset/great-insects-see.md b/.changeset/great-insects-see.md
new file mode 100644
index 0000000000..78f48ad314
--- /dev/null
+++ b/.changeset/great-insects-see.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure chatbot messages are visible to screenreaders
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
index 9141206730..9c89ecffd8 100644
--- a/js/chatbot/shared/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -196,6 +196,23 @@
 			liked: selected === "like"
 		});
 	}
+
+	function get_message_label_data(message: NormalisedMessage): string {
+		if (message.type === "text") {
+			return message.value;
+		} else if (message.type === "component") {
+			return `a component of type ${message.component}`;
+		} else if (message.type === "file") {
+			if (Array.isArray(message.file)) {
+				return `file of extension type: ${message.file[0].orig_name?.split(".").pop()}`;
+			}
+			return (
+				`file of extension type: ${message.file?.orig_name?.split(".").pop()}` +
+				(message.file?.orig_name ?? "")
+			);
+		}
+		return `a message of type ` + message.type ?? "unknown";
+	}
 </script>
 
 {#if show_share_button && value !== null && value.length > 0}
@@ -288,17 +305,7 @@
 										dir={rtl ? "rtl" : "ltr"}
 										aria-label={(j == 0 ? "user" : "bot") +
 											"'s message: " +
-											(typeof message === "string"
-												? message
-												: "file" in message &&
-													  message.file !== undefined &&
-													  !Array.isArray(message.file)
-													? `a file of type ${message.file?.mime_type}, ${
-															message.file?.alt_text ??
-															message.file?.orig_name ??
-															""
-														}`
-													: "")}
+											get_message_label_data(message)}
 									>
 										{#if message.type === "text"}
 											<Markdown