Customize: Make Widgets reorder button a button

[obenland]

Spin off from #33260.

Let's adopt the way Menus handle the reorder button and aggregate styles in customize-controls.css.

[obenland]

Diff from #33260, props TomHarrigan, afercia

[obenland]

Patch might need some work.

[sanket.parmar]

Same way in Customize: Menu reorder link should be a button.

[sanket.parmar]

This patch also contain "Reorder" link as a button on Widget as well as Menu Customizer.

[afercia]

Refreshed patch. Now the "Reorder" and "Add a Widget" buttons should be functionally the same as the buttons in the Menus. There are some subtle differences in what should be hidden for assistive technologies.
Similar CSS rules are now aggregated and moved to customize-controls.css.
Simplified the reorder-toggle CSS selectors and rules.

Also, tried to improve some CSS comments as per the handbook CSS coding standards.
Fixed some mixed spaces/tabs.

Would appreciate some testing by the Customizer team :)

[ocean90]

33327.2.diff​

• str_replace() accepts arrays too: str_replace( array('[', ']' ), array( '-', '' ), $this->id );
• esc_attr__( 'Reorder' ), should get a context, probably the same as <?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?>

Otherwise this looks good, grunt precommit and unit tests are passing.

[afercia]

Replying to ocean90:

• str_replace() accepts arrays too

Thanks @ocean90 so it should be changed also in the render() method I guess, that's the place where I copied and pasted from :D

[afercia]

Refreshed patch. Uses arrays for str_replace() as per @ocean90 suggestion. No need for translation context, the value was wrong in the first place and now is "Reorder widgets" since it should match the initial aria-label value.

[afercia]

#33599 was marked as a duplicate.

[afercia]

The initial patch on this ticket included a fix for #33599 too. Leaving a note here to serve as a reminder to handle props to @metodiew for the initial patch on #33599.

[afercia]

In 35304:

Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.

For accessibility, UI controls should preferably be native controls. Adds
ARIA attributes and labels to improve accessibility and pair these buttons
with the ones in the Menu Customizer.

Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia.

Fixes #33327.

[westonruter]

In 35307:

Customizer: Introduce customize_loaded_components filter to allow core components to be disabled.

Also move style rule from customize-nav-menus.css to customize-controls.css so that widgets button is properly styled when nav_menus component is excluded from loading. See [35304]. See #33327.

Props westonruter, DrewAPicture.
Fixes #33552.

[ocean90]

#33812 was marked as a duplicate.

[celloexpressions]

#33746 was marked as a duplicate.