[wp-trac] [WordPress Trac] #55143: Twenty Twenty One: focus position jumps when opening popup

[WordPress Trac]

#55143: Twenty Twenty One: focus position jumps when opening popup
-------------------------------+------------------------------
 Reporter:  paaljoachim        |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Bundled Theme      |     Version:
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:  javascript
-------------------------------+------------------------------
Description changed by joedolson:

Old description:

> The following was noticed in this My Calendar Github issue:
> https://github.com/joedolson/my-calendar/issues/374
>
> Twenty Twenty One contains code that intercepts all anchor links
> containing a '#' and moves scroll position to that link. This causes an
> undesirable focus position movement for any link containing a '#'
> character that is not intended to move focus.
>
> ```
>         /**
>                  * Close menu and scroll to anchor when an anchor link is
> clicked.
>                  * Adapted from Twenty Twenty.
>                  *
>                  * @since Twenty Twenty-One 1.1
>                  */
>                 document.addEventListener( 'click', function( event ) {
>                         // If target onclick is <a> with # within the
> href attribute
>                         if ( event.target.hash &&
> event.target.hash.includes( '#' ) ) {
>                                 wrapper.classList.remove( id +
> '-navigation-open', 'lock-scrolling' );
>                                 twentytwentyoneToggleAriaExpanded(
> mobileButton );
>                                 // Wait 550 and scroll to the anchor.
>                                 setTimeout(function () {
>                                         var anchor =
> document.getElementById(event.target.hash.slice(1));
>                                         anchor.scrollIntoView();
>                                 }, 550);
>                         }
>                 } );
> ```
>
> This code adds a listener to all links that scrolls to that target
> anchor. For any case where a link is used to open a modal, an accordion,
> or as a faux-button in any way while containing a hash character, this
> will cause problems.

New description:

 The following was noticed in this My Calendar Github issue:
 https://github.com/joedolson/my-calendar/issues/374

 Twenty Twenty One contains code that intercepts all anchor links
 containing a '#' and moves scroll position to that link. This causes an
 undesirable focus position movement for any link containing a '#'
 character that is not intended to move focus.


 {{{
 /**
                  * Close menu and scroll to anchor when an anchor link is
 clicked.
                  * Adapted from Twenty Twenty.
                  *
                  * @since Twenty Twenty-One 1.1
                  */
                 document.addEventListener( 'click', function( event ) {
                         // If target onclick is <a> with # within the href
 attribute
                         if ( event.target.hash &&
 event.target.hash.includes( '#' ) ) {
                                 wrapper.classList.remove( id +
 '-navigation-open', 'lock-scrolling' );
                                 twentytwentyoneToggleAriaExpanded(
 mobileButton );
                                 // Wait 550 and scroll to the anchor.
                                 setTimeout(function () {
                                         var anchor =
 document.getElementById(event.target.hash.slice(1));
                                         anchor.scrollIntoView();
                                 }, 550);
                         }
                 } );
 }}}


 This code adds a listener to all links that scrolls to that target anchor.
 For any case where a link is used to open a modal, an accordion, or as a
 faux-button in any way while containing a hash character, this will cause
 problems.

--

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