[mdeliatf]

Description

Fills the layout and a11y gaps in Field and RowLink that apps still work around today (follow-up to #5199 and #5200).

Field (Stitches and Vanilla Extract):

• labelPosition="start": the label and the hint go in a column before the control, and the control wraps under it when the space is short.
• hint: text under the label. The control is described by it.
• messageSize: the text size of the hint, the description and the error. An inner Field takes the size of the outer one.
• group: for more than one control. The Field becomes role="group", named by its label and described by its messages. Each control gets its own error with an inner Field.
• The label points to a control only when a control registers, or when the Field has an id. Before, a Field with only text gave its label a for to a missing id.
• In development, a second control in a Field without group logs a warning.
• Regular gaps: label, 4px, hint, 8px, control, 4px, message.

RowLink and Tr:

• overlay={false} on RowLink, or linkOverlay={false} on Tr: the link stays in its cell, with no overlay. So the tooltips on the text of the row work.
• A click anywhere else on the row opens the link. A middle click, or a click with Cmd, Ctrl or Shift, opens it in a new tab. Clicks on controls in the row, or from a portal, keep their own action.
• Fix: linkOverlay was missing from a useMemo dependency list in AriaTable.
• Only http: and https: links open in a new tab. Other links, such as tel: or mailto:, open as on a plain click, so a javascript: or data: URL never goes to window.open.

Small behavior changes, no code change needed:

• The description and the error of a Field are a little taller (lineHeight 1.4, before 1).
• The label gets its for once its control registers (after hydration with server rendering).
• A Field with two controls and without group logs a warning in development.

Dependency changes

None.

Breaking changes

None.

How to test?

1. Field / LabelStart: in a wide and a narrow window, the gaps are regular, in both themes.
2. Field / Group: type an uppercase letter in Host. Only Host shows an error, at the same size as the description.
3. AriaTable / Links and Table / Links, row 4 (sub-44):
   • the "Renewed" tooltip shows on hover;
   • a click on the row opens #sub-44;
   • a middle click or Cmd-click opens it in a new tab;
   • Tab gives a focus ring only around "sub-44".

Good PR checkboxes

• Change has been tested
• Added/Updated tests
• Added/Updated stories
• PR follows conventions
• Labels are set
• Project is linked

Good Review checkboxes

ℹ️ Copy the snippet and paste in the review field to fill it

- [ ] I've tested the changes
- [ ] I've agreed on the unit tests (soon to come)
- [ ] I've checked the stories
- [ ] I've read the code and understood it
- [ ] I don't have any more questions
- [ ] I've described any optional improvements
- [ ] I checked PR follows [conventions](https://github.com/traefik/faency#how-to-contribute)

[gndz07]

LGTM

[github-actions]

🎉 This PR is included in version 13.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀