Form and Checkbox: label markers stay with the last word

[JeanMarcMilletScality]

TL;DR — Form and Checkbox: a required field's *, an (optional) suffix and a label's help icon could each end up alone on a second line; all three now stay with the label's last word.

Context / Why

All three are annotations on the label's last word, and each is separated from it by something the line breaker is free to break at. Narrow the label column enough — a side panel, a container query — and the marker goes over on its own, reading as though it belongs to nothing.

🧩 Approach

Two different separators, so two fixes.

The text markers were joined with an ordinary space, which is a soft-wrap opportunity:

// before
{requireMode !== 'all' && required && ' *'}              // ←
{requireMode === 'all' && !required && ' (optional)'}    // ←

// after
{requireMode !== 'all' && required && '\u00a0*'}              // ←
{requireMode === 'all' && !required && '\u00a0(optional)'}    // ←

The help icon has no space of its own — helpIconReserve pads the end of the label's inline box and the icon sits back in that room, so it costs the last line nothing. What defeats it is a label that ends in a space: that leaves a break opportunity in front of the reserve, and the icon orphans anyway. So the label is trimmed before the reserve is applied, in both components that use it:

// after — Checkbox and FormGroup
{trimLabelEnd(label)}                                    // ←

A label built from a template literal picks up a trailing space easily — `${name} ${suffix}` with an empty suffix — which is how this shows up in practice rather than in theory. trimLabelEnd lives beside helpIconReserve, since it is part of that mechanism's contract rather than a general utility.

One consequence worth knowing about: toHaveAccessibleName does not normalise U+00A0 to a plain space, so the marker now reaches the accessible name as a non-breaking space. Screen readers announce it the same way, but an assertion written against 'User name *' will fail. The two existing marker tests in this repo are updated to expect it.

🔧 Usage

No API change. The only thing a consumer may need to touch is a test:

// before
expect(screen.getByRole('textbox')).toHaveAccessibleName('User name *');        // ←

// after
expect(screen.getByRole('textbox')).toHaveAccessibleName('User name\u00a0*');   // ←

🔍 Review focus

• 🟡 Moderate — form/Form.component.tsx › FormGroup — the non-breaking space is now part of the field's accessible name. Loud failure rather than silent (a consumer's assertion breaks at test time), but it is a contract change and the alternative — keeping a breakable space and accepting the orphan — is a real option to weigh.
• ⚪ Minor — iconhelper/IconHelper.tsx › trimLabelEnd — a new export, deliberately not added to the package barrel: it exists to be paired with helpIconReserve by the two components that use it.

🧪 How to test

1. npx jest src/lib/components/form src/lib/components/checkbox
2. By hand, in Storybook: open a form story with a required field and narrow the frame until the label wraps. The * should stay on the same line as the last word, at every width.
3. Render a Checkbox whose label ends in a space and which has a labelHelpTooltip. The ? icon should sit at the end of the label's last line, not below it.
4. Confirm the icon is still vertically aligned with that line's text — the misalignment reported alongside this was a consequence of the icon being on a line of its own.

Follow-up

• A label whose own text ends in a space is now silently trimmed. If a consumer is building labels by concatenation and relies on that space for spacing between the label and something it renders itself, that spacing is gone — no such call site is known in this repo.

🔗 References

• Form: keep a label's help icon on the label's last line #1198 — introduced helpIconReserve for the form label's help icon; this closes the trailing-space hole in it.
• Checkbox: keep the box on the label's first line when the label wraps #1199 — put labelHelpTooltip on Checkbox, which is the surface this was reported on.

---

🤖 Generated with Claude Code

[bert-e]

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
/after_pull_request	Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval	Bypass the pull request author's approval	⭐
/bypass_build_status	Bypass the build and test status	⭐
/bypass_commit_size	Bypass the check on the size of the changeset TBA	⭐
/bypass_incompatible_branch	Bypass the check on the source branch prefix	⭐
/bypass_jira_check	Bypass the Jira issue check	⭐
/bypass_peer_approval	Bypass the pull request peers' approval	⭐
/bypass_leader_approval	Bypass the pull request leaders' approval	⭐
/bypass_source_branch_lineage	Bypass the cross-branch contamination check	⭐
/approve	Instruct Bert-E that the author has approved the pull request.		✍️
/create_pull_requests	Allow the creation of integration pull requests.
/create_integration_branches	Allow the creation of integration branches.
/no_octopus	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity	Change review acceptance criteria from one reviewer at least to all reviewers
/wait	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
/help	Print Bert-E's manual in the pull request.
/status	Print Bert-E's current status in the pull request.
/clear	Remove all comments from Bert-E from the history TBA
/retry	Re-start a fresh build TBA
/build	Re-start a fresh build TBA
/force_reset	Delete integration branches & pull requests, and restart merge process from the beginning.
/reset	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @damiengillesscality

• @ChengYanJin

• @JeanMarcMilletScality

• @sanassicisse

• @JBWatenbergScality

• @hervedombya

• @PierreAlexandreDelgado

• @ZiyangLinScality

• @MonPote