NavigableContainer: Items in TabbableContainer are not navigated in order

[mmtr]

Describe the bug
When rendering a TabbableContainer component outside Gutenberg, the items are not navigated in order when pressing the tab key.

The menu navigates from the Section 1 to the Section 3 and from the Section 2 to the Section 4.

To Reproduce
Execute the code below in a new React project after installing @wordpress/components.

import React from 'react';
import ReactDOM from 'react-dom';
import { TabbableContainer, Button } from '@wordpress/components';

import '@wordpress/components/build-style/styles.css';

const MyTabbableContainer = () => (
	<TabbableContainer onNavigate={ onNavigate }>
		<Button isDefault tabIndex="0">Section 1</Button>
		<Button isDefault tabIndex="0">Section 2</Button>
		<Button isDefault tabIndex="0">Section 3</Button>
		<Button isDefault tabIndex="0">Section 4</Button>
	</TabbableContainer>
);

ReactDOM.render(
	<MyTabbableContainer />,
	document.getElementById( 'root' )
);

Expected behavior
The menu navigates from the Section 1 to the Section 2 and from the Section 2 to the Section 3.

Screenshots

Desktop:

• OS: macOS High Sierra
• Browser: Chrome
• Version: 67

Additional context
Issue found while working on #8338 and Automattic/wp-calypso#26367

[aduth]

TabbableContainer is meant to manage key events on your behalf. Have you tried omitting tabIndex?

Even if that works, TabbableContainer should at worst be preventing the default browser behavior to avoid the double-skip.

[tn3rb]

wow this is old...
can confirm that the TabbableContainer jumps to every other item upon tabbing.
removing tabIndex had no effect and did not prevent the double-skip.

[paaljoachim]

How should we move this old issue forward?
@mcsf @ockham

[mcsf]

Closing until someone can fix this. If it's not impacting usage within Gutenberg, it can't be prioritised. There are also opportunities with the partial adoption of Reakit, as well as the new Components project, to see this component superseded by better solutions.