Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#29289 closed defect (bug) (fixed)

Keyboard focus on the header and background settings screens

Reported by: johnbillion's profile johnbillion Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 4.1 Priority: normal
Severity: normal Version: 2.1
Component: Customize Keywords: has-patch
Focuses: accessibility, administration Cc:


On the 'Appearance -> Header' and 'Appearance -> Background' screens, there are two oddities when using the keyboard to tab around.

  • The site title in the header preview is focusable, but it shouldn't be
  • The 'Choose Image' button is not focusable so it's not possible to choose an existing image using keyboard navigation

Attachments (1)

29289.diff (1.8 KB) - added by florianziegler 9 years ago.

Download all attachments as: .zip

Change History (8)

9 years ago

#1 @florianziegler
9 years ago

Add href and tabindex attributes

  • Add href attribute to "choose image" links to make them focusable.
  • Add tabindex attribute and set it to -1 for preview link so it is not focusable.
Last edited 9 years ago by florianziegler (previous) (diff)

#2 @florianziegler
9 years ago

  • Keywords has-patch dev-feedback added

#3 @obenland
9 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to 4.1
  • Version set to 2.1

Patch tested and works.
I also ran it by davidakennedy for the way how it is implemented and he checked off on it.

FWIW, if there is only one custom header uploaded, it is not possible to keyboard-select that custom header. This might just be a defect with single radio buttons though, not sure.

#4 @florianziegler
9 years ago

Keyboard selection of (only) one custom header works for me. (Tested with the latest Chrome, Firefox and Safari.)

Am I missing something?

#5 @SergeyBiryukov
9 years ago

  • Component changed from Administration to Customize
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#6 @ocean90
9 years ago

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

In 30327:

Improve keyboard accessibility on Custom Header and Custom Background screen.

props florianziegler.
fixes #29289.

#7 @ocean90
9 years ago

In 30351:

Change Twenty Eleven's header preview callback too, missed in [30327].

see #29289.

Note: See TracTickets for help on using tickets.