[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
-------------------------------+------------------------------

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 popups.
>
> Not sure there's a viable way around this other than switching the popup
> trigger to a button, which creates a significant new burden in
> formatting."

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.

--

Comment (by joedolson):

 I don't think so, although it's related.

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