WordPress.org

Make WordPress Core

Opened 3 years ago

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

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:

https://cldup.com/5g6XYBvIue.png

When using the keyboard to navigate, as soon as the "X" button receives focus, the images "disappear" (they are moved off-screen):

https://cldup.com/Zor9UgjUPP.png

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)

38156.diff (1.7 KB) - added by afercia 3 years ago.
38156.2.diff (2.9 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (10)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to celloexpressions
  • Status changed from new to assigned

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 by overflow: hidden. Needs a decision about the actual focus style, I'd defer this to @celloexpressions :)

#2 @celloexpressions
3 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.


3 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


3 years ago

@afercia
3 years ago

#6 @afercia
3 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:

https://cldup.com/ePuEMqUrD6.png

Suggested image when selected, before and after:

https://cldup.com/Tmjo3y8dkL.png

https://cldup.com/mm5fdd13_Z.png

#7 @celloexpressions
3 years ago

  • Owner changed from celloexpressions to afercia
  • Status changed from assigned to reviewing

Looks good to me @afercia!

#8 @afercia
3 years ago

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

In 38881:

Customize: Keep previously uploaded header images in place.

On the Header Image section, the previously uploaded images disappeared off-screen
when using the keyboard to navigate and the remove "X" button got keyboard focus.
Changing the off-screen CSS technique used for the "X" buttons fixes it.

  • improves the focus style on the previously uploaded and suggested images
  • removes a tabindex="0" attribute from the current header image

Fixes #38156.

Note: See TracTickets for help on using tickets.