WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 2 months 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:
PR Number:

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 3 months ago.
47693.diff (350 bytes) - added by afercia 3 months ago.

Download all attachments as: .zip

Change History (12)

#1 @Hareesh Pillai
3 months ago

  • Focuses accessibility javascript administration added

#2 @SergeyBiryukov
3 months ago

  • Component changed from General to Customize

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


3 months ago

#4 @afercia
3 months 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
3 months ago

#5 @afercia
3 months 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
3 months 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
3 months ago

Thanks @afercia for resolving the problem.

#8 @afercia
3 months ago

Thank you @monikarao for catching this!

#9 @JeffPaul
2 months 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
2 months 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.