Accessibility
DataList from @prepared911/ui renders label and value pairs in a consistent column layout. The component wires the term and description structure, names empty and loading values, and announces copy results; your job is to keep labels precise, name empty values, and place the list under a heading or landmark.
div holding one dt and one dd, the grouping HTML allows inside a dl. Assistive technology reads a term with its description.EmptyText with role="text", so a screen reader hears the emptyLabel instead of a dash.loadingLabel, and aria-busy marks the dd and, for a loading list, the dl.error value shows a warning glyph and text; neither color nor shape carries the meaning alone.button named for its action. It points aria-describedby at its own term, so a list of "Copy" buttons stays distinguishable, and its copied and failed outcomes are announced through the live announcer.dl has no role for aria-label to name, so name the list through the heading or landmark around it.emptyLabel to "Not set", "Unknown", or a contextual equivalent so the rotor does not announce an empty value as nothing.copyLabels requires an idle, a copied and a failed name. Localize all three.StatusDot or an icon beside a value is decorative; pair it with visible text.:focus-within, so keyboard users always see where focus is.<dl> wrapping <div> groups, each with a <dt> (label) and a <dd> (value).<button> elements with accessible names.overflow={DataListOverflow.Truncate} keeps the full text in the document and carries it as the native title, which only a pointer reaches. Prefer wrapping, or expose the full value through the copy button or a detail view.Secret for tokens and masked values; DataList is for readable metadata.