WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#33327 closed defect (bug) (fixed)

Customize: Make Widgets reorder button a button

Reported by: obenland Owned by: afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: ui, accessibility, javascript Cc:

Description

Spin off from #33260.

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

Attachments (4)

33327.diff (4.5 KB) - added by obenland 5 years ago.
Diff from #33260, props TomHarrigan, afercia
33327.patch (1.8 KB) - added by sanket.parmar 5 years ago.
This patch also contain "Reorder" link as a button on Widget as well as Menu Customizer.
33327.2.diff (12.2 KB) - added by afercia 5 years ago.
33327.3.diff (12.7 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (23)

@obenland
5 years ago

Diff from #33260, props TomHarrigan, afercia

#1 @obenland
5 years ago

Patch might need some work.

#2 @obenland
5 years ago

  • Milestone changed from Future Release to 4.4

#3 @afercia
5 years ago

  • Focuses ui accessibility javascript added

#4 @sanket.parmar
5 years ago

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

@sanket.parmar
5 years ago

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

#5 @joedolson
5 years ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core by sergey. View the logs.


5 years ago

#7 @SergeyBiryukov
5 years ago

  • Owner set to afercia
  • Status changed from new to assigned

@afercia
5 years ago

#8 @afercia
5 years ago

  • Version set to 4.3

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 :)

This ticket was mentioned in Slack in #core by afercia. View the logs.


5 years ago

#10 follow-up: @ocean90
5 years ago

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.

#11 in reply to: ↑ 10 @afercia
5 years ago

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
5 years ago

#12 @afercia
5 years ago

  • Keywords commit added

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.

#13 @afercia
5 years ago

#33599 was marked as a duplicate.

#14 @afercia
5 years ago

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.

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


5 years ago

#16 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#17 @westonruter
5 years ago

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.

#18 @ocean90
5 years ago

#33812 was marked as a duplicate.

#19 @celloexpressions
4 years ago

#33746 was marked as a duplicate.

Note: See TracTickets for help on using tickets.