Make WordPress Core

Opened 3 weeks ago

Closed 5 days ago

#42027 closed defect (bug) (fixed)

Customize: changeset Publish button and panel focus management

Reported by: afercia Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: trunk
Component: Customize Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, javascript Cc:


The new Customiser changeset feature introduces a publish button with a coupled "cog" button and an expandable panel:


There are 2 relevant accessibility issues here, related to focus management:

  • the Publish and "cog" buttons focus style relies just on a color change and it's barely perceivable; there should be a clear indication of focus, made with a shape and not just color
  • when clicking the "cog" button, the related panel expands on the right; however, the panel is placed in the source after the site preview; when using a keyboard to navigate content, this makes very difficult to even understand what is going on and requires potentially dozens of Tab key presses to actually reach the panel. As done for other panels (available menu items, available widgets) focus should be managed programmatically and moved to the expanded panel. When tabbing away from the panel or closing it, keyboard navigation should be moved back to the sidebar.

Note: Ideally, the expanded panel should be placed in the source immediately after the controls that opens it. I guess this is not possible right now, due to technical limitation of the current Customizer implementation. If so, the only option left is managing focus programmatically.

Change History (11)

#1 @westonruter
2 weeks ago

  • Owner set to sayedwp
  • Status changed from new to assigned

(This can be fixed after Beta1 to give priority to enhancements and new features first before deadline.)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 days ago

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

9 days ago

#5 @westonruter
9 days ago

  • Keywords has-patch commit added; needs-patch removed
  • Owner changed from sayedwp to westonruter
  • Status changed from assigned to accepted

#6 @westonruter
9 days ago

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

In 41802:

Customize: Improve keyboard accessibility for publish settings section.

Props sayedwp.
See #39896.
Fixes #42027.

#7 @sayedwp
6 days ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.

5 days ago

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.

5 days ago

#11 @westonruter
5 days ago

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

In 41860:

Customize: Fix positioning of device-previewed window when publish settings are open.

  • Update date control padding.
  • Collapse publish settings section when opening panes for available widgets or nav menus.
  • Remove save and cog buttons in mobile preview only mode.
  • Move definition of wp.customize.previewedDevice to wp.customize.state('previewedDevice') for centralization, maintaining old alias.
  • Remove unused CSS because the section is inside form now.

Props sayedwp, westonruter.
See #39896.
Fixes #42027, #42199.

Note: See TracTickets for help on using tickets.