DataForm: Stop card and details validation from hijacking focus

[jorgefilipecosta]

Fixes #76832

On the card layout, validation runs on every blur inside the card, and reportValidity() moves focus to the first invalid field. So tabbing from one field to the next sends focus back to an unrelated field, breaking the natural tab sequence.

Following the discussion on the issue, this PR shows the errors of all the fields of a card when the card loses focus, instead of on each blur inside it. The errors are shown by dispatching a synthetic invalid event, so focus is never moved. Validated controls only replicate the native focus behavior for trusted events, so submitting a form still focuses the first error. The details layout gets the same treatment, and both announce how many fields need attention, given the errors now appear without moving focus.

The panel layout shares the same hook, so reopening a touched panel also shows its errors without moving focus.

Videos

Both videos run the same steps on the left and on the right. The title bar, the caption and the red ring around the focused field were added for the recording only.

DataForm Validation story, card layout — focus the Text field and press TAB without editing anything. Before, focus jumps to Password, the first field with errors. After, it goes to the Textarea, as expected.

_{Download the MP4}

Settings > Content Types > Add post type — click the Singular label and press TAB. Before, focus jumps back to Plural label and the whole card turns red. After, focus moves on to Post type key, and only the field that was left shows its error.

_{Download the MP4}

Testing Instructions

Go to http://localhost:50240/?path=/story/dataviews-dataform--validation and set the layout to card-collapsible.
Focus the Text field, press TAB, and verify focus moves to the Textarea instead of to the first field with errors.
Click outside the card and verify every invalid field shows its error and focus stays where you put it.
Collapse the card and verify the badge appears, expand it and verify the errors are still shown.

Then, with the Content Types experiment enabled, go to Settings > Content Types and click "Add post type".
Click the Singular label, press TAB, and verify focus moves to Post type key instead of back to Plural label.
Click outside the card and verify the fields you left show their errors without pulling focus back.

AI usage disclosure: fix and description drafted with AI assistance and reviewed by me.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: Shekhar0109 <shekh0109@git.wordpress.org>
Co-authored-by: NeosinneR <neosinner@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

@mirka should be the best person here to give feedback (I'm currently unable to dedicate much time to Gutenberg work)

[mirka]

I went ahead and added a story to document the pattern, if that's ok 🙏

[mirka]

Maybe this should be renamed to something like useRevealValidity since it's no longer tied to reportValidity.

[ntsekouras]

+1 to the rename.

[jorgefilipecosta]

The rename makes sense, the hook was renamed to useRevealValidity 👍

[mirka]

I feel like this is an enhancement?

[jorgefilipecosta]

You are right, it was moved to the enhancements section 👍

[ntsekouras]

Should we gate the speak with isOpen?

[jorgefilipecosta]

Good catch, the gate was added 👍

[jorgefilipecosta]

I went ahead and added a story to document the pattern, if that's ok 🙏

That's a great enhancement, thank you!

[jorgefilipecosta]

Thank you a lot @mirka, @ntsekouras for the reviews.