Use arrow key navigation for inserterContentNavigator.

Todo:
- not sure about the roles. I don't think tree is right, but menu didn't seem right either
- Should probably pass an aria-label instead of fixing it as "categories"
- CSS cleanup

packages/block-editor/src/components/inserter/inserter-content-navigator.js

@@ -3,42 +3,65 @@
  */
 import { isRTL } from '@wordpress/i18n';
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorButton as NavigatorButton,
-	FlexBlock,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 export default function InserterContentNavigator( { categories, children } ) {
+	const compositeStore = useCompositeStore( { orientation: 'vertical' } );
+
 	return (
 		<NavigatorProvider
 			initialPath="/"
 			className="block-editor-inserter__mobile-tab-navigation"
 		>
 			<NavigatorScreen path="/">
-				<ItemGroup>
-					{ categories.map( ( category ) => (
-						<NavigatorButton
-							key={ category.name }
-							path={ `/category/${ category.name }` }
-							as={ Item }
-							isAction
-						>
-							<HStack>
-								<FlexBlock>{ category.label }</FlexBlock>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigatorButton>
-					) ) }
-				</ItemGroup>
+				<Composite
+					store={ compositeStore }
+					role="tree"
+					aria-label={ 'Categories' }
+				>
+					<VStack>
+						{ categories.map( ( category ) => (
+							<CompositeItem
+								key={ category.name }
+								render={
+									<NavigatorButton
+										path={ `/category/${ category.name }` }
+										role="treeitem"
+									>
+										<HStack>
+											<span>{ category.label }</span>
+											<Icon
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</NavigatorButton>
+								}
+							/>
+						) ) }
+					</VStack>
+				</Composite>
 			</NavigatorScreen>
 			{ categories.map( ( category ) => (
 				<NavigatorScreen