ContentsLink

Props

• href: string (required) -- the URL or anchor the link points to
• current: boolean (default: false) -- whether this is the currently active section
• children: slot (required) -- link text content
• ...restProps: Any additional HTML attributes

Keyboard Interactions

• Tab: Focus the link
• Enter: Follow the link
• (All handled natively by <a> element)

ARIA

• Implicit link role from <a> element
• aria-current="true" when the link corresponds to the currently visible section

When to Use

• Use inside ContentsListItem to create a clickable link to a related page in the guide.
• Use concise, descriptive link text limited to approximately two lines.
• Use it for same-page links, such as local anchors (href="#symptoms"): a page outline that jumps to the sections of the page being read is a fine use.
• Use it as a same-page "scrollspy": inside a ContentsNav with spy, the link for the section in view is marked aria-current="true" as the reader scrolls.

When Not to Use

• Do not use for the current page when the list links between pages -- there the current page should be plain text, not a link. (A same-page outline is different: every entry, including the section in view, stays a link and the section in view carries aria-current="true".)
• Do not use outside of ContentsListItem -- use ActionLink or a standard anchor for standalone links.

Headless

This component provides a native <a> element with aria-current support for active section indication, with zero visual styling. The consumer is responsible for all CSS including text color, hover state, active/current indicator, and focus styling.

Styles

The consumer provides all CSS styling. The component renders with a .contents-link class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders an <a> element with class contents-link
• Verify href attribute is applied
• Verify aria-current is set when current is true
• Verify keyboard interactions work correctly
• Verify pass-through attributes are applied

Advice

• Designers: Visually distinguish the current section link from others. Use indentation to show section hierarchy. Ensure sufficient contrast for link text.
• Developers: For a same-page outline, give each section an id and point the links at #id; native anchors work without JavaScript and the scrollspy only adds the current marker. Update aria-current dynamically as the user scrolls through sections for accurate screen reader announcements.

Implementation Notes

• Uses native <a> element for inherent link behavior and keyboard support
• aria-current="true" indicates the currently active or visible section
• href attribute links to the target page or section anchor
• Content is provided through child elements

Composition

ContentsLink is used within ContentsListItem, which is part of ContentsList and ContentsNav.

Related components

• contents-nav — a contents navigation area
• contents-list — an contents ordered list of contents list item components
• contents-list-item — one contents list item

References

• MDN a element