Admin UI: Type mismatch between Page title prop and NavigableRegion ariaLabel

[jeherve]

Description

The Page component in @wordpress/admin-ui accepts title as React.ReactNode, but passes it directly to NavigableRegion as the ariaLabel prop, which is typed as string and renders it as an aria-label DOM attribute.

If a caller passes JSX as title (e.g., a title with an icon), the aria-label attribute renders as [object Object], breaking accessibility for screen readers.

I expect aria-label to always contain a meaningful text string, or be omitted when a text string cannot be determined.

Step-by-step reproduction instructions

1. Open packages/admin-ui/src/page/index.tsx
2. Note that title is typed as React.ReactNode (line 26)
3. Note that title is passed directly as ariaLabel to NavigableRegion (line 37)
4. Open packages/admin-ui/src/navigable-region/index.tsx
5. Note that ariaLabel is typed as string (line 17) and rendered as aria-label on the DOM element (line 29)
6. Use the Page component with a JSX title: <Page title={<><Icon /><span>My Page</span></>}>
7. Inspect the rendered DOM — the region element's aria-label is [object Object]

// Current behavior — type mismatch allows this, but produces broken a11y
<Page title={<><MyIcon /><span>Dashboard</span></>}>
  <Content />
</Page>
// Renders: <div aria-label="[object Object]" role="region" ...>

Environment info

• Gutenberg trunk (latest)
• This is a TypeScript type/API issue, not browser-specific

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure