diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index a55a7b331bd0dd..7c5257ae93bfaa 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -20,7 +20,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -167,10 +167,7 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 				</Flex>
 			) ) }
 		</ZStack>
-		<FlexItem
-			className="block-editor-panel-color-gradient-settings__color-name"
-			title={ label }
-		>
+		<FlexItem className="block-editor-panel-color-gradient-settings__color-name">
 			{ label }
 		</FlexItem>
 	</HStack>
@@ -231,11 +228,6 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
-						'aria-label': sprintf(
-							/* translators: %s is the type of color property, e.g., "background" */
-							__( 'Color %s styles' ),
-							label
-						),
 					};
 
 					return (
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js
index c268648a134a74..fb23a38fe43bc2 100644
--- a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js
@@ -23,10 +23,7 @@ function FontSizes() {
 				<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>
 			</HStack>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem
-					path="/typography/font-sizes"
-					aria-label={ __( 'Edit font size presets' ) }
-				>
+				<NavigationButtonAsItem path="/typography/font-sizes">
 					<HStack direction="row">
 						<FlexItem>{ __( 'Font size presets' ) }</FlexItem>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 4afb9d88feb3e9..9b8c3f829d2426 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -54,32 +54,35 @@ function Palette( { name } ) {
 	const screenPath = ! name
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
-	const paletteButtonText =
-		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem
-					path={ screenPath }
-					aria-label={ paletteButtonText }
-				>
+				<NavigationButtonAsItem path={ screenPath }>
 					<HStack direction="row">
-						{ colors.length <= 0 && (
+						{ colors.length > 0 ? (
+							<>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color }, index ) => (
+											<ColorIndicatorWrapper
+												key={ `${ color }-${ index }` }
+											>
+												<ColorIndicator
+													colorValue={ color }
+												/>
+											</ColorIndicatorWrapper>
+										) ) }
+								</ZStack>
+								<FlexItem isBlock>
+									{ __( 'Edit palette' ) }
+								</FlexItem>
+							</>
+						) : (
 							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
 						) }
-						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors
-								.slice( 0, 5 )
-								.map( ( { color }, index ) => (
-									<ColorIndicatorWrapper
-										key={ `${ color }-${ index }` }
-									>
-										<ColorIndicator colorValue={ color } />
-									</ColorIndicatorWrapper>
-								) ) }
-						</ZStack>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 183686bb52d825..d8e8f5794f9d03 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -48,17 +48,12 @@ function RootMenu() {
 					<NavigationButtonAsItem
 						icon={ typography }
 						path="/typography"
-						aria-label={ __( 'Typography styles' ) }
 					>
 						{ __( 'Typography' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasColorPanel && (
-					<NavigationButtonAsItem
-						icon={ color }
-						path="/colors"
-						aria-label={ __( 'Colors styles' ) }
-					>
+					<NavigationButtonAsItem icon={ color } path="/colors">
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
@@ -72,20 +67,12 @@ function RootMenu() {
 					</NavigationButtonAsItem>
 				) }
 				{ hasShadowPanel && (
-					<NavigationButtonAsItem
-						icon={ shadowIcon }
-						path="/shadows"
-						aria-label={ __( 'Shadow styles' ) }
-					>
+					<NavigationButtonAsItem icon={ shadowIcon } path="/shadows">
 						{ __( 'Shadows' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasLayoutPanel && (
-					<NavigationButtonAsItem
-						icon={ layout }
-						path="/layout"
-						aria-label={ __( 'Layout styles' ) }
-					>
+					<NavigationButtonAsItem icon={ layout } path="/layout">
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index 51807ba79aa111..441c4168f814aa 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -86,16 +86,9 @@ function BlockMenuItem( { block } ) {
 		return null;
 	}
 
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-		__( '%s block styles' ),
-		block.title
-	);
-
 	return (
 		<NavigationButtonAsItem
 			path={ '/blocks/' + encodeURIComponent( block.name ) }
-			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index d5b29eca5549c5..ffa85b046ead71 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -67,10 +67,7 @@ function ScreenRoot() {
 					</Card>
 					{ hasVariations && (
 						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/variations"
-								aria-label={ __( 'Browse styles' ) }
-							>
+							<NavigationButtonAsItem path="/variations">
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Browse styles' ) }
@@ -107,10 +104,7 @@ function ScreenRoot() {
 					) }
 				</Spacer>
 				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/blocks"
-						aria-label={ __( 'Blocks styles' ) }
-					>
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
@@ -136,10 +130,7 @@ function ScreenRoot() {
 							) }
 						</Spacer>
 						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/css"
-								aria-label={ __( 'Additional CSS' ) }
-							>
+							<NavigationButtonAsItem path="/css">
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Additional CSS' ) }
diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index 18e15ef7dd6f28..43e0c063f492b8 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -135,10 +135,6 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			aria-label={
-				// translators: %s: name of the shadow
-				sprintf( 'Edit shadow %s', shadow.name )
-			}
 			icon={ shadowIcon }
 		>
 			{ shadow.name }
diff --git a/packages/edit-site/src/components/global-styles/typography-elements.js b/packages/edit-site/src/components/global-styles/typography-elements.js
index eaff3de05112b6..d087c8df041521 100644
--- a/packages/edit-site/src/components/global-styles/typography-elements.js
+++ b/packages/edit-site/src/components/global-styles/typography-elements.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
@@ -36,17 +36,8 @@ function ElementItem( { parentMenu, element, label } ) {
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
-		__( 'Typography %s styles' ),
-		label
-	);
-
 	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/typography/' + element }
-			aria-label={ navigationButtonLabel }
-		>
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -61,6 +52,7 @@ function ElementItem( { parentMenu, element, label } ) {
 						fontWeight,
 						...extraStyles,
 					} }
+					aria-hidden="true"
 				>
 					{ __( 'Aa' ) }
 				</FlexItem>
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-panel.js b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
index f98cc65e5c95b1..22f2f50c58e24f 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-panel.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
@@ -55,7 +55,6 @@ export function VariationsPanel( { name } ) {
 							'/variations/' +
 							encodeURIComponent( style.name )
 						}
-						aria-label={ style.label }
 					>
 						{ style.label }
 					</NavigationButtonAsItem>
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index 25bc2d6101024a..d6b0a0a15c4ea2 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -291,11 +291,11 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
 		);
 		await page.click( 'role=option[name="Color: Cyan bluish gray"i]' );
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
 		await page.click( 'role=option[name="Color: Vivid red"i]' );
 
@@ -320,13 +320,13 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
 
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
@@ -355,7 +355,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click( 'role=option[name="Gradient: Purple to yellow"i]' );
@@ -384,7 +384,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click(
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
index 1ddd4af8ab2e13..8692b184fb13f9 100644
--- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -91,13 +91,13 @@ test.describe( 'Navigation colors', () => {
 		// In the sidebar inspector we add a link color and link hover color to the group block.
 		await editor.openDocumentSettingsSidebar();
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
-		await page.getByRole( 'button', { name: 'Color Text styles' } ).click();
+		await page.getByRole( 'button', { name: 'Text' } ).click();
 		await page
 			.getByRole( 'option', { name: 'Color: White' } )
 			.click( { force: true } );
 
 		await page
-			.getByRole( 'button', { name: 'Color Background styles' } )
+			.getByRole( 'button', { name: 'Background', exact: true } )
 			.click();
 		await page
 			.getByRole( 'option', { name: 'Color: Black' } )
@@ -148,7 +148,7 @@ test.describe( 'Navigation colors', () => {
 			.getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
 			.click();
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
-		await page.getByRole( 'button', { name: 'Color Link styles' } ).click();
+		await page.getByRole( 'button', { name: 'Link', exact: true } ).click();
 		// rga(207, 46 ,46) is the color of the "vivid red" color preset.
 		await page
 			.getByRole( 'option', { name: 'Color: Vivid red' } )
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
index 57b958fdfc4b44..32e3def9154ed1 100644
--- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Keep styles on block transforms', () => {
 			.locator( 'role=button[name="Add default block"i]' )
 			.click();
 		await page.keyboard.type( '## Heading' );
-		await page.click( 'role=button[name="Color Text styles"i]' );
+		await page.click( 'role=button[name="Text"i]' );
 		await page.click( 'role=option[name="Color: Luminous vivid orange"i]' );
 
 		await page.click( 'role=button[name="Heading"i]' );
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 7271768206d1b6..7928ef8f71c534 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -24,9 +24,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			await page
 				.getByRole( 'button', {
 					name: 'Add fonts',
@@ -43,9 +41,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			const manageFontsIcon = page.getByRole( 'button', {
 				name: 'Manage fonts',
 			} );
@@ -71,9 +67,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			const manageFontsIcon = page.getByRole( 'button', {
 				name: 'Manage fonts',
 			} );
@@ -87,9 +81,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			await page
 				.getByRole( 'button', {
 					name: 'Manage fonts',
@@ -108,9 +100,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			await page
 				.getByRole( 'button', {
 					name: 'Manage fonts',
@@ -160,9 +150,7 @@ test.describe( 'Font Library', () => {
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
-			await page
-				.getByRole( 'button', { name: 'Typography Styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 			await page
 				.getByRole( 'button', {
 					name: 'Add fonts',
@@ -196,7 +184,7 @@ test.describe( 'Font Library', () => {
 			// Check CSS preset was created.
 			await page.getByRole( 'button', { name: 'Close' } ).click();
 			await page
-				.getByRole( 'button', { name: 'Typography Headings styles' } )
+				.getByRole( 'button', { name: 'Headings', exact: true } )
 				.click();
 			await page.getByLabel( 'Font' ).selectOption( 'Exo 2' );
 			await expect(
@@ -252,9 +240,7 @@ test.describe( 'Font Library', () => {
 			// Click "Back" button
 			await page.getByRole( 'button', { name: 'Back' } ).click();
 
-			await page
-				.getByRole( 'button', { name: 'Typography styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 
 			// Click "Jost 2 variants" button
 			await page
@@ -286,9 +272,7 @@ test.describe( 'Font Library', () => {
 			// Click "Back" button
 			await page.getByRole( 'button', { name: 'Back' } ).click();
 
-			await page
-				.getByRole( 'button', { name: 'Typography styles' } )
-				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
 
 			// Click Cardo font-family.
 			await page
diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
index 0b034def6a3063..7f1b818df4ce0a 100644
--- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
+++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
@@ -28,7 +28,7 @@ test.describe( 'Global styles sidebar', () => {
 			.click();
 		await page
 			.getByRole( 'region', { name: 'Editor settings' } )
-			.getByRole( 'button', { name: 'Blocks styles' } )
+			.getByRole( 'button', { name: 'Blocks' } )
 			.click();
 
 		await page
@@ -38,11 +38,11 @@ test.describe( 'Global styles sidebar', () => {
 		// Matches both Heading and Table of Contents blocks.
 		// The latter contains "heading" in its description.
 		await expect(
-			page.getByRole( 'button', { name: 'Heading block styles' } )
+			page.getByRole( 'button', { name: 'Heading', exact: true } )
 		).toBeVisible();
 		await expect(
 			page.getByRole( 'button', {
-				name: 'Table of Contents block styles',
+				name: 'Table of Contents',
 			} )
 		).toBeVisible();
 	} );
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index 26224a83e27ebd..3e30f764811b1f 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -29,13 +29,14 @@ test.describe( 'Push to Global Styles button', () => {
 		await page.keyboard.type( 'A heading' );
 
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		const settingsPanel = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
 
 		// Navigate to Styles -> Blocks -> Heading -> Typography
 		await topBar.getByRole( 'button', { name: 'Styles' } ).click();
-		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
-		await page
-			.getByRole( 'button', { name: 'Heading block styles' } )
-			.click();
+		await settingsPanel.getByRole( 'button', { name: 'Blocks' } ).click();
+		await settingsPanel.getByRole( 'button', { name: 'Heading' } ).click();
 
 		// Headings should not have uppercase
 		await expect(
@@ -95,9 +96,9 @@ test.describe( 'Push to Global Styles button', () => {
 		await page
 			.getByRole( 'button', { name: 'Styles', exact: true } )
 			.click();
-		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
-		await page
-			.getByRole( 'button', { name: 'Heading block styles' } )
+		await page.getByRole( 'button', { name: 'Blocks' } ).click();
+		await settingsPanel
+			.getByRole( 'button', { name: 'Heading', exact: true } )
 			.click();
 
 		// Headings should now have uppercase
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 9a34f30f82ff9c..c94049872edcf6 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -97,8 +97,8 @@ test.describe( 'Style Book', () => {
 	test( 'should allow to return Global Styles root when example is clicked', async ( {
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Blocks styles"]' );
-		await page.click( 'role=button[name="Heading block styles"]' );
+		await page.click( 'role=button[name="Blocks"]' );
+		await page.click( 'role=button[name="Heading"]' );
 
 		await page
 			.frameLocator( '[name="style-book-canvas"]' )
@@ -111,7 +111,7 @@ test.describe( 'Style Book', () => {
 		await page.click( 'role=button[name="Back"]' );
 
 		await expect(
-			page.locator( 'role=button[name="Blocks styles"]' )
+			page.locator( 'role=button[name="Blocks"]' )
 		).toBeVisible();
 	} );
 
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index c4dad7c7d7546c..9c4243b0d171f6 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -78,23 +78,23 @@ test.describe( 'Global styles variations', () => {
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click( 'role=button[name="Back"i]' );
-		await page.click( 'role=button[name="Colors styles"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
 
 		await expect(
 			page.locator(
-				'role=button[name="Color Background styles"i] >> .component-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Color Text styles"i] >> .component-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
 
 		await page.click( 'role=button[name="Back"i]' );
-		await page.click( 'role=button[name="Typography styles"i]' );
-		await page.click( 'role=button[name="Typography Text styles"i]' );
+		await page.click( 'role=button[name="Typography"i]' );
+		await page.click( 'role=button[name="Text"i]' );
 
 		await expect(
 			page.locator( 'css=.components-font-size-picker__header__hint' )
@@ -114,23 +114,23 @@ test.describe( 'Global styles variations', () => {
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 		await page.click( 'role=button[name="Back"i]' );
-		await page.click( 'role=button[name="Colors styles"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
 
 		await expect(
 			page.locator(
-				'role=button[name="Color Background styles"i] >> .component-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Color Text styles"i] >> .component-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
 
 		await page.click( 'role=button[name="Back"i]' );
-		await page.click( 'role=button[name="Typography styles"i]' );
-		await page.click( 'role=button[name="Typography Text styles"i]' );
+		await page.click( 'role=button[name="Typography"i]' );
+		await page.click( 'role=button[name="Text"i]' );
 
 		// TODO: to avoid use classnames to locate these elements,
 		//  we could provide accessible attributes to the source code in packages/components/src/font-size-picker/index.js.
@@ -156,7 +156,7 @@ test.describe( 'Global styles variations', () => {
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click( 'role=button[name="Back"i]' );
-		await page.click( 'role=button[name="Colors styles"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
 		await page.click( 'role=button[name="Edit palette"i]' );
 
 		await expect(
diff --git a/test/e2e/specs/site-editor/styles.spec.js b/test/e2e/specs/site-editor/styles.spec.js
index 8da9aa95c67567..63a051bf6b92d7 100644
--- a/test/e2e/specs/site-editor/styles.spec.js
+++ b/test/e2e/specs/site-editor/styles.spec.js
@@ -40,9 +40,9 @@ test.describe( 'Styles', () => {
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
 		// Navigate to Styles -> Blocks -> Heading -> Typography
 		await topBar.getByRole( 'button', { name: 'Styles' } ).click();
-		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks' } ).click();
 		await page
-			.getByRole( 'button', { name: 'Social Icons block styles' } )
+			.getByRole( 'button', { name: 'Social Icons', exact: true } )
 			.click();
 
 		// Find the second padding control and change the padding value
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index f48c819c3a0891..e0b00fe1e59460 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -75,10 +75,8 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Colors styles' } ).click();
-		await page
-			.getByRole( 'button', { name: 'Color Background styles' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Colors' } ).click();
+		await page.getByRole( 'button', { name: 'Background' } ).click();
 		await page
 			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
 			.click( { force: true } );