Customizer: Widgets 'Reorder' and 'Add a widget' buttons visual order and DOM order mismatch

[afercia]

In the Customizer > Widgets panel, the visual order and DOM order of the two buttons 'Reorder' and 'Add a widget' mismatches.

• 'Add a widget' is first in the DOM but visually after 'Reorder'.
• 'Reorder' is second in the DOM but visually before 'Add a widget'.

For keyboard users, visual and DOM order must match,

The two buttons also look a little misaligned.

A similar problem occurs in the Menus panel. The CSS is different though. In the Menus, there is a flex container that uses `flex-direction: row-reverse'. That is going to be fixed in ​https://github.com/WordPress/wordpress-develop/pull/13129

Instead, in the Widgets panel the buttons use floats. For consistency and better alignment, it would be good to add a flex container as done for Menus.

To reproduce:

• Install and activate the Classic Widgets plugin.
• Activate Twenty Twenty-One to have access to the Customizer.
• Go to Appearance > Customize > Widgets
• Observe the two buttons are misaligned.
• Use the Tab key to navigate the UI.
• Observe the focus lands first on the button on the right and then on the button on the left.

In the Customizer's Widgets panel, the "Add a Widget" and "Reorder" buttons are laid out with CSS floats, so their DOM order (Add, then Reorder) doesn't match their visual order (Reorder, then Add); this breaks keyboard tab order, and the buttons also sit slightly out of vertical alignment.

WP_Widget_Area_Customize_Control::render_content() now wraps both buttons in a .customize-control-widgets-buttons container and outputs Reorder before Add a Widget, matching the visual order; a new flex rule in customize-controls.css replaces the floats, right-aligning and vertically centering the pair the same way the Menus panel does.

The equivalent Menus buttons have the same float-based mismatch, but that's already covered by a separate ticket and PR, so this change is limited to the Widgets panel.

Trac ticket: https://core.trac.wordpress.org/ticket/65902

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: implementing the CSS/markup fix and verifying the DOM/visual order and button alignment against the running Customizer. All changes were reviewed and validated by me.

Nice PR, thank you. Just needs a few minor adjustments to the CSS.

Both done. Added gap: 8px to match the Nav menus buttons, and removed float: right from .add-new-widget/.add-new-menu-item and .reorder-toggle. I also reduced the add buttons' margin: 0 0 0 10px to margin: 0, since that margin only existed for the floats — with it in place the Nav menus buttons were actually 18px apart (10px margin + 8px gap), so both panels now sit at a real 8px.

[afercia]

In 63332:

Customize: Fix visual and DOM order mismatch of the Widgets panel buttons.

In the Customizer > Widgets panel, the visual order of the 'Reorder' and 'Add a Widget' buttons didn't match the DOM order. For accessibility, the visual order and DOM order must match when they impact tab sequence, interaction, and meaning. Also, improves the alignment of the buttons.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13135

Props khokansardar, joedolson, afercia.
Fixes #65902.

[sabernhardt]

The container will need flex-wrap: wrap for long translations, including Greek and Tamil, and in case someone adds another element there.

[afercia]

In 63335:

Customize: Take into account longer translations for the Widgets panel buttons.

Amends [63332].
Allows buttons to wrap when longer translations may cause them to overflow the panel width.

Props sabernhardt, afercia.
Fixes #65902.