Improve the headings hierarchy in the site editor page

packages/components/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 -   `Autocomplete`: Add heading and fix type for `onReplace` in README. ([#49798](https://github.com/WordPress/gutenberg/pull/49798)).
 
+### Internal
+
+-   `Navigation`: Make sure `NavigationMenu` and `NavigationGroup` don't render an empty `aria-labelledby` attribute ([#42495](https://github.com/WordPress/gutenberg/pull/42495)).
+
 ## 23.8.0 (2023-04-12)
 
 ### Internal

packages/components/src/navigation/group/index.tsx

@@ -59,7 +59,10 @@ export function NavigationGroup( {
 						{ title }
 					</GroupTitleUI>
 				) }
-				<ul aria-labelledby={ groupTitleId } role="group">
+				<ul
+					aria-labelledby={ title ? groupTitleId : undefined }
+					role="group"
+				>
 					{ children }
 				</ul>
 			</li>

packages/components/src/navigation/menu/index.tsx

@@ -87,7 +87,7 @@ export function NavigationMenu( props: NavigationMenuProps ) {
 				) }
 
 				<NavigableMenu>
-					<ul aria-labelledby={ menuTitleId }>
+					<ul aria-labelledby={ title ? menuTitleId : undefined }>
 						{ children }
 						{ search && ! isSearchDebouncing && (
 							<NavigationSearchNoResultsFound search={ search } />

packages/edit-site/src/components/header-edit-mode/document-actions/index.js

@@ -129,7 +129,7 @@ export default function DocumentActions() {
 				<Text
 					size="body"
 					className="edit-site-document-actions__title"
-					as="h1"
+					as="h2"
 				>
 					<VisuallyHidden as="span">
 						{ sprintf(

packages/edit-site/src/components/header-edit-mode/document-actions/style.scss

@@ -30,18 +30,14 @@
 		}
 	}
 
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
-
-		// See comment above about min-width
-		min-width: 0;
-	}
-
 	.edit-site-document-actions__title {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		color: currentColor;
+
+		// See comment above about min-width
+		min-width: 0;
 	}
 
 	.edit-site-document-actions__secondary-item {

packages/edit-site/src/components/list/header.js

@@ -30,7 +30,7 @@ export default function Header( { templateType } ) {
 
 	return (
 		<header className="edit-site-list-header">
-			<Heading level={ 1 } className="edit-site-list-header__title">
+			<Heading level={ 2 } className="edit-site-list-header__title">
 				{ postType.labels?.name }
 			</Heading>
 

packages/edit-site/src/components/list/table.js

@@ -98,7 +98,7 @@ export default function Table( { templateType } ) {
 						role="row"
 					>
 						<td className="edit-site-list-table-column" role="cell">
-							<Heading level={ 4 }>
+							<Heading level={ 3 } size={ 16 }>
 								<Link
 									params={ {
 										postId: template.id,

packages/edit-site/src/components/sidebar-navigation-screen/index.js

@@ -63,7 +63,10 @@ export default function SidebarNavigationScreen( {
 				{ actions }
 			</HStack>
 
-			<nav className="edit-site-sidebar-navigation-screen__content">
+			<nav
+				aria-label={ __( 'Editor' ) }
+				className="edit-site-sidebar-navigation-screen__content"
+			>
 				{ description && (
 					<p className="edit-site-sidebar-navigation-screen__description">
 						{ description }

packages/edit-site/src/style.scss

@@ -33,23 +33,22 @@
 @import "./components/style-book/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
-html #wpadminbar {
+body.js #wpadminbar {
 	display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
 	padding-top: 0;
 }
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
 html.wp-toolbar {
 	background: $white;
-	padding-top: 0;
 }
 
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
@@ -73,6 +72,10 @@ body.site-editor-php {
 		top: 0;
 	}
 
+	.no-js & {
+		min-height: 0;
+	}
+
 	.interface-interface-skeleton {
 		top: 0;
 	}

test/e2e/specs/site-editor/browser-history.spec.js

@@ -54,7 +54,10 @@ test.describe( 'Site editor browser history', () => {
 			'/wp-admin/site-editor.php?path=%2Fwp_template%2Fall'
 		);
 
-		const title = page.getByRole( 'heading', { level: 1 } );
+		const header = page.getByRole( 'region', {
+			name: 'Templates list - Header',
+		} );
+		const title = header.getByRole( 'heading', { level: 2 } );
 		await expect( title ).toHaveText( 'Templates' );
 	} );
 } );

test/e2e/specs/site-editor/title.spec.js

@@ -23,7 +23,7 @@ test.describe( 'Site editor title', () => {
 			canvas: 'edit',
 		} );
 		const title = page.locator(
-			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
+			'role=region[name="Editor top bar"i] >> role=heading[level=2]'
 		);
 
 		await expect( title ).toHaveText( 'Editing template: Index' );
@@ -40,7 +40,7 @@ test.describe( 'Site editor title', () => {
 			canvas: 'edit',
 		} );
 		const title = page.locator(
-			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
+			'role=region[name="Editor top bar"i] >> role=heading[level=2]'
 		);
 
 		await expect( title ).toHaveText( 'Editing template part: header' );