[wp-trac] [WordPress Trac] #27403: Improve UI for linking areas of Customizer preview to corresponding controls (desktop and mobile)

[WordPress Trac]

#27403: Improve UI for linking areas of Customizer preview to corresponding
controls (desktop and mobile)
-------------------------+--------------------------------------------
 Reporter:  westonruter  |       Owner:  sirbrilling
     Type:  enhancement  |      Status:  assigned
 Priority:  normal       |   Milestone:  4.7
Component:  Customize    |     Version:  3.9
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:  ui, accessibility, javascript
-------------------------+--------------------------------------------

Comment (by sirbrillig):

 > And actually, if we switch to using dashicons, the button could be left-
 floated with 0 width and relative positioning and :before could be
 positioned absolutely relative to that, with a negative left.

 Oh, that is clever! Thank you for providing a path out of my pit of
 confusion.

 I'm attaching a patch that makes use of that technique, with two issues
 that I'm aware of:

 1. The positioning needs to be adjusted for some elements but not others.
 Some elements (eg: sidebar widgets) already have the icon to the far left,
 where others have the icon overlapping the content itself (eg: site
 title). If the icon moves left globally, it will be nicely positioned for
 the latter but the former will be off the screen. We probably just need a
 contextual check to be sure icons are not off-screen.
 2. I had to use Genericons rather than Dashicons because Dashicons doesn't
 seem to be available in the preview (?)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27403#comment:73>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform