Navigation Component: Semantically create nested lists (#25280)

* Add ul and li in groups and menus * update readme * update tests
WordPress · Sep 14, 2020 · fa04050 · fa04050
1 parent 8d05ce8
commit fa04050
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 72 deletions.
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
@@ -34,14 +34,8 @@ const MyNavigation = () => (
 			parentMenu="root"
 			title="Category"
 		>
-			<ul>
-				<NavigationItem
-					badge="1"
-					item="child-1"
-					title="Child 1"
-				/>
-				<NavigationItem item="child-2" title="Child 2" />
-			</ul>
+			<NavigationItem badge="1" item="child-1" title="Child 1" />
+			<NavigationItem item="child-2" title="Child 2" />
 		</NavigationMenu>
 	</Navigation>
 );

diff --git a/packages/components/src/navigation/group.js b/packages/components/src/navigation/group.js
@@ -12,7 +12,7 @@ export default function NavigationGroup( { children, className, title } ) {
 	const classes = classnames( 'components-navigation__group', className );
 
 	return (
-		<div className={ classes }>
+		<li className={ classes }>
 			{ title && (
 				<GroupTitleUI
 					as="h3"
@@ -23,6 +23,6 @@ export default function NavigationGroup( { children, className, title } ) {
 				</GroupTitleUI>
 			) }
 			<ul>{ children }</ul>
-		</div>
+		</li>
 	);
 }
diff --git a/packages/components/src/navigation/menu.js b/packages/components/src/navigation/menu.js
@@ -37,7 +37,7 @@ export default function NavigationMenu( {
 	const classes = classnames( 'components-navigation__menu', className );
 
 	return (
-		<div className={ classes }>
+		<MenuUI className={ classes }>
 			{ parentMenu && (
 				<MenuBackButtonUI
 					className="components-navigation__back-button"
@@ -48,18 +48,16 @@ export default function NavigationMenu( {
 					{ backButtonLabel || __( 'Back' ) }
 				</MenuBackButtonUI>
 			) }
-			<MenuUI>
-				{ title && (
-					<MenuTitleUI
-						as="h2"
-						className="components-navigation__menu-title"
-						variant="subtitle"
-					>
-						{ title }
-					</MenuTitleUI>
-				) }
-				{ children }
-			</MenuUI>
-		</div>
+			{ title && (
+				<MenuTitleUI
+					as="h2"
+					className="components-navigation__menu-title"
+					variant="subtitle"
+				>
+					{ title }
+				</MenuTitleUI>
+			) }
+			<ul>{ children }</ul>
+		</MenuUI>
 	);
 }
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -72,19 +72,13 @@ function Example() {
 					parentMenu="root"
 					title="Category"
 				>
-					<ul>
-						<NavigationItem
-							badge="1"
-							item="child-1"
-							title="Child 1"
-						/>
-						<NavigationItem item="child-2" title="Child 2" />
-						<NavigationItem
-							navigateToMenu="nested-category"
-							item="child-3"
-							title="Nested Category"
-						/>
-					</ul>
+					<NavigationItem badge="1" item="child-1" title="Child 1" />
+					<NavigationItem item="child-2" title="Child 2" />
+					<NavigationItem
+						navigateToMenu="nested-category"
+						item="child-3"
+						title="Nested Category"
+					/>
 				</NavigationMenu>
 
 				<NavigationMenu
@@ -93,16 +87,8 @@ function Example() {
 					parentMenu="category"
 					title="Nested Category"
 				>
-					<ul>
-						<NavigationItem
-							item="sub-child-1"
-							title="Sub Child 1"
-						/>
-						<NavigationItem
-							item="sub-child-2"
-							title="Sub Child 2"
-						/>
-					</ul>
+					<NavigationItem item="sub-child-1" title="Sub Child 1" />
+					<NavigationItem item="sub-child-2" title="Sub Child 2" />
 				</NavigationMenu>
 			</Navigation>
 

diff --git a/packages/components/src/navigation/test/index.js b/packages/components/src/navigation/test/index.js
@@ -13,38 +13,34 @@ import NavigationMenu from '../menu';
 const testNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>
-			<ul>
-				<NavigationItem
-					badge={ showBadge && 21 }
-					item="item-1"
-					title="Item 1"
-				/>
-				<NavigationItem
-					href="http://example.com"
-					item="item-2"
-					target="_blank"
-					title="Item 2"
-				/>
-				<NavigationItem
-					navigateToMenu="category"
-					item="category"
-					title="Category"
-				/>
-				<NavigationItem item="item-3">
-					<span>customize me</span>
-				</NavigationItem>
-			</ul>
+			<NavigationItem
+				badge={ showBadge && 21 }
+				item="item-1"
+				title="Item 1"
+			/>
+			<NavigationItem
+				href="http://example.com"
+				item="item-2"
+				target="_blank"
+				title="Item 2"
+			/>
+			<NavigationItem
+				navigateToMenu="category"
+				item="category"
+				title="Category"
+			/>
+			<NavigationItem item="item-3">
+				<span>customize me</span>
+			</NavigationItem>
 		</NavigationMenu>
 		<NavigationMenu
 			backButtonLabel="Home"
 			menu="category"
 			parentMenu="root"
 			title="Category"
 		>
-			<ul>
-				<NavigationItem item="child-1" title="Child 1" />
-				<NavigationItem item="child-2" title="Child 2" />
-			</ul>
+			<NavigationItem item="child-1" title="Child 1" />
+			<NavigationItem item="child-2" title="Child 2" />
 		</NavigationMenu>
 	</Navigation>
 );