NumberField

From the Base UI reference for NumberField and the installed NumberFieldInput, NumberFieldRoot and useNumberFieldStepperButton. "From" says who does it. NumberField adds no keys.

The buttons stay out of the tab order and in the accessibility tree, as Base UI keeps them: a keyboard steps the number with the arrow keys on the input, which says so through its role description, and a touch screen reader, which has no arrow keys, reaches the buttons by swiping.

What axe won't catch, from the contract, each with how this component meets it:

• Everything the eye is told, the ear is told, for every shape each prop accepts: the label names the input, even hidden, with the optional mark inside it; the description and the error are the input's aria-describedby; an invalid field is aria-invalid and its error is words beside the red edge; each button's icon is aria-hidden and its name says what it does; a button the eye sees in the tertiary ink is aria-disabled for the ear, at a bound, read-only or disabled; the placeholder is never the name.
• Every landmark and named region has an accessible name: none here; Base UI's group is no landmark, and a group of fields is a Fieldset's to name.
• Every default label can be overridden: increaseLabel, decreaseLabel and numberFieldLabel override NumberField's three owned strings, and optionalLabel Field's.
• Every shape the type accepts renders, in every variant: label, description and error render a string, an element and a list alike, as Field's do; value renders a number and an empty box for null; a format with a unit or a percent sign renders inside the box; a long Danish compound wraps in the label, the description and the error, and a long number stays on one scrolling line in the box (CR-10).
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; the error is unmounted while the field is valid, and Base UI's hidden input is aria-hidden because the visible input is the control.
• Native semantics first: a native <input>, a native <label> and two native <button>s; Perron adds aria-label on the buttons and aria-roledescription on the input, each in place of Base UI's English, and Base UI adds role="group", aria-labelledby, aria-describedby, aria-invalid, aria-controls and aria-disabled.
• Focus moves in reading order and returns on close: the input is the field's one tab stop, between the label and description above it and the error below; a mouse press on a button leaves focus on the input; nothing opens or closes.
• Every target is at least size.target-min square: each button is a size.control square, 34 px; the box is size.input tall and as wide as its container.
• Loops stop when the system asks for less motion: none here; a held button repeats a step, which is no animation, and the box has no transition (CR-11).

The buttons' names are owned strings with the keys increase and decrease, in English "Increase" and "Decrease", set as each button's aria-label in place of Base UI's hard-coded English. Base UI names the buttons in English in every locale, so a Danish screen reader would hear "Increase", which the contract's Words forbids; "Increase" and "Decrease" are Base UI's own words, sentence case and plain, naming what the press does to the number whatever it stands for; and aria-label is how Base UI already names them, which expectOwnedStrings reads, where a VisuallyHidden span would first have to undo it.

The input's role description is an owned string, key numberField, in English "Number field", set as aria-roledescription in place of Base UI's hard-coded English rather than removed. Base UI sets aria-roledescription="Number field" in every locale, so a Danish screen reader would call the box a "Number field"; the description is what tells a screen reader user the arrow keys step it, since the buttons take no focus; and packages/perron/src/testing/owned-strings.ts reads no aria-roledescription today, so the build adds it to the attributes the check reads, with a test, or this word would pass the check in English on every screen (CR-9).

increase, decrease and numberField are new keys in packages/perron/src/locale/en.ts, each with a JSDoc line saying where it is heard, and agents write their Danish, Swedish and Norwegian in the other locale files. optional is the key it already has, Field's: NumberField passes optional and optionalLabel to Field, which reads it. Every other word is the caller's, through label, description, error, placeholder and the units a format writes, or Base UI's message for a failing check: the caller's validate result, or the browser's own message for the hidden input's required, min, max and step, Field's known exception, which applies here unchanged (Field). The number's digits, separators and signs hold no letter, so expectOwnedStrings passes them in every locale; a unit a format writes, such as "min", is the caller's word, given in the story's caller strings.

For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.