PlainItem

Structure

PlainItem renders a <div> wrapper with optional leading and trailing content around a consumer-provided child. The wrapper adds no ARIA attributes or keyboard behavior; the interactive child provides its own semantics and interaction.

Child accessibility

Use an interactive child with an accessible name and appropriate semantics. Put its event handlers and ref on that child. Give content in the optional sibling slots the semantics it needs through its own elements or components. A slot without a control lets the pointer through to the interactive child, so a click anywhere on its content, including a middle-click or right-click on a link, acts on the child. A slot that contains a control (a button, link, form field, or element with tabindex or an interactive role) takes the pointer as a whole, so nothing in it activates the child. Hover only reaches content in that kind of slot, so give a tooltip in a slot a focusable trigger, like Tooltip's default button, which also makes it reachable from the keyboard.