Accessible Icon

Overview

AccessibleIcon renders its icon ChildContent verbatim, then appends a visually-hidden span carrying Label as text. It introduces no wrapper element, so the icon’s layout is untouched; the hidden label supplies an accessible name for an otherwise wordless graphic.

Anatomy

@using Navius.Primitives.Components.AccessibleIcon

<NaviusAccessibleIcon>
</NaviusAccessibleIcon>

Root

Renders the icon ChildContent unchanged, then a visually-hidden span carrying the accessible name. Does not render a wrapper element.

Prop	Type	Default	Description
Label	string	- (EditorRequired)	The accessible name announced by screen readers. Required and must be non-empty.
ChildContent	RenderFragment?	-	The icon to render (usually an inline SVG), rendered verbatim before the hidden label.
Attributes	IDictionary<string, object>?	-	Forwarded to the visually-hidden label span.

Data attributes

Part	Attribute	Description
Root	data-navius-accessible-icon	Present on the visually-hidden label span.

ARIA mechanism

Root has no role of its own. It positions the Label text off-screen (not display:none) so it stays in the accessibility tree and becomes the accessible name for the icon or the interactive control that contains it. Consumers are responsible for marking the icon itself aria-hidden="true" (and focusable="false" on SVGs) so it is not announced twice. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.