How to build an accessible Sources in React

A native <details>/<summary> disclosure (Enter/Space) whose summary states the count ("Used 3 sources"), so it works before hydration and find-in-page can open it. The list is an <ol>, so each source is announced with its number, matching the InlineCitation markers. Refused URLs render as plain text, never as a link that does nothing

When to use a Sources

• Listing what an AI answer was based on, below the answer
• Giving numbered targets for the InlineCitation markers inside the answer

When not to use it

• Ordinary navigation links — use List or Link
• An agent’s process (searched, read, wrote) — use ChainOfThought

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: Rendering model-supplied URLs straight into href

Prefer: Pass them to Sources / InlineCitation, which only link absolute http(s) URLs

A model can emit javascript: or data: URLs; linking them is script injection

Example

<Sources
  items={[
    { title: 'Refund policy', url: 'https://example.com/refunds' },
    { title: 'Terms of service', url: 'https://example.com/terms', description: '§4 covers cancellations.' },
  ]}
/>

See the full Sources reference →