Unified · Split
| @@ -1,4 +1,4 @@ | ||
| 1 | −import { useState } from "react"; | |
| 1 | +import { useId, useState } from "react"; | |
| 2 | 2 | |
| 3 | 3 | import { cn } from "../../lib/utils"; |
| 4 | 4 | |
| @@ -17,12 +17,14 @@ export function ExpandableText({ · 12 unmodified lines | ||
| 17 | 17 | collapsedClassName?: string; |
| 18 | 18 | expandLabel?: string; |
| 19 | 19 | }) { |
| 20 | + const textId = useId(); | |
| 20 | 21 | const [expanded, setExpanded] = useState(false); |
| 21 | 22 | const canExpand = text.length > 180 || text.includes("\n"); |
| 22 | 23 | |
| 23 | 24 | return ( |
| 24 | 25 | <div className={cn("min-w-0", className)}> |
| 25 | 26 | <div |
| 27 | + id={textId} | |
| 26 | 28 | className={cn( |
| 27 | 29 | "whitespace-pre-wrap break-words", |
| 28 | 30 | !expanded && canExpand ? collapsedClassName : null, |
| @@ -33,6 +35,8 @@ export function ExpandableText({ · 4 unmodified lines | ||
| 33 | 35 | {canExpand ? ( |
| 34 | 36 | <button |
| 35 | 37 | type="button" |
| 38 | + aria-expanded={expanded} | |
| 39 | + aria-controls={textId} | |
| 36 | 40 | className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline" |
| 37 | 41 | onClick={() => setExpanded((value) => !value)} |
| 38 | 42 | > |