How to access a conditionally revealed element with position:fixed through tab navigation?

Question

I am working on a project that has cart functionality. There's a button that opens or closes a cart. It's an overlay with position: fixed. So, if I am tabbing through the interactive elements and then click on the open cart button, the cart gets opened. The cart container element has a hidden class that gets toggled on click and keyup events.

But if I press tab again after that, I can't navigate inside the cart. Instead, the screen moves to the next interactive element on the page. I have tried moving the focus to the cart content using the Element.focus() and Element.click() APIs, but they don't solve this issue. If I want to tab through the interactive elements of the cart, then the only way to do this is to click on it manually.

So, how can I make the cart content accessible through tab navigation when the button gets clicked or the Enter key gets pressed?

Answer 1

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

Answer 2

I solved this problem by adding tabindex="0" to the cart container and then triggering the Element.focus() function on the click and keyup events. Doing so moves focus to the cart overlay, and makes it the active element, so tab navigation starts working inside it.