OK I took a quick look so I am not 100%. After the modal is closed focus is returned to the element on the screen that was active when the modal is opened. In this case its,
div#ub-tabbed-content-62a42833-c8be-44a6-95d5-0ca797be9e96-panel-4.wp-block-ub-tabbed-content-tab-content-wrap.active
When the focus is set/returned then the browser will scroll to that element which is why you see the jump.
Taking a closer look at the headshot images they do not appear to receive focus, i.e. when I tab through the screen it sets focus on the container element for the headshots but the actual headshots never receive focus, (you cannot tab to them). Ideally, they should be able to receive focus and then when the modal closes the focus would return to the actual headshot rather than the container.
Looking a bit more images do not receive focus by default, I would need to wrap it in a tag when it’s created. Will consider for a future release.
Ah, so you are not using trigger by image. In which case what I can put in a future release is to set the focus back to the main page on modal close but not scroll to the focus field.
Ah that makes sense, thanks for getting back! Not sure why I didn’t think to just use the image as a trigger for these.
Any idea when you’ll be able to add that in?
thanks again for the help
I will try and get something out next week
Actually, if you want to make a quick edit to modal.js you can test it out for me:
Change this line:
// return focus to element that was active before modal called
if (this.triggerElement) this.triggerElement.focus();
to
// return focus to element that was active before modal called
if (this.triggerElement) this.triggerElement.focus({
preventScroll: true
});
Yep that did it! This will get me by until the next update. Just let me know if you need me to test anything else.
thanks again
NP glad it was an easy fix
