Site Editor: routing should update the document title

[afercia]

Description

From a user experience perspective, navigation in Single Page Applications (SPA) should emulate as much as possible the 'traditional' navigation mechanism (page load).

The Site Editor is basically a SPA that implements a routing mechanism. So far so good, the routing mechanism works well.

However, the document title is not updated. It's always the same. This has a few consequences that aren't limited to accessibility. It's a known usability and accessibility issue with SPAs, at the point that Dan Abramov himself built a little tool to solve it, a few years ago. See https://github.com/gaearon/react-document-title

1
The entries in the browser history have all the same name. This makes impossible for users to efficiently use a native browser feature. When trying to navigate through the browser fully history, users can;t distinguish the history entries. To reproduce:

• Go to the Site Editor.
• Navigate multiple times through the Templates and Template parts, just to fill the browser history.
• Click and hold the browser Back button.
• Observe the history entries have all the same name, which makes the browser history arguably usable.

Screenshot:

• Same happens when opening the browser fully history page, typically under the browser 'History' menu > 'Show full history' or something along that line. In Chrome, it will open the full history at: chrome://history/
• Since the Site Editor history entries have all the same name, this native browser feature is basically unusable.

2
Minor: Bookmarking a page is a native browsers feature. When bookmarking multiple Site Editor pages, by default they will all have the same name. Distinguishing the bookmarks would be impossible. Users would be forced to edit the bookmark title each time they bookmark a Site Editor page.

3
Important for a11y: Navigation through the Site Editor pages is announced with a speak message via useTitle. The message text appends document.title to the text Now displaying: . Unfortunately, since the document title never updates, the speak message is always the same and it's basically useless.
When navigating, screen reader users will always get the same audible message, e.g.:

Now displaying: Editor (beta) ‹ {site title} — WordPress

Screenshots:

Note: one more issue with SPAs navigation is about where initial focus should land after navigation. I will reate a separate issue for that.

Step-by-step reproduction instructions

• Go to the site editor
• Navigate through the Templates and Template parts.
• Observe the document title doesn't updated.
• Click and hold your Browser Back button.
• Observe the History entries have all the same name.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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