Accessibility

EnterUI components are built on semantic HTML and focused Radix primitives for complex behavior. The package owns the public React API, class names, CSS variables, and wrapper semantics. Radix owns low-level mechanics such as focus trapping, roving focus, menu navigation, typeahead, portal layering, and slider interaction.

#Consumer Responsibilities

• Provide visible text labels or aria-label for icon-only actions, inputs without adjacent labels, search controls, pagination controls, and menu triggers.
• Use DialogTitle and DialogDescription inside dialogs unless the dialog is intentionally labelled by another element.
• Use FormField, Label, FieldDescription, and FieldError for form controls that need labels, help text, or error text.
• Keep disabled controls actually disabled when interaction must be blocked. Use aria-disabled only for custom interactive patterns that must remain focusable.
• Preserve keyboard access when composing with asChild. The child should be a focusable element such as button or a.

#Built-In Semantics

• Button renders a native button and defaults to type="button".
• Input and TextArea support invalid and pass through ARIA attributes.
• FormField connects a single child control to generated label, description, and error IDs when explicit IDs are not provided.
• Checkbox, RadioGroup, Switch, Select, Tabs, Accordion, Dialog, DropdownMenu, Popover, Tooltip, Toast, Slider, and Progress expose the expected roles and state attributes through native elements or Radix primitives.
• Skeleton is hidden from assistive technology by default.

#Verification

The component package includes SSR and jsdom interaction tests for roles, ARIA state, labels, disabled behavior, open/close behavior, selected state, and portal-rendered primitives.

pnpm --filter @froggdesign/enter-ui test
pnpm --filter @froggdesign/enter-ui typecheck

Run product-level keyboard and screen reader checks for critical app flows, especially after composing components with custom children.