mirror of
https://github.com/delibae/claude-prism.git
synced 2026-08-28 05:14:59 +00:00
feat: add aria-labels for accessibility improvements in various components
This commit is contained in:
parent
bd18e75f3c
commit
e0986f060e
6 changed files with 11 additions and 0 deletions
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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); }}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue