Changeset 60482

Timestamp:

07/18/2025 03:09:49 AM (6 months ago)

Author:

joedolson

Message:

Customize: Fix keyboard a11y on back button.

Following [59224], the back button for section navigation was no longer keyboard navigable. This was caused by an accidental removal of scripts that conditionally handled the tabindex value of this control to make it focusable only when visible.

Fixes the issue by restoring code removed in [59224].

Props wildworks, poojapadamad, abcd95, ankitmaru, iamshashank, sourabhjain, joedolson.
Fixes #63011.

File:

• trunk/src/js/_enqueues/wp/customize/controls.js (modified) (5 diffs)

trunk/src/js/_enqueues/wp/customize/controls.js

@@ -1616 +1616 @@
                     expand = function() {
                         section._animateChangeExpanded( function() {
+                            backBtn.attr( 'tabindex', '0' );
                             backBtn.trigger( 'focus' );
                             content.css( 'top', '' );
@@ -1661 +1662 @@
                 }
                 section._animateChangeExpanded( function() {
-
+                    backBtn.attr( 'tabindex', '-1' );
                     sectionTitle.trigger( 'focus' );
                     content.css( 'top', '' );
@@ -2715 +2716 @@
                     expand = function() {
                         section._animateChangeExpanded( function() {
+                            backBtn.attr( 'tabindex', '0' );
                             backBtn.trigger( 'focus' );
                             content.css( 'top', '' );
@@ -2745 +2747 @@
                 }
                 section._animateChangeExpanded( function() {
-
+                    backBtn.attr( 'tabindex', '-1' );
                     sectionTitle.trigger( 'focus' );
                     content.css( 'top', '' );
@@ -2965 +2967 @@
                 } else {
                     panel._animateChangeExpanded( function() {
+                        backBtn.attr( 'tabindex', '0' );
                         backBtn.trigger( 'focus' );
                         accordionSection.css( 'top', '' );