@wordpress/admin-ui 1.8.1-next.v.202602241322.0 → 1.9.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 1.9.0 (2026-03-04)
+
+### Bug Fixes
+
+- Fix type mismatch between Page `title` (ReactNode) and NavigableRegion `ariaLabel` (string) by adding an optional `ariaLabel` prop to Page that falls back to `title` when it is a string. [#75899](https://github.com/WordPress/gutenberg/pull/75899/)
+
 ## 1.8.0 (2026-02-18)
 
 ### Enhancements

package/build/page/index.cjs

@@ -46,11 +46,13 @@ function Page({
   children,
   className,
   actions,
+  ariaLabel,
   hasPadding = false,
   showSidebarToggle = true
 }) {
   const classes = (0, import_clsx.default)("admin-ui-page", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_region.default, { className: classes, ariaLabel: title, children: [
+  const effectiveAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_region.default, { className: classes, ariaLabel: effectiveAriaLabel, children: [
     (title || breadcrumbs || badges) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_header.default,
       {

package/build/page/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AA0BhC;AAxBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAUI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AAEjD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AA8BhC;AA5BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAWI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": ["clsx", "NavigableRegion", "Header"]
 }

package/build-module/page/index.mjs

@@ -12,11 +12,13 @@ function Page({
   children,
   className,
   actions,
+  ariaLabel,
   hasPadding = false,
   showSidebarToggle = true
 }) {
   const classes = clsx("admin-ui-page", className);
-  return /* @__PURE__ */ jsxs(NavigableRegion, { className: classes, ariaLabel: title, children: [
+  const effectiveAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "");
+  return /* @__PURE__ */ jsxs(NavigableRegion, { className: classes, ariaLabel: effectiveAriaLabel, children: [
     (title || breadcrumbs || badges) && /* @__PURE__ */ jsx(
       Header,
       {

package/build-module/page/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AA0BhC,SAEE,KAFF;AAxBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAUI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AAEjD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AA8BhC,SAEE,KAFF;AA5BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAWI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": []
 }

package/build-types/page/index.d.ts

@@ -1,4 +1,4 @@
-declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, hasPadding, showSidebarToggle, }: {
+declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, ariaLabel, hasPadding, showSidebarToggle, }: {
     breadcrumbs?: React.ReactNode;
     badges?: React.ReactNode;
     title?: React.ReactNode;
@@ -6,6 +6,7 @@ declare function Page({ breadcrumbs, badges, title, subTitle, children, classNam
     children: React.ReactNode;
     className?: string;
     actions?: React.ReactNode;
+    ariaLabel?: string;
     hasPadding?: boolean;
     showSidebarToggle?: boolean;
 }): import("react").JSX.Element;

package/build-types/page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAYA,iBAAS,IAAI,CAAE,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAwBA;kBA5CQ,IAAI;;;;;;AAgDb,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAYA,iBAAS,IAAI,CAAE,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BA0BA;kBAhDQ,IAAI;;;;;;AAoDb,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/admin-ui",
-	"version": "1.8.1-next.v.202602241322.0+bce7cff88",
+	"version": "1.9.0",
 	"description": "Generic components to be used in the Admin UI.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -45,11 +45,11 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/base-styles": "^6.16.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/components": "^32.3.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/element": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/i18n": "^6.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/route": "^0.6.1-next.v.202602241322.0+bce7cff88",
+		"@wordpress/base-styles": "^6.17.0",
+		"@wordpress/components": "^32.3.0",
+		"@wordpress/element": "^6.41.0",
+		"@wordpress/i18n": "^6.14.0",
+		"@wordpress/route": "^0.7.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -58,5 +58,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "943dde7f0b600ce238726c36284bc9f70ce0ffa4"
+	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
 }

package/src/page/index.tsx

@@ -18,6 +18,7 @@ function Page( {
 	children,
 	className,
 	actions,
+	ariaLabel,
 	hasPadding = false,
 	showSidebarToggle = true,
 }: {
@@ -28,13 +29,16 @@ function Page( {
 	children: React.ReactNode;
 	className?: string;
 	actions?: React.ReactNode;
+	ariaLabel?: string;
 	hasPadding?: boolean;
 	showSidebarToggle?: boolean;
 } ) {
 	const classes = clsx( 'admin-ui-page', className );
+	const effectiveAriaLabel =
+		ariaLabel ?? ( typeof title === 'string' ? title : '' );
 
 	return (
-		<NavigableRegion className={ classes } ariaLabel={ title }>
+		<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>
 			{ ( title || breadcrumbs || badges ) && (
 				<Header
 					breadcrumbs={ breadcrumbs }