Duplicate ids on reference pages

[schalkneethling]

Summary

I ran the below scripts on a reference page and discovered that we have duplicate ids(toc-entries) for the TOC. I ran this through an HTML validator and it also produced the same error.

(function () {
  const allIdElements = document.documentElement.querySelectorAll("[id]");
  const ids = Array.from(allIdElements).map((element) => element.id);

  const duplicateElements = [];
  const duplicateIds = new Set();
  const uniqueIds = [];

  ids.forEach((id) => {
    if (!uniqueIds.includes(id)) {
      uniqueIds.push(id);
    } else {
      duplicateIds.add(id);
    }
  });

  duplicateIds.forEach((id) => {
    duplicateElements.push(document.querySelectorAll(`#${id}`));
  });

  console.log(duplicateElements);
})();

URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Reproduction steps

See summary

Expected behavior

There should be no duplicate id attributes on the page.

Actual behavior

See summary

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Mac OS

Screenshot

No response

Anything else?

No response

Validations

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[schalkneethling]

I am also seeing it on the homepage. Here it refers to the circle elements in the mandala SVG.

[schalkneethling]

This also means that we have duplicate TOC landmarks

[nschonni]

👍 came here to report the same thing, and it appears to be part of the template, since the same errors are are on all pages. EX: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement%2Fabbr

[caugner]

The reason is that we have two versions (mobile and desktop) of the same TOC in the DOM.

A solution would probably be to use CSS classes in favor of the IDs.