Go to AntUIKit homepage

Sources

The links an answer was drawn from, as a folding list under the reply or a small marker inside the text.

Preview in FigmaLLMs

Accessibility

What Sources does for you, and what it leaves to the page around it.

What Sources renders

The list form is a header and a real <ul>. Each source is an <a> inside an <li>, so a screen reader announces a list with its count and each link by its title.
  • Every link opens in a new tab, and nothing on the link says so. Add it to the visible text near the list, or to each title, like “(opens in a new tab)” in a visually hidden span.
  • An item with no url renders an <a> with no address, which is not focusable and not announced as a link.
  • An icon is read like any other content. A glyph from the icon pack is hidden from screen readers, and an <img> favicon needs alt="" so its file name is not read before every title.

The folding header

The header that folds the list is a plain <div> with a click handler. It cannot be reached with Tab, Enter and Space do nothing, and it does not say whether the list is open.
  • Put a <button type="button"> in title. Its click reaches the header, so Enter and Space fold the list, and the button is in the tab order.
  • Control the state with expanded and onExpand, and set aria-expanded on that button from it.
  • The folding arrow is announced as an image named “right”. Make the title's words carry the meaning, so the stray word does not matter.
  • A folded list is removed from the page, not hidden. If the sources must always be reachable, leave the list unfolded.

Inline markers are hover only

The inline marker is a <span> that opens its card on mouse hover. It cannot be focused, and the card's sources and its page arrows are not links or buttons, so the keyboard cannot use any of it.
  • Always pair inline markers with the list form somewhere in the same answer. That list is how keyboard and screen reader users reach the sources.
  • A screen reader reads the marker's title in the sentence, so a bare “1” lands mid-sentence with no context. Add a visually hidden word to the title: title={<><span className="sr-only">Source </span>1</>}.

Contrast

The header uses the secondary text color and the links use the main text color, turning to the link color on hover. The inline marker's label is small and secondary on a gray fill.
  • Links take the body text color and no underline, so only the list layout marks them as links. Where that is not enough, underline them through classNames.content, for example "[&_a]:underline".
  • Check the inline marker's small label against its fill with a custom theme. The Tokens tab lists the colors this component reads.

Motion

Folding animates the list's height and opacity over motionDurationMid, and the arrow turns with it. Content below moves as it runs.
  • Motion turns off everywhere with motion: false in your token file's seed, and a reader who has asked for reduced motion should get that.
SenderSuggestion
© 2026 AntUIKit . All rights reserved.