The "drag to resize" button for the metabox container is placed after the metaboxes in focus order.

[joedolson]

Description

When using the new drag to resize handle on the metabox container, the position of the control is counter intuitive, because it's located in the DOM after the content. This means that the focus sequence is backwards from expectations, as a user has to tab forward to reach an object above their visible location.

See #64351

Step-by-step reproduction instructions

1. Enable custom fields in settings > preferences.
2. Place your tab cursor in the 'value' field.
3. Tab forward until focus lands on the resize drag button.

Screenshots, screen recording, code snippet

Environment info

• 6.7 RC nightly on 10/24
• Gutenberg 19.5

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[stokesman]

Thanks for opening this. I tried to include a fix for this in #65466 but it complicated things so we left it out. A related PR is #65637 which would be required to fix this while still using the ResizableBox component and it would also enable fixing other instances where that component also causes focus order issues. Alternatively, I’ve opened up #66735 which fixes the issue by not using that component.