[ {"name": "a plain textarea: five rows, submitted under its id", "args": [{"id": "more-detail", "label": "Can you provide more detail?"}], "expect": "
"}, {"name": "a hint, a name of its own, rows, autocomplete and no spell check", "args": [{"id": "address", "name": "homeAddress", "label": "Address", "hint": "Include your postcode", "rows": 8, "autoComplete": "street-address", "spellCheck": false}], "expect": "
Include your postcode
"}, {"name": "an error marks the textarea invalid; a controlled value is its escaped text", "args": [{"id": "why", "label": "Why?", "error": "Enter why you are applying", "value": "Because & "}], "expect": "

Error: Enter why you are applying

"}, {"name": "required and disabled, with three rows", "args": [{"id": "r", "label": "Reason", "required": true, "disabled": true, "rows": 3}], "expect": "
"}, {"name": "a character count: the message follows the textarea, describes it and is a live region", "args": [{"id": "detail", "label": "Detail", "maxLength": 200}], "expect": "
You have 200 characters remaining
"}, {"name": "an uncontrolled default value is counted", "args": [{"id": "d", "label": "Detail", "maxLength": 10, "defaultValue": "Hello"}], "expect": "
You have 5 characters remaining
"}, {"name": "over the limit: the box is styled in error but not aria-invalid, and nothing is cut off", "args": [{"id": "d", "label": "Detail", "maxLength": 5, "value": "abcdefgh"}], "expect": "
You have 3 characters too many
"}, {"name": "a word count with a hint, an error and a class: described by hint, error, then the count", "args": [{"id": "s", "label": "Summary", "hint": "Keep it short", "error": "Summary must be 3 words or fewer", "maxWords": 3, "value": "one two three four", "className": "wide"}], "expect": "
Keep it short

Error: Summary must be 3 words or fewer

You have 1 word too many
"}, {"name": "one word left is singular", "args": [{"id": "w", "label": "Title", "maxWords": 3, "value": "one two"}], "expect": "
You have 1 word remaining
"}, {"name": "below the threshold the message is there but hidden", "args": [{"id": "t", "label": "Notes", "maxLength": 20, "threshold": 75, "defaultValue": "abcdefghij"}], "expect": "
"}, {"name": "at the threshold the message shows", "args": [{"id": "t", "label": "Notes", "maxLength": 20, "threshold": 75, "defaultValue": "abcdefghijklmno"}], "expect": "
You have 5 characters remaining
"}, {"name": "emoji count once each, so three fill a limit of three", "args": [{"id": "e", "label": "Mood", "maxLength": 3, "value": "😀😀😀"}], "expect": "
You have 0 characters remaining
"}, {"name": "characters and words together are refused", "args": [{"id": "x", "label": "X", "maxLength": 10, "maxWords": 2}], "expectError": "a textarea counts characters or words, not both"}, {"name": "a threshold without a limit is refused", "args": [{"id": "x", "label": "X", "threshold": 50}], "expectError": "a threshold needs a limit"}, {"name": "a limit of 0 is refused", "args": [{"id": "x", "label": "X", "maxLength": 0}], "expectError": "limit must be a whole number of at least 1"}, {"name": "an id with a space is refused", "args": [{"id": "more detail", "label": "More detail"}], "expectError": "a field id cannot contain spaces"} ]