FoldToggle.tsx 866 B

123456789101112131415161718192021222324252627282930313233
  1. interface FoldToggleProps {
  2. className: string | undefined
  3. expanded: boolean
  4. hidden: number
  5. labels: {
  6. collapseAria: string
  7. expandAria: (hidden: number) => string
  8. collapse: string
  9. expand: (hidden: number) => string
  10. }
  11. onToggle: () => void
  12. }
  13. /**
  14. * Render the shared head-tail fold control with caller-owned localized copy.
  15. * @param props - Fold state, localized labels, and toggle callback.
  16. * @returns The accessible expand or collapse button.
  17. */
  18. export function FoldToggle({
  19. className, expanded, hidden, labels, onToggle,
  20. }: FoldToggleProps) {
  21. return (
  22. <button
  23. type="button"
  24. className={className}
  25. aria-expanded={expanded}
  26. aria-label={expanded ? labels.collapseAria : labels.expandAria(hidden)}
  27. onClick={onToggle}
  28. >
  29. {expanded ? labels.collapse : labels.expand(hidden)}
  30. </button>
  31. )
  32. }