From 33252824621ef4b3f1df5f4a0b719ec7b55ee7bb Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 6 May 2026 19:08:59 +0900 Subject: [PATCH 1/3] Admin UI: change default heading level from h2 to h1 (#77617) * admin-ui: Change default heading level to 1 in Page Header * Update CHANGELOG.md * Update all pages * Remove heading level from experimental Dashboard * edit-site: Explicitly set headingLevel=2 for Page components in site editor These Page components are rendered inside nested landmark regions within the site editor layout, where h2 is the semantically correct heading level. They were relying on the old default of 2 which changed to 1. Co-authored-by: simison Co-authored-by: retrofox Co-authored-by: ciampo --- packages/admin-ui/CHANGELOG.md | 4 ++++ packages/admin-ui/src/page/header.tsx | 2 +- packages/edit-site/src/components/page-patterns/index.js | 1 + .../edit-site/src/components/page-templates/index-legacy.js | 1 + packages/edit-site/src/components/page-templates/index.js | 1 + packages/edit-site/src/components/post-list/index.js | 1 + .../edit-site/src/components/sidebar-global-styles/index.js | 1 + routes/connectors-home/stage.tsx | 1 - routes/font-list/stage.tsx | 2 +- routes/navigation-edit/stage.tsx | 1 + routes/navigation-list/stage.tsx | 1 + routes/pattern-list/stage.tsx | 1 + routes/post-list/stage.tsx | 1 + routes/styles/stage.tsx | 1 + routes/template-part-list/stage.tsx | 1 + 15 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/admin-ui/CHANGELOG.md b/packages/admin-ui/CHANGELOG.md index df62419d511583..1d6dee4fb6030d 100644 --- a/packages/admin-ui/CHANGELOG.md +++ b/packages/admin-ui/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Change default `headingLevel` for the `Page` component's header from `2` to `1`, meaning from `h2` to `h1`. If you need to keep previous behaviour, use `` [#77617](https://github.com/WordPress/gutenberg/pull/77617) + ## 1.8.0 (2026-02-18) ### Enhancements diff --git a/packages/admin-ui/src/page/header.tsx b/packages/admin-ui/src/page/header.tsx index 322212a389f022..92263705335a52 100644 --- a/packages/admin-ui/src/page/header.tsx +++ b/packages/admin-ui/src/page/header.tsx @@ -9,7 +9,7 @@ import { Stack } from '@wordpress/ui'; import { SidebarToggleSlot } from './sidebar-toggle-slot'; export default function Header( { - headingLevel = 2, + headingLevel = 1, breadcrumbs, badges, title, diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 276758fcd9a090..5b924ceb78e18b 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -202,6 +202,7 @@ export default function DataviewsPatterns() { } > } > { labels?.add_new_item && canCreateRecord && ( diff --git a/packages/edit-site/src/components/sidebar-global-styles/index.js b/packages/edit-site/src/components/sidebar-global-styles/index.js index a8fbc1d8e1353b..78919a26d7ad72 100644 --- a/packages/edit-site/src/components/sidebar-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-global-styles/index.js @@ -97,6 +97,7 @@ export default function SidebarGlobalStyles() { } className="edit-site-styles" title={ __( 'Styles' ) } + headingLevel={ 2 } > + setActiveTab( tabId ) } diff --git a/routes/navigation-edit/stage.tsx b/routes/navigation-edit/stage.tsx index 9d750b874678df..a12bdacba89c16 100644 --- a/routes/navigation-edit/stage.tsx +++ b/routes/navigation-edit/stage.tsx @@ -43,6 +43,7 @@ function NavigationEditStage() { return ( diff --git a/routes/template-part-list/stage.tsx b/routes/template-part-list/stage.tsx index e8b3ef9c48745d..86c47ba314a7e8 100644 --- a/routes/template-part-list/stage.tsx +++ b/routes/template-part-list/stage.tsx @@ -250,6 +250,7 @@ function TemplatePartList() { return ( Date: Wed, 6 May 2026 18:54:13 +0900 Subject: [PATCH 2/3] Admin UI: Fix nested landmark in Page header The Page header was rendered as a `
` element nested inside NavigableRegion's `role="region"` wrapper. Because `role="region"` is not an HTML sectioning element, the inner `
` retained its implicit `banner` role, producing a banner landmark nested inside a region landmark. Drop the `
` element so the wrapping region remains the sole landmark for the page surface. --- packages/admin-ui/src/page/header.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/admin-ui/src/page/header.tsx b/packages/admin-ui/src/page/header.tsx index 92263705335a52..94c6271b4ae73b 100644 --- a/packages/admin-ui/src/page/header.tsx +++ b/packages/admin-ui/src/page/header.tsx @@ -27,11 +27,7 @@ export default function Header( { } ) { const HeadingTag = `h${ headingLevel }` as const; return ( - } - > + { showSidebarToggle && ( From 427c4b6984fac7ca36c62cd6492da7f21d3a60d6 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 8 May 2026 18:47:18 +0900 Subject: [PATCH 3/3] Admin UI: Add CHANGELOG entry for nested landmark fix Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/admin-ui/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/admin-ui/CHANGELOG.md b/packages/admin-ui/CHANGELOG.md index 1d6dee4fb6030d..8c75c91ca7edab 100644 --- a/packages/admin-ui/CHANGELOG.md +++ b/packages/admin-ui/CHANGELOG.md @@ -6,6 +6,10 @@ - Change default `headingLevel` for the `Page` component's header from `2` to `1`, meaning from `h2` to `h1`. If you need to keep previous behaviour, use `` [#77617](https://github.com/WordPress/gutenberg/pull/77617) +### Bug Fixes + +- `Page`: Fix nested landmark in header. [#78001](https://github.com/WordPress/gutenberg/pull/78001) + ## 1.8.0 (2026-02-18) ### Enhancements