SVG `<title>` tag is either removed, or used as page title

[alexbassy]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Mon Oct 31 2022 11:57:49 GMT+0100 (Central European Standard Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 13.0.1-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Version 106.0.5249.119

How are you deploying your application? (if relevant)

No response

Describe the Bug

The <title> tag inside an inlined SVG is either removed from the markup (hindering accessibility) OR* it is actually become the meta page title of the document (the title you see in your browser tab that is defined in app/head.tsx).

I noticed this behaviour on my own site. I have an inline SVG in the footer of the root layout. When I run the dev server or build the site, the <title> of the page was the <title> of this SVG file. Only when I removed the title was it replaced with the title defined in app/head.tsx.

I tried to make a minimal reproduction of this issue in StackBlitz. While I couldn’t get 100% there (the built page shows the correct title), you can still observe the behaviour if you change the <title> of the SVG and save the file. Furthermore, when the SVG is inspected in dev tools, the <title> attribute is not there.

Here is a video reproduction using Safari, but I was otherwise using Chrome for everything else

https://user-images.githubusercontent.com/1243909/198995315-a34502fe-35fe-476d-9b30-4214ef2c56f1.mp4

Expected Behavior

• The <title> attribute of the SVG is not removed
• The <title> of the document is only taken from head.tsx

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-cugnsk?file=components%2FInlineSVG.tsx

To Reproduce

1. Open reproduction link
2. Click “open in new tab” at the top right, so you can see the page title
3. Back in StackBlitz, modify the title of the SVG
4. Observe the page tab title of the page. It will now be what you put into the SVG
5. Inspect the SVG and observe lack of <title> element

[timneutkens]

Thanks! This is related to the way React finds title and injects it into the head. @gnoff will have a look.

[ariesclark]

This is a blocking issue for a project migration, is there any estimate on when this will be resolved? Thanks very much.

[gnoff]

~@ariesclark this should be fixed in the latest release. Are you still seeing the issue?~

will be fixed after: https://github.com/vercel/next.js/pull/42639

[ariesclark]

This issue is now resolved.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.