Opened 22 months ago
Closed 20 months ago
#47693 closed defect (bug) (fixed)
customizer Color picker should get closed when click on color picker area.
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| 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)
Change History (12)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
21 months ago
#5
@
21 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.
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.