Opened 8 years ago
Closed 8 years ago
#38156 closed defect (bug) (fixed)
Customizer Previously uploaded header images disappear on focus
Reported by: | afercia | Owned by: | afercia |
---|---|---|---|
Milestone: | 4.7 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Customize | Keywords: | has-screenshots has-patch commit |
Focuses: | ui, accessibility | Cc: |
Description
The Customizer "Header Image" panel displays the previously uploaded images inside button elements, and each image is paired with an "X" button to remove the image:
When using the keyboard to navigate, as soon as the "X" button receives focus, the images "disappear" (they are moved off-screen):
Additionally, for better accessibility, I'd propose two small improvements:
- move the "X" button after the image:in a linearised navigation process makes sense to get first the image and then the remove button
- the images would need some focus style (webkit browsers will show their native focus style but other browsers won't show any style), while I guess the "X" button focus style is not necessary since they appear on focus
Attachments (2)
Change History (10)
#1
@
8 years ago
- Keywords has-patch added
- Milestone changed from Awaiting Review to 4.7
- Owner set to celloexpressions
- Status changed from new to assigned
#2
@
8 years ago
- Keywords needs-patch added; has-patch removed
Hmm, yeah I don't think overflow: hidden
will work. This is actually likely to be completely rewritten in 4.7 anyway if video headers for Twenty Seventeen happen in core, so let's see whether #36581 happens first.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
8 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
8 years ago
#6
@
8 years ago
- Keywords has-patch commit added; needs-patch removed
Refreshed patch. Seems #36581 is set to Future Release so I'd propose to fix the disappearing images and improve the focus styles in this ticket. /cc @celloexpressions
- images are now moved off-screen to the left
- improves the focus style on the previously uploaded images
- improves the focus style on the remove images button
- improves the focus style on the Suggested image
Screenshots:
Suggested image when selected, before and after:
The proposed patch avoids to use
overflow: hidden
on the images container: if the focus style is going to be some outline or box-shadow around the images, it would be cut-off byoverflow: hidden
. Needs a decision about the actual focus style, I'd defer this to @celloexpressions :)