add ARIA labels, pressed states, and fix keyboard visibility across card detail components

This commit is contained in:
Your Name
2026-02-19 19:54:22 +02:00
parent f79e4c7090
commit 06a2f3ff3d
6 changed files with 19 additions and 5 deletions

View File

@@ -76,6 +76,7 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
variant={mode === "edit" ? "secondary" : "ghost"}
size="xs"
onClick={() => setMode("edit")}
aria-pressed={mode === "edit"}
className="font-mono text-xs"
>
Edit
@@ -83,6 +84,7 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
<Button
variant={mode === "preview" ? "secondary" : "ghost"}
size="xs"
aria-pressed={mode === "preview"}
onClick={() => {
// Save before switching to preview
if (mode === "edit") {
@@ -113,6 +115,7 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
onChange={handleChange}
onBlur={handleBlur}
placeholder="Add a description... (Markdown supported)"
aria-label="Card description (Markdown)"
className="min-h-[100px] w-full resize-none overflow-hidden bg-transparent px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
/>
</OverlayScrollbarsComponent>