Disclosure

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useId, useRef, useState } from "react";4 5/**6 * An accordion that animates to its content's real height.7 *8 * Height is the whole problem. `height: auto` is not animatable, so the usual9 * fixes are a hardcoded max-height — which either clips long content or makes10 * short content ease at the wrong speed, because the transition runs over a11 * height the panel never reaches — or a JavaScript measurement written to an12 * inline style, which then has to be cleaned up so the panel can reflow when13 * the viewport changes.14 *15 * This uses `grid-template-rows: 0fr → 1fr`. The row sizes to its content16 * automatically, so it animates to the exact height with no measurement, no17 * magic number, and nothing to clean up — and it stays correct if the content18 * reflows mid-animation.19 *20 * The semantics are a plain button controlling a region: aria-expanded on the21 * trigger, aria-controls pointing at the panel, and the panel labelled by the22 * trigger. Nothing here is a custom widget, so the browser's own behaviour is23 * left alone.24 */25 26export interface DisclosureItem {27  id: string;28  question: string;29  answer: string;30}31 32export interface DisclosureProps {33  items: DisclosureItem[];34  /** Allow several panels open at once. */35  multiple?: boolean;36  /** Index open on first render, or null for all closed. */37  defaultOpen?: number | null;38  accent?: string;39  /** Seconds. */40  duration?: number;41  still?: boolean;42  className?: string;43}44 45export function Disclosure({46  items,47  multiple = false,48  defaultOpen = null,49  accent = "#c3f53c",50  duration = 0.4,51  still = false,52  className = "",53}: DisclosureProps) {54  const groupId = useId();55  const [open, setOpen] = useState<Set<number>>(56    () => new Set(defaultOpen === null ? [] : [defaultOpen]),57  );58  const listRef = useRef<HTMLDivElement>(null);59 60  const toggle = (index: number) => {61    setOpen((current) => {62      const next = new Set(multiple ? current : []);63      if (current.has(index)) next.delete(index);64      else next.add(index);65      return next;66    });67  };68 69  /**70   * Up/Down move between triggers, Home/End jump to the ends. Not required by71   * the pattern — each trigger is a button and Tab already reaches it — but it72   * is what people expect from a stack of related controls, and it costs73   * nothing to honour.74   */75  const onKeyDown = (event: React.KeyboardEvent, index: number) => {76    const keys = ["ArrowDown", "ArrowUp", "Home", "End"];77    if (!keys.includes(event.key)) return;78    event.preventDefault();79 80    const next =81      event.key === "ArrowDown"82        ? (index + 1) % items.length83        : event.key === "ArrowUp"84          ? (index - 1 + items.length) % items.length85          : event.key === "Home"86            ? 087            : items.length - 1;88 89    listRef.current90      ?.querySelector<HTMLButtonElement>(`[data-trigger="${next}"]`)91      ?.focus();92  };93 94  return (95    <div ref={listRef} className={`divide-y divide-ink-600 border-y border-ink-600 ${className}`}>96      {items.map((item, index) => {97        const isOpen = open.has(index);98        const panelId = `${groupId}-panel-${index}`;99        const triggerId = `${groupId}-trigger-${index}`;100 101        return (102          <div key={item.id}>103            <h3>104              <button105                type="button"106                id={triggerId}107                data-trigger={index}108                aria-expanded={isOpen}109                aria-controls={panelId}110                onClick={() => toggle(index)}111                onKeyDown={(e) => onKeyDown(e, index)}112                className="flex w-full items-center justify-between gap-4 py-4 text-left"113              >114                <span115                  className="text-[0.95rem] transition-colors"116                  style={{ color: isOpen ? accent : undefined }}117                >118                  {item.question}119                </span>120 121                {/* A plus rotating into a minus: one element, no icon swap,122                    and it reads as a state change rather than a replacement. */}123                <span124                  aria-hidden125                  className="relative h-3 w-3 shrink-0"126                  style={{127                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",128                    transition: still ? "none" : `transform ${duration}s cubic-bezier(0.16,1,0.3,1)`,129                  }}130                >131                  <span132                    className="absolute top-1/2 left-0 h-px w-full -translate-y-1/2"133                    style={{ background: isOpen ? accent : "currentColor" }}134                  />135                  <span136                    className="absolute top-0 left-1/2 h-full w-px -translate-x-1/2"137                    style={{138                      background: isOpen ? accent : "currentColor",139                      transform: isOpen ? "scaleY(0)" : "scaleY(1)",140                      transition: still ? "none" : `transform ${duration}s cubic-bezier(0.16,1,0.3,1)`,141                    }}142                  />143                </span>144              </button>145            </h3>146 147            {/* 0fr → 1fr. The row sizes itself to the content, so this148                animates to the exact height with no measurement. */}149            <div150              id={panelId}151              role="region"152              aria-labelledby={triggerId}153              className="grid"154              style={{155                gridTemplateRows: isOpen ? "1fr" : "0fr",156                transition: still157                  ? "none"158                  : `grid-template-rows ${duration}s cubic-bezier(0.16,1,0.3,1)`,159              }}160            >161              {/* The overflow-hidden child is required: without it the content162                  spills out of a 0fr row instead of being clipped by it. */}163              <div className="overflow-hidden">164                <p165                  className="pb-5 text-[0.9rem] leading-relaxed text-bone-400"166                  // Hidden from assistive tech when collapsed, or a screen167                  // reader reads answers the sighted user cannot see.168                  {...(isOpen ? {} : { "aria-hidden": true })}169                >170                  {item.answer}171                </p>172              </div>173            </div>174          </div>175        );176      })}177    </div>178  );179}180