Focus doesn't move to element in first focus zone just after data-is-focusable attribute is set to true

[krkshitij]

I have a scenario where multiple focus zones exist, and the elements inside them become interactive/focusable depending on some state. I observed that on pressing tab key, the focus does not move to the element in the first focus zone just after the data-is-focusable attribute becomes true. Similarly, the focus moves to that element after the data-is-focusable attribute becomes false. But this does not happen for elements in other focus zones. Is this the expected behavior? If not, is there a way to fix this issue?

Reproduction

1. Go to the playground link: https://codepen.io/krkshitij/pen/ZEqegWv
2. Notice that Div 1 is not focusable. Make Div 1 focusable by checking the checkbox.
3. Press the tab key to move focus. Notice that the focus moves directly from the checkbox to Div 2, skipping Div 1.