Keep Accessibility Behaviour With `tabindex` (or similar) When Tabbing Through Elements - html

Question

I have a form with some <button> elements in that I'm trying to get to work with the tab key for accessibility reasons. Each button has to be wrapped in a wrapper item, namely .item-wrapper.
I've added tabindex="0" to the button elements and to a .close <div> element that closes the component, and everything works as expected in Chromium based browsers.
However, in Safari when you tab through the form elements the focus is only applied to the .close element and then jumps outside of the form, and doesn't even get to the button elements. In Firefox the buttons tab as expected however the .close element doesn't take focus.
Is there no standard cross-browser behaviour for this in 2022 bearing in mind as humans we can also send rockets to Mars? And if not how do I have it so the when tabbing through the form, the focus goes from the .close through to each button in order as desired?
Codepen link: https://codepen.io/thechewy/pen/oNyzbJW
body {
margin: 0;
padding: 1rem;
display: flex;
justify-content: center;
}
form {
padding: 1rem;
background: #f7f7f7;
display: inline-block;
}
.close {
padding: 0.5rem;
background: lightblue;
display: inline-flex;
}
.item-wrapper {
margin: 1rem 0;
}
<form method="POST">
<div tabindex="0" class="close">X</div>
<div class="board-list">
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 1</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 2</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 3</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 4</button>
</div>
</div>
</form>