Changeset 59224 for trunk/src/js/_enqueues/wp/customize/controls.js

Timestamp:

10/13/2024 07:07:06 PM (14 months ago)

Author:

joedolson

Message:

Administration: A11y: Fix accordion accessibility.

Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing :focus states, using a button element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern.

Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson.
Fixes #42002.

File:

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

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

@@ -1531 +1531 @@
 
             // Expand/Collapse accordion sections on click.
-            section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
+            section.container.find( '.accordion-section-title button, .customize-section-back' ).on( 'click keydown', function( event ) {
                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                     return;
@@ -1606 +1606 @@
                 overlay = section.headContainer.closest( '.wp-full-overlay' ),
                 backBtn = content.find( '.customize-section-back' ),
-                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
+                sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
                 expand, panel;
 
@@ -1616 +1616 @@
                     expand = function() {
                         section._animateChangeExpanded( function() {
-                            sectionTitle.attr( 'tabindex', '-1' );
-                            backBtn.attr( 'tabindex', '0' );
-
                             backBtn.trigger( 'focus' );
                             content.css( 'top', '' );
@@ -1664 +1661 @@
                 }
                 section._animateChangeExpanded( function() {
-                    backBtn.attr( 'tabindex', '-1' );
-                    sectionTitle.attr( 'tabindex', '0' );
 
                     sectionTitle.trigger( 'focus' );
@@ -2700 +2695 @@
                 content = section.contentContainer,
                 backBtn = content.find( '.customize-section-back' ),
-                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
+                sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
                 body = $( document.body ),
                 expand, panel;
@@ -2720 +2715 @@
                     expand = function() {
                         section._animateChangeExpanded( function() {
-                            sectionTitle.attr( 'tabindex', '-1' );
-                            backBtn.attr( 'tabindex', '0' );
-
                             backBtn.trigger( 'focus' );
                             content.css( 'top', '' );
@@ -2753 +2745 @@
                 }
                 section._animateChangeExpanded( function() {
-                    backBtn.attr( 'tabindex', '-1' );
-                    sectionTitle.attr( 'tabindex', '0' );
 
                     sectionTitle.trigger( 'focus' );
@@ -2844 +2834 @@
 
             // Expand/Collapse accordion sections on click.
-            panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
+            panel.headContainer.find( '.accordion-section-title button' ).on( 'click keydown', function( event ) {
                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                     return;
@@ -2948 +2938 @@
                 overlay = accordionSection.closest( '.wp-full-overlay' ),
                 container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
-                topPanel = panel.headContainer.find( '.accordion-section-title' ),
+                topPanel = panel.headContainer.find( '.accordion-section-title button' ),
                 backBtn = accordionSection.find( '.customize-panel-back' ),
                 childSections = panel.sections(),
@@ -2975 +2965 @@
                 } else {
                     panel._animateChangeExpanded( function() {
-                        topPanel.attr( 'tabindex', '-1' );
-                        backBtn.attr( 'tabindex', '0' );
-
                         backBtn.trigger( 'focus' );
                         accordionSection.css( 'top', '' );
@@ -2997 +2984 @@
                 if ( ! skipTransition ) {
                     panel._animateChangeExpanded( function() {
-                        topPanel.attr( 'tabindex', '0' );
-                        backBtn.attr( 'tabindex', '-1' );
 
                         topPanel.focus();