Text
A semantically correct text renderer that maps a visual type scale onto the right HTML element. Supports size, weight, alignment, colour, and ellipsis truncation.
Keyboard interaction
diwa-text is a non-interactive display component. It receives no keyboard focus.
| Key | Action |
|---|---|
| — | No keyboard interaction. diwa-text is a display-only element. |
Screen reader behaviour
The component adds no ARIA attributes of its own — semantic meaning comes from the rendered HTML tag.
| Attribute / Property | Value / Behaviour |
|---|---|
Rendered tag | The tag prop controls the HTML element rendered inside the shadow root (p, span, div, label, or li). Screen readers interpret the tag's native semantics. |
Best practices
- Tag semantics — always set
tagto the appropriate HTML element for the content. Misusingdiveverywhere disrupts heading navigation and landmark structure for screen reader users. - Colour contrast — all four colour aliases meet WCAG AA contrast requirements against both the noir (dark) and light backgrounds. Do not override
--diwa-text-*tokens to a value that reduces contrast below 4.5:1 for normal text. - Ellipsis accessibility —
ellipsisclips text visually but the full text remains in the DOM and is read by screen readers. If the truncated content is meaningful, consider providing atitleattribute or a tooltip so sighted users can also access the full value.
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
All four colour aliases (primary, secondary, disabled, inverse) are validated against both the noir and light theme backgrounds to meet the 4.5:1 minimum ratio.
1.3.1 Info and Relationships — APass
The tag prop renders the correct semantic HTML element (p, span, div, label, li). Heading hierarchy and list structure are preserved for AT when the correct tag is used.
1.4.4 Resize Text — AAPass
Font sizes are defined in rem units. Text scales correctly when the user increases the browser base font size up to 200%.
2.1.1 Keyboard — APass
The component is non-interactive. It does not interfere with keyboard navigation.
4.1.1 Parsing — APass
The shadow DOM renders a single semantic element without duplicate IDs or invalid nesting.