fix(a11y): add aria-labels and structural elements to workspace components (#21719)

2026-02-22 15:24:33 -06:00
parent e0087acfb4
commit 5b9efeef4d
13 changed files with 46 additions and 1 deletions
@@ -302,6 +302,7 @@
 			<div class="text-lg font-medium">{$i18n.t('Edit Prompt')}</div>
 			<button
 				class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
+				aria-label={$i18n.t('Close')}
 				on:click={() => (showEditModal = false)}
 			>
 				<XMark className="size-5" />
@@ -319,6 +320,7 @@
 						className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
 						placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
 						bind:value={content}
+						aria-label={$i18n.t('Prompt Content')}
 						rows={6}
 						required
 					/>
@@ -331,6 +333,7 @@
 					<input
 						class="text-sm w-full bg-transparent outline-hidden"
 						placeholder={$i18n.t('Describe what changed...')}
+						aria-label={$i18n.t('Commit Message')}
 						bind:value={commitMessage}
 					/>
 				</div>
@@ -502,6 +505,7 @@
 					<div class="absolute top-2 right-2 z-10">
 						<button
 							class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+							aria-label={$i18n.t('Copy content')}
 							on:click={copyContent}
 						>
 							{#if contentCopied}
@@ -43,6 +43,7 @@
 		<slot>
 			<button
 				class="p-1 rounded-lg text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+				aria-label={$i18n.t('More Options')}
 			>
 				<EllipsisHorizontal className="size-5" />
 			</button>