Note that when placing multiple focusable elements directly next to each other, the focus rings of earlier elements may show under succeeding elements, thus become invisible.
To fix this, you should use a
focus:z-1 class on the focusable elements while adding the
relative z-0 classes to a shared ancestor of them.
focus:z-1 class will make sure whatever is focused is always above their siblings, while the
relative z-0 classes create a stacking context to make sure the focused element will not overlay other elements on the page, for example a dropdown menu might otherwise show under the input field which we don't want.