Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 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 10 years ago.

Download all attachments as: .zip

Change History (8)

#1 @florianziegler
10 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 10 years ago by florianziegler (previous) (diff)

#2 @florianziegler
10 years ago

  • Keywords has-patch dev-feedback added

#3 @obenland
10 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
10 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
10 years ago

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

#6 @ocean90
10 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
10 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.