Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Calendar
  3. Event Recurrence Picker
  5. Accessibility

Event Recurrence Picker

Accessibility

Overview
RecurrenceField composes a Select for frequency and time zone, a custom panel for custom cadences, a DateInput for the start, two TimeInput fields for the window, a Switch for all day, and end-rule selectors. The summary uses aria-live="polite" and aria-atomic. formatRecurrenceSummary returns the same sentence for a chip. When trigger is set, the popover is named by copy.popoverTitle.
What the component handles
  • Sub-control semantics. Every sub-control (Combobox, Switch, Calendar, TimeInput, Input, Label) is a Prepared-shipped component with its own a11y story: labels, keyboard handling, and focus styling.
  • Custom panel. Choosing Custom replaces the main form with the custom editor. Back returns to the main form. The change is the panel itself, not a motion-only cue.
  • Draft state for popover use. When confirm + trigger are set, the picker holds draft changes internally and only emits onValueChange when Apply fires: so closing the popover via Escape discards the draft without committing.
  • Disabled cascade. disabled passes down to every sub-control so a parent "view only" state doesn't leave part of the rule editable.
  • Summary prose. formatRecurrenceSummary returns the sentence the field shows. The field already announces draft changes with aria-live="polite".
What you must provide
  • Accessible name for the control group. Wrap the picker in role="group" with aria-labelledby pointing at a visible heading (e.g. "Schedule"), or aria-label if no heading exists.
  • Trigger accessible name. When trigger is set, the trigger element owns its accessible name; icon-only triggers need aria-label.
  • Echoed summary. Use formatRecurrenceSummary for a chip. The field's own live region covers the draft.
  • Section headings. Keep a clear visible hierarchy between Frequency, Start, and End rule so screen reader users can navigate the panel by headings.
  • Focus on open. When hosting the picker in a popover, focus the frequency Combobox (or your preferred entry point) when the popover opens so keyboard users land inside the panel.
Keyboard behavior
  • Tab / Shift+Tab follows the visual order: start time, end time, All day, Starting On, Time zone, Repeats, Reset, Apply. On the custom panel the order is Back, then the interval, weekday, monthly-mode, and end controls.
  • Arrow keys inside Comboboxs move between options; Enter or Space commits the focused option; Escape closes the combobox without committing.
  • Arrow keys inside the start Calendar match Calendar: Up / Down by week, Left / Right by day.
  • Space toggles the All-day Switch.
  • Enter / Space activates Apply / Reset and the hosting popover's trigger.
  • Escape closes a focused combobox; at the outer level, closes the hosting popover (discarding the draft when confirm + trigger are set).
Semantics and roles
  • Root wrapper. No landmark by default; wrap it in role="group" with a name.
  • Frequency and time zone. Select listboxes. The time zone value is an identifier and stays left-to-right.
  • Custom pane. A nested FlexBox with Combobox and selectors; each selector owns its own semantics.
  • Start / time / end controls. Each composes its own underlying @prepared911/ui primitive with its own roles and labels.
  • Apply / Reset. Native <button> via @prepared911/ui Button.
Focus management
Opening a popover-hosted picker should place focus inside the panel, on the first time field, so keyboard operators land in the form. Closing should restore focus to the trigger. Choosing Custom shows the custom panel in place of the main form; Back returns to it.
Screen reader announcements
The field announces draft summary changes with aria-live="polite". formatRecurrenceSummary is the same sentence for a chip beside the trigger.
Choosing Custom shows a heading and a Back control. The main form's live summary is not on screen during that edit. Back returns to the summary, which states the custom rule.
Known caveats
  • Motion. The field does not animate the custom panel into place. State transitions on the root use the package motion tokens, which drop movement when reduced motion is requested.
  • Sub-controls rely on their own accessibility contracts. Issues surfaced inside Combobox, Calendar, or Switch show up here, too: validate against those components' individual guidance.
  • Draft vs committed. When confirm is false, every sub-control change emits onValueChange. Surfaces that rely on draft-only behavior should always pair confirm with trigger.
  • Time zone is a select. The stored value is an IANA id. The option text shows the GMT offset at the start date and the city, such as GMT-4 (New York).
Previous
Event Recurrence Picker / API and Development
Next
Advanced Date Range Picker / Usage
On this page
Overview
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Focus management
Screen reader announcements
Known caveats