Audit detail

Keyboard

• The detail has no focusable element of its own. Expanding is done by the chevron IconButton of the row, a real <button>: Tab reaches it, Enter or Space toggles.
• Actions passed in actions (undo, "Open record") are real buttons in the tab order, after the row's chevron.

ARIA

• The chevron carries aria-expanded and a label that names the action ("Show details" / "Hide details"); the detail is rendered only while open, so there is no hidden content to skip.
• AuditChanges is a description list (dl / dt / dd): a screen reader announces the pairs field → value.
• AuditItems is a ul of items; the "and N more" line is a plain li.
• The arrow icon between before and after is decorative. The order (before, then after) carries the meaning.
• The container sets aria-busy="true" while the batch items load, so the placeholder text "Loading…" is not announced as content.

Focus

• Opening the detail does not move focus; focus stays on the chevron. Closing it leaves focus on the same chevron.
• The foundation focus ring from ds.css applies to the buttons in actions.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

• .now, the batch name .n and the e-mail body use --fg — well above AA in both themes.
• dt, .was, .c and the e-mail label use --fg-muted, which is 2.85:1 in the light theme — below AA for text. The same deliberate cost as the Item list: hierarchy is carried by colour alone.
• The note uses --fg-secondary.

Known limits

• .was is distinguished from .now by strike-through and colour only (text-decoration, not <s> / <del>), so a screen reader does not say "removed". The word order and the arrow still read "before → after", but the roles are not announced.
• Long batch lines are clipped with an ellipsis; the full text is not in a title.
• Nothing announces that the batch items have arrived after the row was opened beyond the end of aria-busy.