Make WordPress Core

Ticket #49950: 49950.patch

File 49950.patch, 3.8 KB (added by rcreators, 10 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,