WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33599 closed defect (bug) (duplicate)

Customize: Make the Add a Widget button a button

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

Description

For semantics, accessibility and consistency with the Menu Customizer, the "Add a Widget" button should be a button element. See: https://core.trac.wordpress.org/ticket/33260#comment:30

we should switch it to a <button> element and move it into customize-controls.css.

Related: #33260 and #33327

Attachments (2)

33599.diff (2.6 KB) - added by metodiew 4 years ago.
I'm not sure if the CSS was moved properly. Also not sure if we need a context for the button i18n, so critics and suggestions are very welcomed :)
33599.patch (7.7 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
4 years ago

  • Summary changed from Customizef: Make the Add a Widget button a button to Customize: Make the Add a Widget button a button

#2 @afercia
4 years ago

Thanks for fixing the typo Sergey, you beat me to it for a few seconds :)

@metodiew
4 years ago

I'm not sure if the CSS was moved properly. Also not sure if we need a context for the button i18n, so critics and suggestions are very welcomed :)

#3 @afercia
4 years ago

There are a few more things to do here. The buttons: "Add a Widget", "Add a Menu" and "Add Items" are very, very, similar and should basically have the same CSS rules.
Same for the HTML part, but here there's no need for an aria-label attribute to better specify the button's purpose. Also, no more need for tabindex.
About the JavaScript part, buttons don't need a keydown event. We should handle the aria-expanded attribute and set proper attributes when the UI is in "reordering" mode, as done in the Menu Customizer.

@afercia
4 years ago

#4 @afercia
4 years ago

  • Keywords has-patch added

First pass with a more complete approach.

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


4 years ago

#6 @SergeyBiryukov
4 years ago

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

#7 @afercia
4 years ago

This ticket kinds of overlaps #33327 where the initial patch already took care of the "Add a widget" button too. It's basically a duplicate :) Just refreshed patch on #33327 and would propose to close this one.

#8 @afercia
4 years ago

  • Keywords close added

#9 @afercia
4 years ago

  • Milestone 4.4 deleted
  • Resolution set to duplicate
  • Status changed from assigned to closed

Closing as duplicate of #33327. Will handle props in that ticket.

Note: See TracTickets for help on using tickets.