id,summary,reporter,owner,description,type,status,priority,milestone,component,version,severity,resolution,keywords,cc,focuses 27403,Improve UI for linking areas of Customizer preview to corresponding controls (desktop and mobile),westonruter,westonruter,"Right now you may Shift+Click on a widget in the customizer preview and the corresponding widget area customizer section will expand, along with the corresponding widget control, and focus on the first field in that widget control. This is also available for nav menu items (#32681), and for any elements that are using selective refresh (#27355). [[Image(https://cldup.com/r9cTBdwm2b.png)]] (Props @afercia for image from #33251.) While there is a tooltip that appears when hovering over a widget, this can be difficult for a user to discover. An alternative would be for there to be an Edit button that appears when hovering over a widget within the preview. The challenge with this, however, is that it may be difficult to universally style this button so that it can appear properly in all themes. The tooltip and Shift+Click requires no UI. A simple click (without a modifier key) was problematic because it prevents common mouse-based interactions with widgets. Originally reported in: https://github.com/x-team/wp-widget-customizer/issues/78 For some alternative designs, see https://github.com/xwp/wp-widget-customizer/pull/16 Some experimentation has been done on WordPress.com in the Customizer for adding Edit buttons alongside widgets. Additionally, there is a fundamental issue with the shift+click feature: it is not mobile friendly since there is no ability to do this on a touch screen. The immediate equivalent feature for mobile I think would be a long press. On mobile, the preview fills the screen so if a widget, nav menu item, or other partial was long-pressed it could then flip over to the controls pane where the relevant control would be focused. The problem with shift-click on desktop is similar to the problem with long-press on mobile: there is no indication which elements can be edited so the user doesn't know where to try. And @afercia notes from duplicate ticket #33251: > By the way, the point is this feature is really hidden. The only chance users have to be informed about this is when by accident they hover on a widget and notice the title attribute. Not to mention touch devices, as far as I know, won't ever show this. There are no instructions or Help text that mention this, as far as I know. > > Considering also #24766 I'd recommend to don't rely on title attributes alone to convey such important information. It would be a nice, interesting, challenge trying to find a new design/UI pattern to be used instead of a title attribute. Call for designers :) > > Also, from an accessibility point of view, this UI control is not focusable and hardly usable for keyboard users and screen reader users. For more discussion, see: * @michaelarestad: https://wordpress.slack.com/archives/core-customize/p1449592641000150 * @melchoyce: https://wordpress.slack.com/archives/core-customize/p1445971129000160",enhancement,closed,high,4.7,Customize,3.9,normal,fixed,has-patch has-dev-note,,"ui, accessibility, javascript"