Fix: Preserve natural tab order in DataForm card layout validation#76839
Fix: Preserve natural tab order in DataForm card layout validation#76839Shekhar0109 wants to merge 2 commits intoWordPress:trunkfrom
Conversation
|
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.
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. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Hi, This PR doesn't do what it purports to do, doesn't fix the problem, and sidesteps the ongoing conversation on how to best approach it. I'll close this to keep contributors' efforts focused. |
What?
Fixes an issue where validation triggered on blur moves focus to the first invalid field, breaking the natural tab sequence in the DataForm card layout.
Closes #76832
Why?
reportValidity()automatically focuses the invalid input element. When validation runs on blur, this behavior hijacks the user's natural tab navigation and moves focus to the first invalid field instead of the next field in the tab order.How?
Call
reportValidity()only when the invalid input remains the active element by checking:inputElement.ownerDocument.activeElement === inputElement
This ensures the validation UI is still shown while preventing focus from being stolen during tab navigation.
Testing Instructions
Run Storybook locally:
npm run storybook:dev
Open the DataForm validation story:
DataViews → DataForm → Validation
Set the layout to card-collapsible.
Clear the Text field so it becomes invalid.
Click inside Textarea.
Press TAB.
Expected result:
Focus follows the natural tab order (Text → Textarea → Select / Password) instead of jumping back to the first invalid field.
Testing Instructions for Keyboard