From 343e41886fa26f8955c15fa43e226ceeedb36e18 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Thu, 31 Jul 2025 13:14:53 +0200
Subject: [PATCH] add aria-label and aria-pressed to toggle button for
 accessibility

---
 src/lib/components/playground/Chat.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index deef61974a..b060220268 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -298,7 +298,15 @@
 					>
 						<div class="flex-1 shrink-0">
 							<button
-								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0"
+								type="button"
+								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0 {($settings?.highContrastMode ??
+								false)
+									? ''
+									: 'outline-hidden'}"
+								aria-pressed={role === 'assistant'}
+								aria-label={$i18n.t(
+									role === 'user' ? 'Switch to Assistant role' : 'Switch to User role'
+								)}
 								on:click={() => {
 									role = role === 'user' ? 'assistant' : 'user';
 								}}