TimeField

Role and semantics

The segments sit in a role="group" named by the label. Each segment is a spinbutton: named “Time, minute”, its value read from aria-valuenow, or “empty”. Limits are reported with aria-valuemin and aria-valuemax. Segments open the numeric keypad on touch devices. The clock icon has aria-hidden.

Keyboard

Key	Behaviour
Tab	Hour, minute and second in turn.
Digits	Fill the segment and move on when full.
Up and down arrow	Change the segment, wrapping at the ends.
Left and right arrow	Previous or next segment.
Backspace, Delete	Clear the segment; go back from an empty one.
: or .	Moves to the next segment.

Focus

The focused segment shows the primary fill; the whole box gets the focus ring.

Screen reader output

Example	Output
Hour segment	“Time, hour, 9, spin button”
Empty minute	“Time, minute, empty”
Out of range	“Enter a time from 08:00 to 18:00”

Contrast

Segment text and the placeholder have 4.5:1; the focused segment on the primary fill has 4.5:1.

WCAG 2.2

Criterion	How TimeField meets it	What product teams must do
1.3.1 Info and relationships	A named group and named segments.	—
2.1.1 Keyboard	Typed and arrow entry.	—
3.3.1 Error identification	Out-of-range times get a built-in message.	Write other rules with error.
3.3.2 Labels or instructions	Placeholders show the format.	State the time zone when needed.