[wp-trac] [WordPress Trac] #41822: Twenty Twelve: Submenus not working on touch screen devices

[WordPress Trac]

#41822: Twenty Twelve: Submenus not working on touch screen devices
---------------------------+------------------------------
 Reporter:  kokkieh        |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  4.8.1
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:
---------------------------+------------------------------

Comment (by superpoincare):

 I edited the quote slightly and this works:

 Original code:


 {{{
 // Better focus for hidden submenu items for accessibility.
 ( function( $ ) {
         $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve
 blur.twentytwelve', function() {
                 $( this ).parents( '.menu-item, .page_item' ).toggleClass(
 'focus' );
         } );

   if ( 'ontouchstart' in window ) {
     $('body').on( 'touchstart.twentytwelve',  '.menu-item-has-children >
 a, .page_item_has_children > a', function( e ) {
       var el = $( this ).parent( 'li' );

       if ( ! el.hasClass( 'focus' ) ) {
         e.preventDefault();
         el.toggleClass( 'focus' );
         el.siblings( '.focus').removeClass( 'focus' );
       }
     } );
   }
 } )( jQuery );
 }}}

 Improved code:

 {{{
 // Better focus for hidden submenu items for accessibility.
 ( function( $ ) {
         $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve
 blur.twentytwelve', function() {
                 $( this ).parents( '.menu-item, .page_item' ).toggleClass(
 'focus' );
         } );

         if ( 'ontouchstart' in window ) {
                 $('body').find( '.menu-item-has-children > a,
 .page_item_has_children > a').on(  'touchstart.twentytwelve', function( e
 ) {
                         var el = $( this ).parent( 'li' );

                         if ( ! el.hasClass( 'focus' ) ) {
                                 e.preventDefault();
                                 el.toggleClass( 'focus' );
                                 el.siblings( '.focus' ).find( '.focus'
 ).addBack('.focus' ).removeClass( 'focus' );
                         }
                 } );
         }
 } )( jQuery );
 }}}

 This is related the change in browsers as described here on "passive
 mode": https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

 ie instead of on-touchstart-find, I do find-on-touch. Twenty Thirteen uses
 the correct approach.

 Also changed classes of various siblings' descendents, since a user can
 touch a submenu and their children and then another submenu and come back
 and see everything expanded, in the previous touched sub-menu. But this
 addition is not important. The line with **$.body** is important.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/41822#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform