Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#33001 closed defect (bug) (fixed)

Customizer loads wp-a11y.js multiple times

Reported by: afercia's profile afercia Owned by: westonruter's profile westonruter
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: has-patch commit
Focuses: accessibility, javascript Cc:


Depending on the screen, the Customizer loads the wp-a11y.js script multiple times, thus creating multiple live regions. Given the way screen readers deal with live regions, which is very prone to inconsistencies, we should avoid having multiple live regions.

As far as I see, to load faster the Customizer uses the "customize loader" in 3 places:

  • in the Dashboard and for a good reason, see 22089
  • in the themes.php screen
  • in the update.php screen when updating a theme

in these screens, there will be 3 documents with 3 bodies so the live regions will be appended to each body: the main body, the "customize loader" iframe document body, and the Customizer preview iframe document body.

In the other screens, just 2 times: in the main body and in the Customizer preview iframe body.

Worth noting live regions are currently appended in the Dashboard, where they're unnecessary.

(please consider in the first screenshot I've edited the DOM representation in the console removing lots of stuff to make it shorter and fit in the screenshot)

To my understanding this is not caused by the Customizer itself and it's more related to the way wp-a11y.js is specified as dependency. Currently it's a dependency of 'customize-base' and 'customize-nav-menus'. For the other screens it's a dependency of 'theme' and 'updates'.
About the Customizer, maybe setting it as dependency at a later stage (e.g. 'customize-controls') would fix this. Would like to hear the opinion of someone more familiar with script dependencies than me though.

Attachments (2)

33001.diff (1.7 KB) - added by westonruter 9 years ago.
33001.2.diff (2.7 KB) - added by westonruter 9 years ago.

Download all attachments as: .zip

Change History (8)

#1 @obenland
9 years ago

Who is working on this?

#2 @westonruter
9 years ago

  • Owner set to westonruter
  • Status changed from new to accepted

9 years ago

#3 follow-up: @westonruter
9 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

@afercia: Good point on changing the script dependencies. There's no need for wp.a11y in the Customizer preview, so we can make wp-a11y a dependency of customize-controls, which is the shared dependency of customize-widgets and customize-nav-menus which are the two scripts that actually use this wp.a11y. I think it makes sense for the dependency to be added to customize-controls as opposed to those dependent scripts because wp.a11y will surely be used more in the core Customizer going forward. See 33001.diff and if good, add the commit keyword.

#4 in reply to: ↑ 3 @afercia
9 years ago

Replying to westonruter:

There's no need for wp.a11y in the Customizer preview

@westonruter thanks :) Yup, agree wp.a11y shouldn't ever be loaded in the preview iframe unless themes or plugins are using it. Just a quick question: I know the script loader won't load already enqueued scripts but maybe we should remove wp.a11y from customize-nav-menus too? Other than this, tested with ChromeVox and Firefox+NVDA and all works nicely.

9 years ago

#5 @westonruter
9 years ago

  • Keywords commit added; needs-testing removed

@afercia You're right. There's no need for that redundancy there, even though it won't have any effect. I've removed the additional dependency in 33001.2.diff.

#6 @westonruter
9 years ago

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

In 33321:

Customizer: Prevent wp-a11y from being needlessly enqueued in the customizer preview.

Reduces the number of live regions that screen readers have to deal with.

Fixes #33001.

Note: See TracTickets for help on using tickets.