add aria-label and aria-pressed to toggle button for accessibility

This commit is contained in:
Sine Jespersen 2025-07-31 13:14:53 +02:00
parent 0763d8e9b9
commit 343e41886f
1 changed files with 9 additions and 1 deletions

View File

@ -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';
}}