How can I make VoiceOver skip <button> elements?

I use VoiceOver/Chrome on a iPad to test whether accessibility works on a page I am developing. I connect a Bluetooth keyboard to the iPad and click on the Tab key to go through elements on the page. This page has a button

<button name="next" aria-labelledby="next-page-hint" tabindex="0" role="button" role="button">Next</button>

However, VoiceOver skips the button without stopping on it.

This is the HTML page used in the test

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <form>

    <div tabindex="0" role="text">this is the beginning</div>

    <div>-----------------------</div>

    <button name="next1" aria-labelledby="next-page-hint" tabindex="0" role="button" >Next 1</button>

    <div>-----------------------</div>

    <button name="next2">Next 2</button>

    <div>-----------------------</div>

    <h2 id="lbl">Men's Outerwear</h2>
    <button id="btn" aria-labelledby="lbl btn">Shop Now</button>

    <div>-----------------------</div>

    <h2 id="lbl">Men's Outerwear 2</h2>
    <button id="btn">Shop Now 2</button>

    <div>-----------------------</div>

    <div tabindex="0" role="text">this is the end</div>

  </form>

</body>
</html>

When I use the Tab key to go through this page, VoiceOver only discovers and pronounces "This is the beginning" and "This is the end".

UPDATE 2

I was able to tab through all buttons with the left/swipe gestures. The problem is to use the Tab key on a keyboard to tab through the buttons. The ios on the iPad is 15.4.1.

If I put the following textbox in the form, the VoiceOver is able to pronounce it correctly with the tab key tabbing through the elements on the page.

<textarea name="ta">This is textarea</textarea>

Update 3

The following code is what I tested and it seems to be working without changing accessibilities settings @slugolicious suggested (Thank you!). Maybe we can call it a workaround?

<div>
  <div class="radio" tabindex="0">
    <label for="q1015678-2430294-button21">
      <input type="radio" name="ddd1" value="0" id="q1015678-2430294-button21"> <span>Good</span>
    </label>
  </div>
  <div class="radio" tabindex="0">
    <label for="q1015678-2430295-button21" >
      <input type="radio" name="ddd1" value="1" id="q1015678-2430295-button21"> <span>Bad</span>
    </label>
  </div>
</div>

Solution

It "feels" like the Mac issue where the TAB key doesn't go to all elements unless you intentionally enable it in system preferences > keyboard and select "all controls" for keyboard access.

On the iPhone/iPad you can go into Settings > Accessibility > Keyboards > Full Keyboard Access and enable the "Full Keyboard Access" switch. This allows the TAB on the bluetooth keyboard to navigate to all buttons.

Seems stupid to have to do that and it makes Voiceover harder to use when it's enabled but it is possible.