WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 26 minutes ago

#47693 closed defect (bug) (fixed)

customizer Color picker should get closed when click on color picker area.

Reported by: monikarao Owned by: afercia
Milestone: 5.2.3 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch has-screenshots needs-testing fixed-major
Focuses: accessibility, administration Cc:

Description

Right now color picker is getting closed on outer click but it doesn't get close when clicking on color picker area.

To Reproduce open Color Picker then click on the right side of the picker. It will not close.

Video: https://cl.ly/d74656a6b9e7

Attachments (2)

color picker container.png (49.1 KB) - added by afercia 2 weeks ago.
47693.diff (350 bytes) - added by afercia 2 weeks ago.

Download all attachments as: .zip

Change History (12)

#1 @Hareesh Pillai
5 weeks ago

  • Focuses accessibility javascript administration added

#2 @SergeyBiryukov
5 weeks ago

  • Component changed from General to Customize

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


2 weeks ago

#4 @afercia
2 weeks ago

Discussed during today's weekly accessibility bug-scrub. Though not strictly related to accessibility, this appears as something to fix. To clarify, clicking on the area highlighted in blue in the screenshot below doesn't close the color picker.

@afercia
2 weeks ago

#5 @afercia
2 weeks ago

  • Focuses javascript removed
  • Keywords has-patch has-screenshots added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to afercia
  • Version changed from 5.2.2 to 4.9

There's some JavaScript to avoid the color picker closes when clicking within its container so this part is necessary.

However, the container shouldn't extend on the right edge. Instead, it should adapt its width to the color picker actual width. This appears to happen because of a typo introduced in [41329]: there's no element with a CSS class wp-picker-containers (note the s at the end). The selector in the color-picker.css stylesheet should be wp-picker-container so to apply display: inline-block; to the container.

47693.diff solves the problem for the area on the right. I'd tend to think clicking the area at the top (between the buttons / input field and the color picker) should still not close the picker. There's a very high chance for unintentional clicks on that crowded UI section and preventing inaccurate clicks from closing the picker seems the best option.

#6 @afercia
2 weeks ago

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

In 45722:

Customize: Make the color picker close when clicking on the empty area on the right.

Props monikarao.
Fixes #47693.

#7 @monikarao
2 weeks ago

Thanks @afercia for resolving the problem.

#8 @afercia
2 weeks ago

Thank you @monikarao for catching this!

#9 @JeffPaul
3 days ago

  • Keywords needs-testing fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch, also needs testing to validate if this ticket is good to land in 5.2.3.

#10 @SergeyBiryukov
26 minutes ago

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

In 45843:

Customize: Make the color picker close when clicking on the empty area on the right.

Props monikarao, afercia.
Merges [45722] to the 5.2 branch.
Fixes #47693.

Note: See TracTickets for help on using tickets.