Attribution is the map's credits: one small strip of caption text, laid on glass in a corner of the map, that names where the map and its data come from, such as "Map data © OpenStreetMap contributors", with the caller's links to each source.
When to use
Use Attribution for the map's credits: one strip in a corner of the map that names where the map and its data come from, with a link to each source's terms.
| Use instead | When |
|---|---|
| SourceLine | A panel names where its data comes from and the time of that data |
Props
| Name | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | The credits, as each source asks to be credited, with a link to each source's terms where it has one: "Map data © OpenStreetMap contributors". Phrasing content only: text, links and inline elements. Required: an empty strip credits no one. |
children (required)ReactNode, default —- The credits, as each source asks to be credited, with a link to each source's terms where it has one: "Map data © OpenStreetMap contributors". Phrasing content only: text, links and inline elements. Required: an empty strip credits no one.
Use it
import { Attribution } from '@mylder/perron'Ask your agent
search_docs({ query: "Attribution" })Keyboard and ARIA
Attribution adds no keys and no tab stop of its own: the strip is not focusable (CR-2). Each of the caller's links is a tab stop where it sits in the credits, in reading order, and works as a link does.
| Key | Does | From |
|---|---|---|
Tab, Shift+Tab | Moves focus to the next or the previous of the caller's links | The browser |
Enter | Follows the focused link to the source it credits | The browser |
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | none: a <small>, which has no ARIA role and is read as its text | Its text, the caller's children | none |
| A link in the credits | link, the caller's <a href> | Its text | visited, as the browser announces it |
A screen reader reads the credits in place, as written, "copyright" for "©". Attribution adds no aria-label, no heading and no region: the credits' text is all there is to hear, and a named region around one line of small print would be a landmark with nothing to find.
Attribution owns no strings: no "Map credits" or "Sources" label is seen or heard before the credits. The credits name their sources themselves, "Map data © OpenStreetMap contributors", so a label in front of them would say again what they say; a label heard only by screen readers would need a region to name, which the strip doesn't make; and an owned word can join later with its *Label prop.
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: the glass only sets the credits apart from the map; the credits are text, read in place, and a link is told by its underline to the eye and by its
linkrole to the ear. - Every landmark and named region has an accessible name: none here; the
<small>is not a landmark or a region. - Every default label can be overridden: no owned strings, so no
*Labelprops. - Every shape the type accepts renders, in every variant:
childrenrenders as a string, an element and a list alike, inside the one<small>withpn-Attributionfirst;Attribution.test.tsxchecks all three. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; the strip has no motion and never collapses. - Native semantics first: the native
<small>for small print, and the caller's native<a href>for each link, with no ARIA. - Focus moves in reading order and returns on close: nothing takes focus but the caller's links, in the order they are written; nothing opens or closes.
- Every target is at least
size.target-minsquare: a link in the credits is in a sentence, the inline exception of WCAG 2.2's target size (2.5.8), so its height is the caption's line; the strip itself is never pressed. - Loops stop when the system asks for less motion: none here; the strip has no motion.
Owned strings
No owned strings: every word of the credits, and every link's text, is the caller's children, and Attribution announces nothing else.
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.
| Rule | Level | Do | Don't | Checked by |
|---|---|---|---|---|
| DD-1 | must | Credit each source as its terms ask, with a link to those terms: "Map data © OpenStreetMap contributors" | Shorten a credit a source's terms set, or leave the link out where the terms ask for one | review |
| DD-2 | should | Place one Attribution in a corner of the map, size.panel-gap from the edge and stacked at z-index.map-controls, clear of the map controls and the scale | Put it in a panel, a dialog or the page's footer, away from the map it credits, or cover it with a sheet or a panel | review |
| DD-3 | must | Give it phrasing content: text, links and inline elements | Put a heading, a paragraph or a list in it; a <small> holds phrasing content only | review |
| DD-4 | must | Write each link's text as the source's name or the credit itself | Write "Click here" or "Read more", or a bare URL; the link's text is what a screen reader hears | review |
| DD-5 | should | Keep it to the credits | Use it for a disclaimer, a data-state note or a status message; a status belongs in words beside what it is about, in its own component, with its own colour | review |