InlineEdit

Role and semantics

While viewing, the value is plain text; the edit button is named like “Edit: Merchant name”. While editing, the input is named by the label with aria-label; an error is linked with aria-invalid and aria-describedby.

Keyboard

Key	Behaviour
Enter, Space	Open the field from the edit button.
Enter	Save in the field.
Escape	Drop the change in the field.
Tab	Move between the field, Save and Cancel.

Focus

When the field opens, focus moves to the input with the text selected; on close, focus returns to the edit button.

Screen reader output

Example	Output
Edit button	“Edit: Merchant name, button”
Field	“Merchant name, edit text, Sample Merchant”
Error	“invalid data, The name cannot be empty.”

Contrast

The value text has 4.5:1 contrast, and the empty text 4.5:1 with color-text-subtle.

WCAG 2.2

Criterion	How InlineEdit meets it	What the product team does
2.4.6 Headings and labels	The button and the field are named by the label.	Show the label visibly too.
3.3.1 Error identification	The error is linked to the field.	Say what to do in the error.
2.4.3 Focus order	Focus moves to the field on open and to the button on close.	-