Make WordPress Core

Ticket #49950: 49950.patch

File 49950.patch, 3.8 KB (added by rcreators, 4 months ago)

Updated CSS file and JS file code. Keyboard tabbing will open submenu and esc will close submenu as per accessibility standard.

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

    diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js
    index 5daa9eaa7c..27f2f71b51 100644
    a b twentytwenty.primaryMenu = { 
    438438
    439439                links = menu.getElementsByTagName( 'a' );
    440440
    441                 // Each time a menu link is focused or blurred, toggle focus.
     441                // Each time a menu link is focused, update focus.
    442442                for ( i = 0, len = links.length; i < len; i++ ) {
    443                         links[i].addEventListener( 'focus', toggleFocus, true );
    444                         links[i].addEventListener( 'blur', toggleFocus, true );
     443                        links[i].addEventListener( 'focus', updateFocus, true );
    445444                }
    446445
    447                 //Sets or removes the .focus class on an element.
    448                 function toggleFocus() {
     446                // Update focus class on an element.
     447                function updateFocus() {
    449448                        var self = this;
     449                       
     450                        // Remove focus from all li elements of primary-menu.
     451                        menu.querySelectorAll('li').forEach( function(el){
     452                                if(el.classList.contains('focus')){
     453                                        el.classList.remove('focus');
     454                                }
     455                        })
     456                       
     457                        // Add focus to current a tag parent li.
     458                        self.parentElement.classList.add('focus');
    450459
    451                         // Move up through the ancestors of the current link until we hit .primary-menu.
    452                         while ( -1 === self.className.indexOf( 'primary-menu' ) ) {
    453                                 // On li elements toggle the class .focus.
    454                                 if ( 'li' === self.tagName.toLowerCase() ) {
    455                                         if ( -1 !== self.className.indexOf( 'focus' ) ) {
    456                                                 self.className = self.className.replace( ' focus', '' );
    457                                         } else {
    458                                                 self.className += ' focus';
    459                                         }
     460                        // If current element is inside sub-menu find main parent li and add focus.
     461                        if(self.closest('.menu-item-has-children'))
     462                                self.closest('.menu-item-has-children').classList.add('focus');
     463
     464                }
     465
     466                // Each time esc key is pressed while in menu, remove focus.
     467                menu.addEventListener('keydown', removeFocusEsc, true);
     468
     469                // Remove focus when esc key pressed.
     470                function removeFocusEsc(e){
     471                        e = e || window.event;
     472                        var isEscape = false;
     473
     474                        // Find is pressed key is esc.
     475                        if ("key" in e) {
     476                                isEscape = (e.key === "Escape" || e.key === "Esc");
     477                        } else {
     478                                isEscape = (e.keyCode === 27);
     479                        }
     480
     481                        // If pressed key is esc, remove focus class from main parent menu li.
     482                        if (isEscape) {
     483                                if(menu.querySelector('li.menu-item-has-children').classList.contains('focus')){
     484                                        menu.querySelector('li.focus.menu-item-has-children').classList.remove('focus');
    460485                                }
    461                                 self = self.parentElement;
    462486                        }
    463487                }
    464488        }
  • src/wp-content/themes/twentytwenty/style-rtl.css

    diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css
    index 3e2da9905c..628e78b8c5 100644
    a b ul.primary-menu { 
    16701670        transform: translateY(0.6rem);
    16711671        width: 20rem;
    16721672        z-index: 1;
     1673        visibility: hidden;
    16731674}
    16741675
    16751676.primary-menu li.menu-item-has-children:hover > ul,
    ul.primary-menu { 
    16791680        opacity: 1;
    16801681        transform: translateY(0);
    16811682        transition: opacity 0.15s linear, transform 0.15s linear;
     1683        visibility: visible;
    16821684}
    16831685
    16841686.primary-menu ul::before,
  • src/wp-content/themes/twentytwenty/style.css

    diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
    index 2fb031b375..a046713a67 100644
    a b ul.primary-menu { 
    16761676        transform: translateY(0.6rem);
    16771677        width: 20rem;
    16781678        z-index: 1;
     1679        visibility: hidden;
    16791680}
    16801681
    16811682.primary-menu li.menu-item-has-children:hover > ul,
    ul.primary-menu { 
    16851686        opacity: 1;
    16861687        transform: translateY(0);
    16871688        transition: opacity 0.15s linear, transform 0.15s linear;
     1689        visibility: visible;
    16881690}
    16891691
    16901692.primary-menu ul::before,