lowercase all anchor IDs and recover if not lowercase (#2266)

* lowercase all anchor IDs and recover if not lowercase * fix tests
mdn · Jan 6, 2021 · 54ad37a · 54ad37a
1 parent a63b22b
commit 54ad37a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx
@@ -84,6 +84,20 @@ export function Document(props /* TODO: define a TS interface for this */) {
     }
   }, [doc, error]);
 
+  React.useEffect(() => {
+    const location = document.location;
+    // Did you arrive on this page with a location hash?
+    if (location.hash && location.hash !== location.hash.toLowerCase()) {
+      // The location hash isn't lowercase. That probably means it's from before
+      // we made all `<h2 id>` and `<h3 id>` values always lowercase.
+      // Let's see if it can easily be fixed, but let's be careful and
+      // only do this if there is an element that matches.
+      if (document.querySelector(location.hash.toLowerCase())) {
+        location.hash = location.hash.toLowerCase();
+      }
+    }
+  }, []);
+
   if (!doc && !error) {
     return <LoadingDocumentPlaceholder />;
   }

diff --git a/client/src/document/ingredients/utils.tsx b/client/src/document/ingredients/utils.tsx
@@ -1,22 +1,22 @@
 export function DisplayH2({ id, title }: { id: string; title: string }) {
   return (
-    <h2 id={id}>
+    <h2 id={id.toLowerCase()}>
       <Permalink title={title} id={id} />
     </h2>
   );
 }
 
 export function DisplayH3({ id, title }: { id: string; title: string }) {
   return (
-    <h3 id={id}>
+    <h3 id={id.toLowerCase()}>
       <Permalink title={title} id={id} />
     </h3>
   );
 }
 
 function Permalink({ id, title }: { id: string; title: string }) {
   return (
-    <a href={`#${id}`} title={`Permalink to ${title}`}>
+    <a href={`#${id.toLowerCase()}`} title={`Permalink to ${title}`}>
       {title}
     </a>
   );

diff --git a/client/src/document/organisms/toc/index.tsx b/client/src/document/organisms/toc/index.tsx
@@ -47,7 +47,7 @@ export function TOC({ toc }: { toc: Toc[] }) {
         <ul id="toc-entries" className={showTOC ? "show-toc" : undefined}>
           {toc.map((item) => (
             <li key={item.id}>
-              <a href={`#${item.id}`}>{item.text}</a>
+              <a href={`#${item.id.toLowerCase()}`}>{item.text}</a>
             </li>
           ))}
         </ul>

diff --git a/testing/tests/headless.test.js b/testing/tests/headless.test.js
@@ -61,7 +61,7 @@ describe("Basic viewing of functional pages", () => {
     await expect(page).toMatchElement("h1", {
       text: "A Test Introduction to CSS layout",
     });
-    await expect(page).toMatchElement("#Flexbox", {
+    await expect(page).toMatchElement("#flexbox", {
       text: "Flexbox",
     });
     await expect(page).toMatchElement(
@@ -70,7 +70,7 @@ describe("Basic viewing of functional pages", () => {
     await expect(page).toMatchElement(
       `iframe.live-sample-frame.sample-code-frame[src$="${flexSample2Uri}"]`
     );
-    await expect(page).toMatchElement("#Grid_Layout", {
+    await expect(page).toMatchElement("#grid_layout", {
       text: "Grid Layout",
     });
     await expect(page).toMatchElement(
@@ -111,7 +111,7 @@ describe("Basic viewing of functional pages", () => {
     await expect(page).toMatchElement("h1", {
       text: "A Test Introduction to CSS Flexbox Layout",
     });
-    await expect(page).toMatchElement("#Flexbox", {
+    await expect(page).toMatchElement("#flexbox", {
       text: "Flexbox",
     });
     await expect(page).toMatchElement("#Flex_1 > pre.css.notranslate", {
@@ -137,7 +137,7 @@ describe("Basic viewing of functional pages", () => {
     await expect(page).toMatchElement("h1", {
       text: "A Test Introduction to CSS Grid Layout",
     });
-    await expect(page).toMatchElement("#Grid_Layout", {
+    await expect(page).toMatchElement("#grid_layout", {
       text: "Grid Layout",
     });
     await expect(page).toMatchElement("#Grid_1 > pre.css.notranslate", {