Admin UI: allow using logo in in the header

[simison]

When using <Page> component from @wordpress/admin-ui package to build new pages, consumers might want to show some banding in the header next to the page name:

<Page
	title={
		<HStack alignment="center">
			<Icon
				icon={
					<SVG>
						<Path d="M5 4v3h5.5v12h3V7H19V4z" />
					</SVG>
				}
				size={ 20 }
			/>
			My Plugin
		</HStack>
	}
	subTitle={
		__( 'Lorem ipsum dolor sit amet..', 'my-plugin' )
	}
	/>
	...
</Page>

<Page> and its Header sub-component accepts React nodes in title just fine, so above will work:

gutenberg/packages/admin-ui/src/page/index.tsx

Line 26 in 17f3eb3

title?: React.ReactNode;

gutenberg/packages/admin-ui/src/page/header.tsx

Line 25 in 17f3eb3

title?: React.ReactNode;

However, when Page then passes the same title to navigable-region, it now expects String:

gutenberg/packages/admin-ui/src/page/index.tsx

Line 37 in 17f3eb3

<NavigableRegion className={ classes } ariaLabel={ title }>

gutenberg/packages/admin-ui/src/navigable-region/index.tsx

Line 17 in 17f3eb3

ariaLabel: string;

So the props are in conflict and we can't actually pass logos or other than strings as title.

Possible solutions:

• Make aria label optional and/or allow passing accessibleTitle string, which takes precedence over title for navigable region: Admin UI: Fix type mismatch between Page title and NavigableRegion ariaLabel #75899
• Attempt to convert title to true string before passing to navigable region
• Allow passing icon (or similar name) to the Page. The Header component then controls symbol rendering, size and spacing, as well as within the Breadcrumbs navigation:

[simison]

Ah, @jeherve was quicker so I'll close as duplicate of #75898 :-)