Role and semantics
Section titled “Role and semantics”Container renders a <div> by default, with no role or name. render={<main />} or render={<section />} turns it into a meaningful element.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Container does not take focus; Tab moves to the interactive elements inside it. |
None. Container is not in the focus order and shows no focus ring. Do not add tabIndex.
Screen reader output
Section titled “Screen reader output”A plain <div> says nothing to a screen reader; the text inside is read in flow.
| Example | Announced |
|---|---|
<Container> |
Nothing (the content is read) |
<Container render={<main />}> |
“main” landmark |
Contrast
Section titled “Contrast”Container draws no text or colour, so it has no pair to measure. The background you give it and the text inside it are your responsibility.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Container meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | render can draw <main> or <section>. |
Use one <main> per page; name a <section>. |
| 1.4.4 Resize text | The width is a px limit; when the parent narrows, Container shrinks and does not clip content. | Check that content does not overflow at 200% zoom. |
| 1.4.10 Reflow | With w-full it fills the parent in a narrow viewport and needs no horizontal scroll. |
Do not set a fixed width with className. |