How can I switch focus to a layer element?

I have a button that opens a 'popup', basically an element that is position:absolute and z-index:<greater than the layer below it>.
The function that opens the popup also sets the focus to the first button element in the popup and shows a console log message.
When I tab to the button and hit Enter (or click it) the popup opens and the console shows 'focused'.

When the button inside the popup has focus: css: btnMkQAddHeader:focus {...} the background changes from white to light yellow. This is tested. When I manually click the button (btnMkQAddHeader) it turns light yellow as expected.
The following code is inside the function that opens the popup.

document.querySelector("#btnMkQAddHeader").focus();
console.log('focused');

Code (markup):

The problem is that when I tab to the button that opens the popup and hit Enter the text 'focused' shows up in the console BUT the btnMkQAddHeader background does not change to light yellow.
Also if after the popup is open (and supposedly btnMkQAddHeader has focus) if I hit Tab again another element behind the popup gets the focus, not the button below btnMkQAddHeader inside the popup.
Clearly, the element in the popup never actually gets the focus.

Question: How can I make the element inside the popup get the focus, turn the background light yellow and when I tab off of it the next button inside the popup gains focus.

Note: This is *not* a modal form. The user should be able to click anything behind the popup if they want to.
I'm trying to make this accessibility compliant and usable from a keyboard.

 

perhaps tabIndex will help?
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

 

It looks like the issue is that calling .focus() immediately after opening the popup doesn’t give the browser enough time to properly update the DOM and apply the :focus styles. Some browsers don’t process focus changes as expected in this scenario. I hope you find the solution