Skip to the content

Kongens Nytorv

Metro M1, M2 and M3.

Operator
Movia
Vehicle
8412
Speed
32 km/h
Last report
08:14

Props

NameTypeDefaultDescription
items*readonly FactListItem[]—The facts, in reading order, each { label, value, key }: label names the fact, value says what it is, and key is its React key when the facts change order. Required
unknownLabelstringThe locale'sOverrides "Unknown", heard in place of "—" for a fact with no value
classNamestring—Joined after pn-FactList on the root
styleCSSProperties—Reaches the root
refRef<HTMLDListElement>—Reaches the root element
slotProps{ item?: ComponentProps<"div", {}, HTMLProps> | undefined; label?: ComponentProps<"dt", {}, HTMLProps> | undefined; value?: ComponentProps<"dd", {}, HTMLProps> | undefined; }—Props for each part: item, label, value.
items (required)readonly FactListItem[], default —
The facts, in reading order, each { label, value, key }: label names the fact, value says what it is, and key is its React key when the facts change order. Required
unknownLabelstring, default The locale's
Overrides "Unknown", heard in place of "—" for a fact with no value
classNamestring, default —
Joined after pn-FactList on the root
styleCSSProperties, default —
Reaches the root
refRef<HTMLDListElement>, default —
Reaches the root element
slotProps{ item?: ComponentProps<"div", {}, HTMLProps> | undefined; label?: ComponentProps<"dt", {}, HTMLProps> | undefined; value?: ComponentProps<"dd", {}, HTMLProps> | undefined; }, default —
Props for each part: item, label, value.

Use it

import { FactList } from '@mylder/perron'

Ask your agent

search_docs({ query: "FactList" })

Keyboard and ARIA

FactList has no keys of its own and is never focusable. A value the caller makes a link or button brings that element's own keys, in reading order.

KeyDoesFrom
NoneFactList is not focusable or operablePerron
ElementRoleAccessible name fromStates announced
rootNone in ARIA: the browser exposes a description listNot named, or the caller's aria-label or aria-labelledbyNone; most screen readers say how many facts it holds
itemNone (generic div)Not named; its name and value are read in place, name firstNone
labelterm, from the dtIts text, from the item's labelNone
valuedefinition, from the ddIts text, from the item's valueNone
The "—" in value, when unknownHidden: aria-hidden="true"Not readNone
The words in value, when unknownText, in VisuallyHiddenThe owned string "Unknown", or unknownLabelNone

What axe won't catch, from the contract, each with how this component meets it:

  • Everything the eye is told, the ear is told, for every shape each prop accepts: each name and value is read as shown, name first; "—" is aria-hidden and the ear hears "Unknown" in its place (CR-5). No colour carries meaning: values are color.text.primary, and tertiary only for the "—" the words speak for.
  • Every landmark and named region has an accessible name: none here; the dl is a list, not a landmark or region, and a caller who names it gives aria-label or aria-labelledby on the root.
  • Every default label can be overridden: unknownLabel.
  • Every shape the type accepts renders, in every variant: label and value are ReactNodes; a string, a number, an element and a list each render, 0 is a value and not unknown (CR-4), an empty items renders an empty dl (CR-8), and FactList.test.tsx renders each shape. The Default story gives string names and values.
  • A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The "—" is aria-hidden because the words speak for it, not for animation.
  • Native semantics first: dl, div, dt and dd, HTML's description list, with no role and no ARIA beyond aria-hidden on the "—".
  • Focus moves in reading order and returns on close: FactList takes no focus and opens nothing; focusable values, such as links, come in the order of items.
  • Every target is at least size.target-min square: no target of its own; a link a caller puts in a value is the caller's to size.
  • Loops stop when the system asks for less motion: none here; FactList has no motion.

Owned strings

Every word FactList shows comes from the caller, through each item's label and value, but for the one it announces for a fact with no value.

KeyEnglishOverrideSeen or heard where
unknown"Unknown"unknownLabelvalue, heard in place of the aria-hidden "—" when an item has no value (CR-5)

A fact with no value shows "—" and says "Unknown", reusing Stat's unknown key. Content design writes "—" for unknown and the brand never shows a guess, while a screen reader skips or spells a bare "—", so the ear would hear a name with nothing after it; Stat and Delay do the same, and one word across the Display family keeps every screen agreeing. unknown, "Unknown", is the key Stat added to packages/perron/src/locale/en.ts, with Danish "Ukendt", Swedish "Okänd" and Norwegian Bokmål "Ukjent"; its JSDoc, which names Stat alone, widens to name any figure or value no data gives.

Do and don't

For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.

RuleLevelDoDon'tChecked by
DD-1mustLeave out an item's value when no data gives it, so FactList shows "—" and says "Unknown"Write "0", "n/a" or a guess for a value nobody knows: the brand never claims more than the data knowsreview
DD-2mustName each fact in a word or two, "Operator", "Last report", and write its value as content design does, "32 km/h"Put the name inside the value, such as "Speed 32 km/h": the name and value then read as one term with no definitionreview
DD-3shouldUse FactList for several facts about one thing, such as a vehicle in its detail panelUse it for one key figure, which is a Stat, or for rows people compare across many things, which is a tablereview
DD-4mustName the list with aria-labelledby pointing at the panel's heading when the panel holds more than one listGive the list a heading inside items: every entry is a fact, a name and its valuereview
DD-5mustSay a status in words in the value, or show it with a SeverityLabel or a DelayColour a value through className to say it is good or bad: colour alone tells no screen reader and no colour-blind personreview
DD-6shouldShow EmptyState in place of FactList when there are no facts to showRender FactList with an empty items and nothing beside it: an empty list tells the person nothingreview
DD-7mustKeep render on the root to another dl, or a component that renders oneSwap the root for a ul or div through render: its dt and dd would sit outside a dl, which HTML and axe both failreview
DD-8mustAnnounce a changed fact in the screen's own polite live region, when it changes stateMake FactList a live region: a speed or report time that updates every few seconds floods the screen readerreview