[TextField]: show one hint and one validation message together, validation message first #1000

Problem

A form field can show at most one hint and one validation message at the same time. The validation message is either an error or a success, and it comes first, then the hint. The two must not cancel each other out.

TextField doesn't follow this. helper accepts any number of feedback texts. They render in array order, so a hint can come before an error, and they sit side by side in a horizontal row.

Solution

1. Accept at most one hint and one validation message.
2. Render the validation message first, with the hint on its own line below it.
3. Link both texts through aria-describedby.
4. Mark the field invalid when the validation message is an error.
5. Decide whether the array form of helper stays as a deprecated alias. Removing it is a breaking change.

Examples and information

The rule applies to every form field, not only TextField. The file components get it in a separate issue.

Angular FileUpload implements the rule. Use it as the reference for order and layout.

DoD

• The component is developed using best practices, conventions, and modern frontend trends
• The component follows BEM naming conventions (if applicable)
• The component implementation matches the Figma design, including all defined states and interactions
• The component supports responsiveness and scales across breakpoints (if applicable)
• The component does not introduce runtime errors or warnings
• Linter passes
• The component is exported from its tier barrel
• The component has unit tests with at least 80% code coverage (enforced by the global Jest coverageThreshold over src/tedi/components, not per component)
• CodeCov passes its threshold (80% on the changed code, with 10% tolerance — a separate gate from the Jest one above)
• The component has passed code review
• The component has passed Chromatic visual review
• Storybook stories are created:
  • Cover all Figma variations
  • Include edge cases, empty/error states
• Component’s API (props, slots, events) is documented
• ZeroHeight is updated with design/development guidelines
• External dependencies used in the component are documented in Storybook and Zeroheight, with rationale
• Semantic commit format type(scope): Subject text #issue-ref is used (for semantic-release), with the issue reference required - see Commit convention
• External libraries comply with validated open source licenses
• Component is versioned correctly and ready for release if required
• Update the React development status on the statuses page in Zeroheight