Box

Role and semantics

By default Box is a plain <div> with no role. When you need landmark or list semantics, pass the right element with render: <section>, <aside>, <ul>. Box does not add that meaning by itself.

Keyboard

Key	Behaviour
Tab	Box takes no focus; Tab moves through the children in their own order. Box has no keys of its own.

Focus

None. Box is not in the tab order and draws no focus ring. Focus order is DOM order; there is no prop that changes the visual order.

Screen reader output

Box itself says nothing to a screen reader; the text of its children is read. Surface colour and border are not read. When used as a landmark, give it a name with aria-label or aria-labelledby.

Example	Read as
<Box>Card title</Box>	“Card title”
<Box render={<section aria-label="Section" />}>...</Box>	“Section, region” (varies by screen reader)

Contrast

Box sets only background and border colour; it does not set the text colour. The contrast of child text depends on their own components and the surface they sit on. On raised, sunken and layer-*, use components that set their own text colour.

WCAG 2.2

Criterion	How Box meets it	What product teams do
1.3.1 Info and relationships	Landmark and list meaning comes only from the element passed with render; Box does not replace meaning with visual grouping.	Give every Box that is a card, region or list the right element (<section>, <ul>) and, if needed, a name.
1.3.2 Meaningful sequence	Box does not reorder children; reading order is DOM order.	Write the content in the order it should be read.
1.4.10 Reflow	Box sets no fixed width; children flow with the container.	Do not put fixed-width items inside a Box.
2.4.3 Focus order	Box takes no focus and does not change focus order.	Do not add tabIndex to a Box.