Diwa Design System

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.

KeyAction
—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 / PropertyValue / Behaviour
Rendered tagThe 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 tag to the appropriate HTML element for the content. Misusing div everywhere 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 — ellipsis clips text visually but the full text remains in the DOM and is read by screen readers. If the truncated content is meaningful, consider providing a title attribute 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.