Use Heading component on NavigationMenu and NavigationGroup components (

#36009) * Use Heading component on NavigationMenu and NavigationGroup components * Semantically identify menu title as h2 despite being a 3rd level heading
WordPress · Nov 1, 2021 · 154b34a · 154b34a
1 parent 0e3151c
commit 154b34a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/packages/components/src/navigation/group/index.js b/packages/components/src/navigation/group/index.js
@@ -41,10 +41,9 @@ export default function NavigationGroup( { children, className, title } ) {
 			<li className={ classes }>
 				{ title && (
 					<GroupTitleUI
-						as="h3"
 						className="components-navigation__group-title"
 						id={ groupTitleId }
-						variant="caption"
+						level={ 3 }
 					>
 						{ title }
 					</GroupTitleUI>

diff --git a/packages/components/src/navigation/menu/menu-title.js b/packages/components/src/navigation/menu/menu-title.js
@@ -54,7 +54,7 @@ export default function NavigationMenuTitle( {
 				<MenuTitleHeadingUI
 					as="h2"
 					className="components-navigation__menu-title-heading"
-					variant="title.small"
+					level={ 3 }
 				>
 					<span id={ menuTitleId }>{ title }</span>
 

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
@@ -14,6 +14,7 @@ import { isRTL } from '@wordpress/i18n';
 import { BASE, G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
+import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
@@ -67,7 +68,7 @@ export const MenuTitleUI = styled.div`
 	width: 100%;
 `;
 
-export const MenuTitleHeadingUI = styled( Text )`
+export const MenuTitleHeadingUI = styled( Heading )`
 	align-items: center;
 	color: inherit;
 	display: flex;
@@ -145,14 +146,13 @@ export const MenuTitleSearchUI = styled.div`
 	}
 `;
 
-export const GroupTitleUI = styled( Text )`
+export const GroupTitleUI = styled( Heading )`
 	color: inherit;
 	margin-top: ${ space( 2 ) };
 	padding: ${ () =>
 		isRTL()
 			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
 			: `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
-	text-transform: uppercase;
 `;
 
 export const ItemBaseUI = styled.li`