Changeset 60040

Timestamp:

03/18/2025 02:39:38 PM (18 months ago)

Author:

joedolson

Message:

Bundled Themes: A11y: Dismiss submenus with esc in Twenty Twenty.

Allow submenus in Twenty Twenty to be dismissed using the esc key to meet WCAG 1.4.13. Set focus to previous submenu parent on esc, and ensure that after escaping the last submenu, tab moves to the next parent item, not back into the submenu.

Props lcarevic, rcreators, pratiklondhe, poena, karmatosed, chaion07, audrasjb, mehdi01, mohonchandra, najmulsaju, saurabhdhariwal, ugyensupport, shailu25.
Fixes #49950.

Location:

trunk/src/wp-content/themes/twentytwenty

Files:

• assets/js/index.js (modified) (1 diff)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -439 +439 @@
                 links = menu.getElementsByTagName( 'a' );
 
-                // Each time a menu link is focused or blurred, toggle focus.
+                // Each time a menu link is focused, update focus.
                 for ( i = 0, len = links.length; i < len; i++ ) {
-                        links[i].addEventListener( 'focus', toggleFocus, true );
-                        links[i].addEventListener( 'blur', toggleFocus, true );
-                }
-
-                //Sets or removes the .focus class on an element.
-                function toggleFocus() {
+                        links[i].addEventListener( 'focus', updateFocus, true );
+                }
+
+                menu.addEventListener( 'focusout', removeFocus, true );
+
+                // Remove focus classes from menu.
+                function removeFocus(e){
+                        const leavingMenu = ! menu.contains( e.relatedTarget );
+
+                        if ( leavingMenu ) {
+                                // Remove focus from all li elements of primary-menu.
+                                menu.querySelectorAll( 'li' ).forEach( function( el ) {
+                                        if ( el.classList.contains( 'focus' ) ) {
+                                                el.classList.remove( 'focus', 'closed' );
+                                        }
+                                });
+                        }
+                }
+
+                // Update focus class on an element.
+                function updateFocus() {
                         var self = this;
 
-                        // Move up through the ancestors of the current link until we hit .primary-menu.
-                        while ( -1 === self.className.indexOf( 'primary-menu' ) ) {
-                                // On li elements toggle the class .focus.
-                                if ( 'li' === self.tagName.toLowerCase() ) {
-                                        if ( -1 !== self.className.indexOf( 'focus' ) ) {
-                                                self.className = self.className.replace( ' focus', '' );
+                        // Remove focus from all li elements of primary-menu.
+                        menu.querySelectorAll( 'li' ).forEach( function( el ){
+                                if ( el.classList.contains( 'closed' ) ) {
+                                        el.classList.remove( 'closed' );
+                                }
+                                if ( el.classList.contains( 'focus' ) ) {
+                                        el.classList.remove( 'focus' );
+                                }
+                        });
+                        
+                        // Set focus on current `a` element's parent `li`.
+                        self.parentElement.classList.add( 'focus' );
+                        // If current element is inside sub-menu find main parent li and add focus.
+                        if ( self.closest( '.menu-item-has-children' ) ) {
+                                twentytwentyFindParents( self, 'li.menu-item-has-children' ).forEach( function( element ) {
+                                        element.classList.add( 'focus' );
+                                });
+                        }
+                }
+
+                // When the `esc` key is pressed while in menu, move focus up one level.
+                menu.addEventListener( 'keydown', removeFocusEsc, true );
+
+                // Remove focus when `esc` key pressed.
+                function removeFocusEsc( e ) {
+                        e = e || window.event;
+                        var isEscape = false,
+                                focusedElement = e.target;
+
+                        // Find if pressed key is `esc`.
+                        if ( 'key' in e ) {
+                                isEscape = ( e.key === 'Escape' || e.key === 'Esc' );
+                        } else {
+                                isEscape = ( e.keyCode === 27 );
+                        }
+
+                        // If pressed key is esc, remove focus class from parent menu li.
+                        if ( isEscape ) {
+                                var parentLi = focusedElement.closest( 'li' ),
+                                        nestedParent = closestExcludingSelf( parentLi, 'li.menu-item-has-children' ),
+                                        focusPosition = nestedParent ? nestedParent.querySelector('a') : false;
+
+                                        if ( null !== nestedParent ) {
+                                                nestedParent.classList.add( 'focus' );
+                                                focusPosition.focus();
                                         } else {
-                                                self.className += ' focus';
-                                        }
-                                }
-                                self = self.parentElement;
-                        }
+                                                parentLi.classList.remove( 'focus' );
+                                                parentLi.classList.add( 'closed' );
+                                        }
+                        }
+                }
+
+                function closestExcludingSelf(element, selector) {
+                        if ( ! element || ! selector ) {
+                                return null;
+                        }
+                        const parent = element.parentElement;
+
+                        return parent ? parent.closest(selector) : null;
                 }
         }

trunk/src/wp-content/themes/twentytwenty/style-rtl.css

@@ -1677 +1677 @@
 }
 
+.primary-menu .closed ul {
+        display: none;
+}
+
 .primary-menu li.menu-item-has-children:hover > ul,
 .primary-menu li.menu-item-has-children:focus > ul,

trunk/src/wp-content/themes/twentytwenty/style.css

@@ -1683 +1683 @@
 }
 
+.primary-menu .closed ul {
+        display: none;
+}
+
 .primary-menu li.menu-item-has-children:hover > ul,
 .primary-menu li.menu-item-has-children:focus > ul,