Text List

A styled list component that renders as a bulleted list, a numbered list, or an inline flex row. Accepts diwa-text-list-item children.

Keyboard interaction

diwa-text-list is a non-interactive display component. It receives no keyboard focus.

Key	Action
`—`	No keyboard interaction. diwa-text-list is a display-only element.

Screen reader behaviour

Attribute / Property	Value / Behaviour
`Rendered tag`	unordered and inline → <ul> (role="list"). ordered → <ol> (role="list"). Both are correctly announced by screen readers as lists with the appropriate item count.
`Items as <li>`	Each diwa-text-list-item renders with display: list-item, which browsers expose as a list item to the accessibility tree (role="listitem").

WCAG 2.2 compliance

✓

1.3.1 Info and Relationships — APass

Semantic ul/ol/li structure conveys list relationships to assistive technologies. Ordered and unordered types are announced correctly by screen readers.

✓

1.4.3 Contrast (Minimum) — AAPass

List item text inherits the --diwa-text-primary colour token, meeting the 4.5:1 ratio against background colours in both themes.

✓

1.4.4 Resize Text — AAPass

Font sizes are defined in rem units. Text scales correctly when the browser base font size is increased to 200%.

✓

2.1.1 Keyboard — APass

The component is non-interactive and does not interfere with keyboard navigation. Any interactive children follow their own keyboard patterns.

✓

4.1.1 Parsing — APass

The shadow DOM renders valid list markup without duplicate IDs or invalid element nesting.

Best practices

Screen reader announcement — Screen readers typically announce lists as "X items" or "list of X items". Ensure each item is concise and self-descriptive without surrounding prose.
Inline lists — The inline type visually hides the list markers but retains the semantic ul/li structure. Screen readers will still announce the item count.
Nesting — If nesting lists, ensure the outer component is a valid container for inner lists. Only place a nested diwa-text-list inside a diwa-text-list-item to maintain valid HTML structure.