Sub-optimal page title vocal announcement

[KittyGiraudel]

What version of Next.js are you using?

10.1.x

What version of Node.js are you using?

14.15.x

What browser are you using?

Brave

What operating system are you using?

macOS

How are you deploying your application?

next export

Describe the Bug

Originally issued as a comment: #23086 (comment).

---

PR #23086 introduced an accessibility improvement aiming at making same-page routing more accessible by voicing the page title upon route change. That’s great, and it works alright as far as I can tell. That being said, I think the logic might be a little backwards.

In my opinion, we should use the document.title first if available, since this is what would happen in a non-SPA scenario upon page change. And if we do not have a page title, then we should use the h1 (if any, of course). Right now it will announce the content of the h1, despite having a perfectly clean document.title, which I think is not the best experience.

next.js/packages/next/client/route-announcer.tsx

Lines 15 to 40 in 19accb6

	useEffect(
	() => {
	if (!initialPathLoaded.current) {
	initialPathLoaded.current = true
	return
	}
	let newRouteAnnouncement
	const pageHeader = document.querySelector('h1')
	if (pageHeader) {
	newRouteAnnouncement = pageHeader.innerText || pageHeader.textContent
	}
	if (!newRouteAnnouncement) {
	if (document.title) {
	newRouteAnnouncement = document.title
	} else {
	newRouteAnnouncement = asPath
	}
	}
	setRouteAnnouncement(newRouteAnnouncement)
	},
	// TODO: switch to pathname + query object of dynamic route requirements
	[asPath]
	)

I’m happy opening an issue/PR if you think this is a valid concern.

Pinging @kyleboss, @shuding and @olpeh since they were all involved in the PR.

Expected Behavior

Taking the home page of the Gorillas website as an example: the page title is “Home | Gorillas” while the h1 is “Groceries delivered in 10 minutes”. Navigating to the home page should announce “Home | Gorillas”, not the baseline (or catch phrase, or whatever we want to name it). And while in many cases, the h1 and the document.title would be in sync, I believe this is not always the case. In a case like this, we also don’t want the h1 to just contain “Home.”

To Reproduce

1. Open https://gorillas.io/en/accessibility-statement with VoiceOver.
2. Open the menu and click “Home”.
3. Listen to the page title announcement.

[shuding]

Thanks @KittyGiraudel, yeah I like the idea of taking document.title first, feel free to open a PR! 👍

[davidluhr]

Just started work on a new client's NextJS app today and was happy to find this issue was already reported and that @KittyGiraudel happened to fix it today. Thank you for this!

I'm excited to inherit this improvement, since it's something I noted in my initial accessibility assessment.

[KittyGiraudel]

@shuding Shall we close this?

[shuding]

Oops, sure this can be closed now!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.