leave cdkTrapFocus - go into other region of page (NVDA Screenreader)

Question

I have a simple 3 column view with multiple elements in each column: paint example

Goal is to tab through the left side in a loop (1st -> 2nd -> 3rd -> 1st), then pressing a predefined button (arrowLeft, space, d... doesn't matter which one), which moves the focus to the middle section where the cycle repeats. Same for right. I want to always be able to move out of the section using the special key, while navigating inside it using tab and shift tab.

I'm working on an ng16 project, and I'm already using cdkTrapFocus for modals. But here, the solution is simple. Close the modal -> no <section cdkTrapFocus> anymore.

I've also had a look at other CDK options like cdkFocusRegionStart but I think all this does is redirecting focus to one element inside the defined region.

I tried adding a HostListener for keydowns and a data-id attribute to my objects, specifying each subobject as part of the region and moving regions (calling viewChild.nativeElement.focus()) on key.code "ArrowRight" or left respectively.

This however only works, if the user switches NVDA screen reader mode after each tab. Otherwise the hostlistener does not trigger at all.

Is there anything trapping tab focus in a region that I missed?

Edit: I found out that alt + key fires the event, so I could in theory work with that. Not an elegant solution however as alt is used quite a bit.

Edit: as I was asked to provide example code:

<div cdkTrapFocus id="first">
  <div role="button" tabindex="0"> first first </div>
  <div role="button" tabindex="0"> first second </div>
  <div role="button" tabindex="0"> first third </div>
</div>

<div cdkTrapFocus id="second">
  <div role="button" tabindex="0"> second first </div>
  <div role="button" tabindex="0"> second second </div>
  <div role="button" tabindex="0"> second third </div>
</div>

<div cdkTrapFocus id="third">
  <div role="button" tabindex="0"> third first </div>
  <div role="button" tabindex="0"> third second </div>
  <div role="button" tabindex="0"> third third</div>
</div>

tabbing through this list will leave me stuck at the 3 children of id="first" and the @hostlistener does only trigger in a certain NVDA mode. alt + key will trigger the host listener, so I can manually set the focus of document.getElementById('second').focus() but simply using alt + arrowLeft already triggers a navigation 'page-back'-event, so this can't be a viable solution