ArticleShareSection

End-of-article share section: X, LinkedIn and Facebook share links plus a copy-link button, under an optional heading.

Status: stable. Group: content. Markdown version: /design-system/components/article-share-section.md

When to use

End-of-article share section: X, LinkedIn and Facebook share links plus a copy-link button, under an optional heading. Blog article template slot; not for arbitrary pages.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

ArticleShareSection props
Prop	Type	Default	Description	Required
`url`	`string`	none	Article URL to share.	Yes
`title`	`string`	none	Article title for share text.	Yes
`layout`	`"horizontal" \| "vertical"`	`horizontal`	Layout direction. Defaults to `horizontal`.	No
`showTitle`	`boolean`	`true`	Show the translated "Share this article" heading, rendered at `headingLevel`. Defaults to `true`.	No
`headingLevel`	`"2" \| "3" \| "4" \| "5" \| "6"`	`3`	Heading level of the section title, to fit the page outline. Defaults to `3`.	No
`className`	`string`	none	Custom className.	No

Variants

Available layouts: horizontal, vertical (default horizontal).
Allowed headingLevel values: 2, 3, 4, 5, 6 (default 3).

Invalid combinations

The contract records no invalid combinations.

Keyboard

ArticleShareSection keyboard behaviour
Key	Behaviour
Tab	Reaches each share link and the copy-link button.
Enter/Space	Activates them.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

ArticleShareSection rules
Level	Rule	How it is checked
MUST	ARIA: Each share control is labelled (aria-label): Share on X/LinkedIn/Facebook and Copy link.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Icons are aria-hidden; the copy button's aria-label switches to "Link copied!" on success, and the confirmation text is written into an always-mounted polite live region (role=status), so screen readers announce it.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The copied state paints --color-on-status ink on the --color-success fill, which passes 3:1 non-text contrast in every theme.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The heading defaults to h3; set headingLevel (2 to 6) so it fits the page outline.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The section root carries the resolved UI language so localized labels override an English article-body boundary.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not invent parallel primitives inside this folder.	Release review; not machine-checked.
MUST NOT	Maintainers: Do not promote to stable without production consumer evidence.	Release review; not machine-checked.

Install and import

In-repo only. ArticleShareSection is not exported from @digitaltableteur/react, so there is no public import path.