Components

Input

Inputs take a short line of text. In Flint, an input always lives in a form field with a visible label, optional helper text and an error message.

Keyboard

Key	What it does
`Tab`	Moves focus into the input. The edge turns to the focus color and the focus ring shows.
`Typing`	Enters text.

Screen readers

Tie the label to the input with for and id.
Point aria-describedby at the helper text, and at the error message when there is one.
Set aria-invalid="true" on an input with an error.
On submit with errors, move focus to the first errored field. Announce a summary with role="alert".

Contrast

Input text: 14.63:1 light, 11.21:1 dark (needs 7:1).
Input placeholder: 10.35:1 light, 8.60:1 dark (needs 7:1).
Input edge: 4.76:1 light, 3.77:1 dark (needs 3:1).
Input hover edge: 7.58:1 light, 6.84:1 dark (needs 3:1).
Input focus edge: 7.82:1 light, 6.80:1 dark (needs 3:1).
Input error edge: 4.83:1 light, 6.25:1 dark (needs 3:1).
Focus ring on page: 7.47:1 light, 7.44:1 dark (needs 3:1).
Focus ring on default: 7.82:1 light, 6.80:1 dark (needs 3:1).

Target size

Inputs are 40px tall (control.md). On iOS, at least 44pt.

The test for every component: can someone finish the task with a keyboard alone, and with VoiceOver or NVDA alone?