feat: add aria-labels for accessibility improvements in various components

This commit is contained in:
delibae 2026-03-10 20:31:58 +09:00
parent bd18e75f3c
commit e0986f060e
6 changed files with 11 additions and 0 deletions

View file

@ -702,6 +702,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
className="block h-16 w-auto object-contain"
/>
<button
aria-label="Remove attachment"
onClick={() => setPinnedContexts((prev) => prev.filter((_, idx) => idx !== i))}
className="absolute top-0.5 right-0.5 rounded-full bg-background/80 p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
>
@ -715,6 +716,7 @@ export const ChatComposer: FC<{ isOpen?: boolean }> = ({ isOpen }) => {
>
{ctx.label}
<button
aria-label="Remove context"
onClick={() => setPinnedContexts((prev) => prev.filter((_, idx) => idx !== i))}
className="ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20"
>

View file

@ -144,6 +144,7 @@ function TabButton({
<span
role="button"
tabIndex={-1}
aria-label="Close tab"
onClick={onClose}
className="ml-auto shrink-0 rounded-sm p-0.5 opacity-0 transition-opacity hover:bg-muted-foreground/20 group-hover:opacity-100"
>

View file

@ -573,6 +573,7 @@ export const SlashCommandPicker: FC<SlashCommandPickerProps> = ({
</span>
</div>
<button
aria-label="Close command picker"
onMouseDown={(e) => {
e.preventDefault();
onClose();
@ -632,6 +633,7 @@ export const SlashCommandPicker: FC<SlashCommandPickerProps> = ({
{/* Preview header */}
<div className="flex items-center gap-2 border-b border-border px-3 py-2 shrink-0">
<button
aria-label="Close preview"
onMouseDown={(e) => {
e.preventDefault();
setShowPreview(false);

View file

@ -816,6 +816,7 @@ export function LatexEditor() {
onClick={() => goToChunk(mergeChunkInfo.current <= 1 ? mergeChunkInfo.total - 1 : mergeChunkInfo.current - 2)}
className="rounded p-0.5 text-muted-foreground hover:bg-white/10 hover:text-foreground transition-colors"
title="Previous change"
aria-label="Previous change"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
</button>
@ -823,6 +824,7 @@ export function LatexEditor() {
onClick={() => goToChunk(mergeChunkInfo.current >= mergeChunkInfo.total ? 0 : mergeChunkInfo.current)}
className="rounded p-0.5 text-muted-foreground hover:bg-white/10 hover:text-foreground transition-colors"
title="Next change"
aria-label="Next change"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
</button>
@ -831,6 +833,7 @@ export function LatexEditor() {
onClick={acceptCurrentChunk}
className="rounded p-0.5 text-green-400 hover:bg-green-600/20 transition-colors"
title="Accept this change"
aria-label="Accept this change"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</button>
@ -838,6 +841,7 @@ export function LatexEditor() {
onClick={rejectCurrentChunk}
className="rounded p-0.5 text-red-400 hover:bg-red-600/20 transition-colors"
title="Reject this change"
aria-label="Reject this change"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>

View file

@ -97,6 +97,7 @@ export function SelectionToolbar({
autoFocus
/>
<button
aria-label="Send prompt"
onClick={handleSend}
disabled={!input.trim()}
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity disabled:opacity-30"

View file

@ -311,6 +311,7 @@ function SnapshotRow({
<TagIcon className="size-2" />
{label}
<button
aria-label={`Remove label ${label}`}
className="ml-0.5 rounded-sm opacity-0 hover:text-destructive group-hover:opacity-100"
onClick={(e) => { e.stopPropagation(); onRemoveLabel(label); }}
>