Web Source

Shows a web page an agent searched or read: the site's favicon and the page title, linking to the page in a new tab.

WCAG asks for text alternatives on every image WCAG 2 Overview, and MDN explains how screen readers announce them Accessibility | MDN. Playwright can check the result in a real browser Playwright.

Usage

import { WebSource } from "@tulipfarm/sprout/web-source";

<WebSource url="https://developer.mozilla.org/en-US/docs/Web/Accessibility" title="Accessibility | MDN" />

// No title: shows the address without https://www.
<WebSource url="https://www.w3.org/WAI/standards-guidelines/wcag/" />

// Within a paragraph: follows the text's size
<p>
  WCAG asks for text alternatives <WebSource variant="inline" url={wcagUrl} title="WCAG 2 Overview" />.
</p>

// The page could not be read
<WebSource url="https://www.ft.com/content/inflation" failed />

// Your own icon service, or () => null for the site's first letter
<WebSource url={url} icon={(page) => `/api/favicon?url=${encodeURIComponent(page)}`} />

url is the page's address. Only http and https addresses become links, which open in a new tab; other addresses show a plain chip with a globe. title is the page title, usually from a search result or a page read. A browser cannot read another site's title itself. Without one, the chip shows the address without https://www.. Long titles are cut off with an ellipsis; the full title and address show on hover.

The favicon comes from webSourceIcon, which asks icon.horse for the page's site. Passicon to use another service. It returns an image address for a page, or nothing to show the site's first letter. A quiet tile holds the icon's place while it loads, and the letter replaces it if it fails, matching icon.horse's own tile for sites without a favicon.

variant is block by default: a chip for a row or list of sources. Useinline to cite a page within a sentence; it takes the paragraph's font and size and sits on the text baseline.

failed adds a warning icon for a page that could not be read.

Privacy

Icons load without cookies or a referrer, so the icon service learns the site's name but not who asked or from which page. The service must allow cross-origin requests; icon.horse does.

Accessibility

The chip is a link named by its title. The icon is decorative. A failed page also says “Page unavailable. Retry or paste the text.” to screen readers. On touch screens the block chip keeps its 28px look but takes taps across a 44px band. Inline chips size with the text, like links.

Theme tokens

The chip uses --sprout-secondary, with --sprout-active on hover and the loading tile. The title uses --sprout-text, a missing icon --sprout-muted and the warning--sprout-danger.