Customizer: Menus: it is far too easy to mistakenly delete a menu because the "Delete Menu" link and the "Add Items" button are too close together

[designsimply]

This came up in WordPress.com support. /hat tip @Droyal for reporting the issue.

Steps to reproduce:

1. Go to Customize > Menus.
2. Click on any menu to view details.
3. Click on the empty space below the "Add Items" button.

Result: the menu is deleted without warning because the "Delete Menu" link spans the entire column which puts it in very close proximity to the "Add Items" button.

Video: ​46s

^{Seen at ​http://alittletestblog.com/wp-admin/customize.php?return=%2Fwp-admin%2Fplugins.php&changeset_uuid=6b3d1591-9d2a-419d-a906-603da35edcf8 using Firefox 53.0.3 on Mac OS X 10.12.5 on a site hosted at WP Engine running WordPress 4.9-alpha-40885 via WordPress Beta Tester 1.1.2 and Jetpack 5.1-beta-12056-d2530de-master via Jetpack Beta Tester 2.0.3.}

[lancewillett]

Great find — usability thing that anyone could run into.

[afercia]

Seems to me the click event is bound to the <span> element surrounding "Delete Menu" and the span takes all the available width. Looks like this is the reason why the empty space is "clickable".

While the menu isn't really deleted until you save the changes (I've just closed and reopened the Customizer and the deleted menu reappeared), worth considering that any action that is destructive or perceived as such by users should preferably ask for a confirmation.

[melchoyce]

Great find. Can we switch the click event to the <button> instead of the <span>?

[afercia]

@melchoyce seems the change of the targeted element from the button to the span was intentional and there are other considerations involved, see [40396]. Other changes followed that but seems they're unrelated. So, I think the best person to ask to is: @westonruter :)

[westonruter]

There's no good reason for not having a more specific selector for the click handler.

[westonruter]

Found another defect missed in [40396] and that is if the item addition panel is open, if you click the Delete Menu button it is not resulting in it being closed. This is due to the event.stopPropagation() in the click handler, which I believe is superfluous when the feature was first introduced in [32806]. Fixed in 40981.1.diff​.

[westonruter]

#41040 was marked as a duplicate.

[westonruter]

I'll commit this today unless someone tests and finds a problem.

[westonruter]

In 41020:

Customize: Restrict click target of menu deletion, moving to button from its container.

Props westonruter, afercia.
Fixes #40981.

[westonruter]

Re-opening for 4.8.1 release.

[westonruter]

In 41057:

Customize: Restrict click target of menu deletion, moving to button from its container.

Merges [41020] onto 4.8 branch.
Props westonruter, afercia.
Fixes #40981 for 4.8.1.