Accessibility

Keyboard, ARIA, and labeling patterns for Orbital date and time pickers.

Calendar grids expose role="grid" with roving tabindex and arrow-key navigation. Segmented fields use role="spinbutton" with aria-valuenow on numeric segments. Always wrap pickers in Field so labels associate with the first focusable segment or calendar control.

• Any production form that must meet WCAG keyboard and labeling requirements
• Flows where users navigate dates exclusively from the keyboard
• Custom picker layouts that still need correct roles on calendar and field surfaces

• Wrap each picker in Field with a visible label and stable name.
• Prefer built-in DateField and DateCalendar over raw HTML inputs.
• Test arrow keys on calendar grids and Tab/Shift+Tab through segmented fields.
• Verify screen readers announce the label, current segment value, and validation errors from Field.