From c94f29eff4a25487133cee1bb23757bc34c8d748 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 13:08:10 +0100
Subject: [PATCH 1/6] fix(macros): add "no-link" class to text section titles

Link section titles have two additional CSS properties that caused
them to be positioned differently than pure text section titles.
---
 kumascript/macros/CSSRef.ejs      | 4 ++--
 kumascript/macros/HTMLSidebar.ejs | 2 +-
 kumascript/macros/HTTPSidebar.ejs | 4 ++--
 kumascript/macros/JSRef.ejs       | 4 ++--
 kumascript/macros/MathMLRef.ejs   | 6 +++---
 kumascript/macros/SVGRef.ejs      | 6 +++---
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/kumascript/macros/CSSRef.ejs b/kumascript/macros/CSSRef.ejs
index fa5cd267f43a..be310f50c468 100644
--- a/kumascript/macros/CSSRef.ejs
+++ b/kumascript/macros/CSSRef.ejs
@@ -1182,7 +1182,7 @@ async function buildPropertylist(pages, title) {
   <%-await buildSublist(functions, 'Functions');%>
   <%-await buildSublist(types, 'Types');%>
 
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="no-link"><strong><%=text['Guides']%></strong></li>
   <li class="toggle">
       <details>
           <summary><%=text['Animations']%></summary>
@@ -1420,7 +1420,7 @@ async function buildPropertylist(pages, title) {
     </ol>
   </li>
 
-  <li><strong><%=text['Tools']%></strong></li>
+  <li class="no-link"><strong><%=text['Tools']%></strong></li>
   <li class="toggle">
     <ol>
       <li><%-smartLink(`${cssURL}CSS_Colors/Color_picker_tool`, null, text['Color_picker_tool'], cssURL)%></li>
diff --git a/kumascript/macros/HTMLSidebar.ejs b/kumascript/macros/HTMLSidebar.ejs
index 9bb3f6b0428d..f97dfc886999 100644
--- a/kumascript/macros/HTMLSidebar.ejs
+++ b/kumascript/macros/HTMLSidebar.ejs
@@ -400,7 +400,7 @@ var text = mdn.localStringMap({
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/HTML/Element/input'])%>
     </details>
   </li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="no-link"><strong><%=text['Guides']%></strong></li>
   <li>
     <ol>
       <li><a href="/<%=locale%>/docs/Web/HTML/Content_categories"><%=text["Content_categories"]%></a></li>
diff --git a/kumascript/macros/HTTPSidebar.ejs b/kumascript/macros/HTTPSidebar.ejs
index 590397b79cc9..11484ff37f2e 100644
--- a/kumascript/macros/HTTPSidebar.ejs
+++ b/kumascript/macros/HTTPSidebar.ejs
@@ -288,7 +288,7 @@ var text = mdn.localStringMap({
 <section id="Quick_links" data-macro="HTTPSidebar">
   <ol>
     <li><a href="/<%=locale%>/docs/Web/HTTP"><strong><%=text['HTTP']%></strong></a></li>
-    <li><strong><%=text['Guides']%></strong></li>
+    <li class="no-link"><strong><%=text['Guides']%></strong></li>
     <li class="toggle">
         <details>
             <summary><%=text['ResourcesURI']%></summary>
@@ -342,7 +342,7 @@ var text = mdn.localStringMap({
     <li><a href="/<%=locale%>/docs/Web/HTTP/Redirections"><%=text['Redirects']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Resources_and_specifications"><%=text['Resources']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Permissions_Policy"><%=text['Permissions_Policy']%></a></li>
-    <li><strong><%=text['Reference']%></strong></li>
+    <li class="no-link"><strong><%=text['Reference']%></strong></li>
     <li class="toggle">
         <details <%=state('Web/HTTP/Headers')%>>
             <summary><%=text['Headers']%></summary>
diff --git a/kumascript/macros/JSRef.ejs b/kumascript/macros/JSRef.ejs
index 18e74a289950..7e24045a02dc 100644
--- a/kumascript/macros/JSRef.ejs
+++ b/kumascript/macros/JSRef.ejs
@@ -216,7 +216,7 @@ async function renderOutput() {
     const resultOpen         = item.defaultOpened ?? false;
 
     if (index === 1) {
-      output += `<li><strong>${text.Inheritance}</strong></li>`;
+      output += `<li class="no-link"><strong>${text.Inheritance}</strong></li>`;
     }
 
     const link = web.smartLink(`${slugStdlib}/${resultSubPath}`, null, `<code>${resultTitle}</code>`, null, slugStdlib, "JSRef");
@@ -233,7 +233,7 @@ async function renderOutput() {
     }
 
     if (index === 0 && group.length > 0) {
-      output += `<li><strong>${text.Related}</strong></li>`;
+      output += `<li class="no-link"><strong>${text.Related}</strong></li>`;
       for (const groupItem of group) {
         const link = web.smartLink(`${slugStdlib}/${groupItem.replace(".", "/")}`, null, `<code>${groupItem}</code>`, null, slugStdlib, "JSRef");
         output += `<li><strong>${link}</strong></li>`;
diff --git a/kumascript/macros/MathMLRef.ejs b/kumascript/macros/MathMLRef.ejs
index 2d0e916e1f85..1385d7618b4d 100644
--- a/kumascript/macros/MathMLRef.ejs
+++ b/kumascript/macros/MathMLRef.ejs
@@ -57,7 +57,7 @@ async function getTitle(pageSlug) {
 <section id="Quick_links" data-macro="MathMLRef">
  <ol>
   <li><a href="/<%=locale%>/docs/Web/MathML"><strong>MathML</strong></a></li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="no-link"><strong><%=text['Guides']%></strong></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Authoring"><%=await getTitle("Authoring")%></a></li>
@@ -65,7 +65,7 @@ async function getTitle(pageSlug) {
     <li><a href="/<%=locale%>/docs/Web/MathML/Values"><%=await getTitle("Values")%></a></li>
     </ol>
   </li>
-  <li><strong><%=text['Reference']%></strong></li>
+  <li class="no-link"><strong><%=text['Reference']%></strong></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -79,7 +79,7 @@ async function getTitle(pageSlug) {
     </details>
   </li>
   <li><a href="/<%=locale%>/docs/Web/MathML/Attribute"><%=await getTitle("Attribute")%></a></li>
-  <li><strong><%=text['Examples']%></strong></li>
+  <li class="no-link"><strong><%=text['Examples']%></strong></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula"><%=await getTitle("Examples/Deriving_the_Quadratic_Formula")%></a></li>
diff --git a/kumascript/macros/SVGRef.ejs b/kumascript/macros/SVGRef.ejs
index 7f1dd3dc4206..5cb704f6da92 100644
--- a/kumascript/macros/SVGRef.ejs
+++ b/kumascript/macros/SVGRef.ejs
@@ -67,7 +67,7 @@ async function getTitle(pageSlug) {
 <section id="Quick_links" data-macro="SVGRef">
  <ol>
   <li><a href="/<%=locale%>/docs/Web/SVG"><strong>SVG</strong></a></li>
-  <li><strong><%=text['Tutorials']%></strong></li>
+  <li class="no-link"><strong><%=text['Tutorials']%></strong></li>
   <li class="toggle">
     <details>
       <summary><%=text['Introducing SVG from scratch']%></summary>
@@ -92,7 +92,7 @@ async function getTitle(pageSlug) {
       </ol>
     </details>
   </li>
-  <li><strong><%=text['Reference']%></strong></li>
+  <li class="no-link"><strong><%=text['Reference']%></strong></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -105,7 +105,7 @@ async function getTitle(pageSlug) {
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Attribute'])%>
     </details>
   </li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="no-link"><strong><%=text['Guides']%></strong></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/SVG/Applying_SVG_effects_to_HTML_content"><%=await getTitle("Applying_SVG_effects_to_HTML_content")%></a></li>

From 109bee702e73d2aaf2f4e0373b4198aca727c60f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 13:41:59 +0100
Subject: [PATCH 2/6] refactor(sidebar): replace `<strong>` with .section class

---
 client/src/document/organisms/sidebar/index.scss | 16 ++++++++--------
 kumascript/macros/APIRef.ejs                     |  4 ++--
 kumascript/macros/AddonSidebar.ejs               |  2 +-
 kumascript/macros/AddonSidebarMain.ejs           |  6 +++---
 kumascript/macros/CSSRef.ejs                     | 12 ++++++------
 kumascript/macros/DefaultAPISidebar.ejs          |  2 +-
 kumascript/macros/GlossarySidebar.ejs            |  2 +-
 kumascript/macros/HTMLSidebar.ejs                |  8 ++++----
 kumascript/macros/HTTPSidebar.ejs                |  6 +++---
 kumascript/macros/JSRef.ejs                      | 10 +++++-----
 kumascript/macros/JsSidebar.ejs                  |  6 +++---
 kumascript/macros/LearnSidebar.ejs               |  2 +-
 kumascript/macros/MathMLRef.ejs                  |  8 ++++----
 kumascript/macros/PWASidebar.ejs                 |  2 +-
 kumascript/macros/SVGRef.ejs                     |  8 ++++----
 kumascript/macros/WebAssemblySidebar.ejs         |  2 +-
 kumascript/macros/WebExtAPISidebar.ejs           |  2 +-
 kumascript/macros/XsltSidebar.ejs                |  2 +-
 18 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 57c1716cd891..bc8346ef6a6f 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -38,16 +38,16 @@
     }
   }
 
-  .no-link {
-    display: inline-flex;
-    padding: 0.25rem;
-  }
-
-  // TODO: Find these and add a class, if possible. These are section headings
-  strong {
+  li.section {
     display: flex;
     font-size: var(--type-base-font-size-rem);
-    margin-top: 1rem;
+    font-weight: var(--font-body-strong-weight);
+    letter-spacing: 0.02rem;
+    margin-top: 1.75rem;
+
+    &.no-link {
+      padding: 0.25rem;
+    }
   }
 
   li:first-of-type strong {
diff --git a/kumascript/macros/APIRef.ejs b/kumascript/macros/APIRef.ejs
index 6e7e59fe535f..f578bef16137 100644
--- a/kumascript/macros/APIRef.ejs
+++ b/kumascript/macros/APIRef.ejs
@@ -227,10 +227,10 @@ function buildIFList(interfaces, title) {
 // output
 output = '<section id="Quick_links" data-macro="APIRef"><ol>';
 if (group && webAPIGroups[0][group] && webAPIGroups[0][group].overview) {
-  output += `<li><strong>${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</strong></li>`;
+  output += `<li class="section">${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</li>`;
 }
 
-output += `<li><strong>${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</strong></li>`;
+output += `<li class="section">${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</li>`;
 
 if (ctors.length > 0) {
   output += await buildSublist(ctors, text['Constructor']);
diff --git a/kumascript/macros/AddonSidebar.ejs b/kumascript/macros/AddonSidebar.ejs
index 39b2cf1394d6..1def783ea310 100644
--- a/kumascript/macros/AddonSidebar.ejs
+++ b/kumascript/macros/AddonSidebar.ejs
@@ -146,7 +146,7 @@ var text = mdn.localStringMap({
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
 
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function renderItems(slugs) {
diff --git a/kumascript/macros/AddonSidebarMain.ejs b/kumascript/macros/AddonSidebarMain.ejs
index 55f757f9450b..0057761a8556 100644
--- a/kumascript/macros/AddonSidebarMain.ejs
+++ b/kumascript/macros/AddonSidebarMain.ejs
@@ -63,9 +63,9 @@ var text = mdn.localStringMap({
 
 <section id="Quick_links" data-macro="AddonSidebarMain">
   <ol>
-    <li><a href="<%=baseURL%>WebExtensions"><strong><%=text['WebExtensions']%></strong></a></li>
-    <li><a href="https://extensionworkshop.com/documentation/themes/"><strong><%=text['Themes']%></strong></a></li>
-    <li><a href="https://discourse.mozilla.org/c/add-ons"><strong><%=text['Community_and_Support']%></strong></a></li>
+    <li class="section"><a href="<%=baseURL%>WebExtensions"><%=text['WebExtensions']%></a></li>
+    <li class="section"><a href="https://extensionworkshop.com/documentation/themes/"><%=text['Themes']%></a></li>
+    <li class="section"><a href="https://discourse.mozilla.org/c/add-ons"><%=text['Community_and_Support']%></a></li>
     <li class="toggle">
       <details>
         <summary><%=text['Channels']%></summary>
diff --git a/kumascript/macros/CSSRef.ejs b/kumascript/macros/CSSRef.ejs
index be310f50c468..49bae9987e0e 100644
--- a/kumascript/macros/CSSRef.ejs
+++ b/kumascript/macros/CSSRef.ejs
@@ -1093,8 +1093,8 @@ async function buildPropertylist(pages, title) {
 <section id="Quick_links" data-macro="CSSRef">
 
 <ol>
-  <li><a href="/<%=locale%>/docs/Web/CSS"><strong>CSS</strong></a></li>
-  <li><a href="<%=learnURL%>CSS"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS">CSS</a></li>
+  <li class="section"><a href="<%=learnURL%>CSS"><%=text['Tutorials']%></a></li>
   <li><a href="<%=learnURL%>Getting_started_with_the_web/CSS_basics"><%=text['CSS_basics']%></a></li>
   <li class="toggle">
       <details>
@@ -1171,7 +1171,7 @@ async function buildPropertylist(pages, title) {
       </details>
   </li>
 
-  <li><a href="/<%=locale%>/docs/Web/CSS/Reference"><strong><%=text['Reference']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS/Reference"><%=text['Reference']%></a></li>
   <%-await buildSublist(groups, 'Modules');%>
   <%-await buildPropertylist(properties, 'Properties');%>
   <%-await buildSublist(selectors, 'Selectors');%>
@@ -1182,7 +1182,7 @@ async function buildPropertylist(pages, title) {
   <%-await buildSublist(functions, 'Functions');%>
   <%-await buildSublist(types, 'Types');%>
 
-  <li class="no-link"><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li class="toggle">
       <details>
           <summary><%=text['Animations']%></summary>
@@ -1404,7 +1404,7 @@ async function buildPropertylist(pages, title) {
       </details>
   </li>
 
-  <li><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><strong><%=text['Layout_cookbook']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><%=text['Layout_cookbook']%></a></li>
   <li class="toggle">
     <ol>
       <li><%-smartLink(`${cssURL}Layout_cookbook/Media_objects`, null, text['Media_objects'], cssURL)%></li>
@@ -1420,7 +1420,7 @@ async function buildPropertylist(pages, title) {
     </ol>
   </li>
 
-  <li class="no-link"><strong><%=text['Tools']%></strong></li>
+  <li class="section no-link"><%=text['Tools']%></li>
   <li class="toggle">
     <ol>
       <li><%-smartLink(`${cssURL}CSS_Colors/Color_picker_tool`, null, text['Color_picker_tool'], cssURL)%></li>
diff --git a/kumascript/macros/DefaultAPISidebar.ejs b/kumascript/macros/DefaultAPISidebar.ejs
index 1a1520e8d221..23758c3f8a7e 100644
--- a/kumascript/macros/DefaultAPISidebar.ejs
+++ b/kumascript/macros/DefaultAPISidebar.ejs
@@ -102,7 +102,7 @@ function convertEvent(eventName) {
 output = '<section id="Quick_links" data-macro="DefaultAPISidebar"><ol>';
 
 if (webAPIGroups[0][group].overview) {
-  output += '<li><strong><a href="' +  APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></strong></li>';
+  output += '<li class="section"><a href="' +  APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></li>';
 }
 
 if (guides.length > 0) {
diff --git a/kumascript/macros/GlossarySidebar.ejs b/kumascript/macros/GlossarySidebar.ejs
index 5481cb69cb7a..e42808ac8d1d 100644
--- a/kumascript/macros/GlossarySidebar.ejs
+++ b/kumascript/macros/GlossarySidebar.ejs
@@ -1,7 +1,7 @@
 <%
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function getPageLinkAndTitle(slug) {
diff --git a/kumascript/macros/HTMLSidebar.ejs b/kumascript/macros/HTMLSidebar.ejs
index f97dfc886999..5fcdf551ac44 100644
--- a/kumascript/macros/HTMLSidebar.ejs
+++ b/kumascript/macros/HTMLSidebar.ejs
@@ -315,8 +315,8 @@ var text = mdn.localStringMap({
 %>
 <section id="Quick_links" data-macro="HTMLSidebar">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/HTML"><strong>HTML</strong></a></li>
-  <li><a href="<%=learnBaseURL%>HTML"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/HTML">HTML</a></li>
+  <li class="section"><a href="<%=learnBaseURL%>HTML"><%=text['Tutorials']%></a></li>
   <li><a href="<%=learnBaseURL%>Getting_started_with_the_web/HTML_basics"><%=text['HTML_basics']%></a></li>
   <li class="toggle">
     <details <%=state('Introduction_to_HTML')%>>
@@ -360,7 +360,7 @@ var text = mdn.localStringMap({
       </ol>
     </details>
   </li>
-  <li><strong><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></li>
   <li class="toggle">
     <details <%=state('HTML_Elements')%>>
       <summary><%=text['HTML_Elements']%></summary>
@@ -400,7 +400,7 @@ var text = mdn.localStringMap({
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/HTML/Element/input'])%>
     </details>
   </li>
-  <li class="no-link"><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
       <li><a href="/<%=locale%>/docs/Web/HTML/Content_categories"><%=text["Content_categories"]%></a></li>
diff --git a/kumascript/macros/HTTPSidebar.ejs b/kumascript/macros/HTTPSidebar.ejs
index 11484ff37f2e..6da03222997a 100644
--- a/kumascript/macros/HTTPSidebar.ejs
+++ b/kumascript/macros/HTTPSidebar.ejs
@@ -287,8 +287,8 @@ var text = mdn.localStringMap({
 
 <section id="Quick_links" data-macro="HTTPSidebar">
   <ol>
-    <li><a href="/<%=locale%>/docs/Web/HTTP"><strong><%=text['HTTP']%></strong></a></li>
-    <li class="no-link"><strong><%=text['Guides']%></strong></li>
+    <li class="section"><a href="/<%=locale%>/docs/Web/HTTP"><%=text['HTTP']%></a></li>
+    <li class="section no-link"><%=text['Guides']%></li>
     <li class="toggle">
         <details>
             <summary><%=text['ResourcesURI']%></summary>
@@ -342,7 +342,7 @@ var text = mdn.localStringMap({
     <li><a href="/<%=locale%>/docs/Web/HTTP/Redirections"><%=text['Redirects']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Resources_and_specifications"><%=text['Resources']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Permissions_Policy"><%=text['Permissions_Policy']%></a></li>
-    <li class="no-link"><strong><%=text['Reference']%></strong></li>
+    <li class="section no-link"><%=text['Reference']%></li>
     <li class="toggle">
         <details <%=state('Web/HTTP/Headers')%>>
             <summary><%=text['Headers']%></summary>
diff --git a/kumascript/macros/JSRef.ejs b/kumascript/macros/JSRef.ejs
index 7e24045a02dc..5ae9c89df162 100644
--- a/kumascript/macros/JSRef.ejs
+++ b/kumascript/macros/JSRef.ejs
@@ -205,7 +205,7 @@ async function buildSublist(pages, title, opened) {
 async function renderOutput() {
   let output = '<section class="Quick_links" id="Quick_links" data-macro="JSRef"><ol>';
   const link = web.smartLink(slugStdlib, null, text.stdlib, slugStdlib, slugStdlib, "JSRef");
-  output += `<li><strong>${link}</strong></li>`;
+  output += `<li class="section">${link}</li>`;
 
   for (const [index, item] of Object.values(result).entries()) {
     const resultTitle        = item.title ?? "";
@@ -216,11 +216,11 @@ async function renderOutput() {
     const resultOpen         = item.defaultOpened ?? false;
 
     if (index === 1) {
-      output += `<li class="no-link"><strong>${text.Inheritance}</strong></li>`;
+      output += `<li class="section no-link">${text.Inheritance}</li>`;
     }
 
     const link = web.smartLink(`${slugStdlib}/${resultSubPath}`, null, `<code>${resultTitle}</code>`, null, slugStdlib, "JSRef");
-    output += `<li><strong>${link}</strong></li>`;
+    output += `<li class="section">${link}</li>`;
 
     if (resultConstructors.length > 0) {
       output += await buildSublist(resultConstructors, text.Constructor, resultOpen);
@@ -233,10 +233,10 @@ async function renderOutput() {
     }
 
     if (index === 0 && group.length > 0) {
-      output += `<li class="no-link"><strong>${text.Related}</strong></li>`;
+      output += `<li class="section no-link">${text.Related}</li>`;
       for (const groupItem of group) {
         const link = web.smartLink(`${slugStdlib}/${groupItem.replace(".", "/")}`, null, `<code>${groupItem}</code>`, null, slugStdlib, "JSRef");
-        output += `<li><strong>${link}</strong></li>`;
+        output += `<li class="section">${link}</li>`;
       }
     }
   }
diff --git a/kumascript/macros/JsSidebar.ejs b/kumascript/macros/JsSidebar.ejs
index ca672cd11d41..9b44e48b6ca2 100644
--- a/kumascript/macros/JsSidebar.ejs
+++ b/kumascript/macros/JsSidebar.ejs
@@ -399,8 +399,8 @@ var text = mdn.localStringMap({
 %>
 <section id="Quick_links" data-macro="JsSidebar">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/JavaScript"><strong>JavaScript</strong></a></li>
-  <li><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript">JavaScript</a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><%=text['Tutorials']%></a></li>
   <li class="toggle">
     <details <%=state('Complete_beginners')%>>
       <summary><%=text['Complete_beginners']%></summary>
@@ -461,7 +461,7 @@ var text = mdn.localStringMap({
       </ol>
     </details>
   </li>
-  <li><strong><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></li>
   <li class="toggle">
     <details <%=state('Objects')%>>
        <summary><%=text['Global_Objects']%></summary>
diff --git a/kumascript/macros/LearnSidebar.ejs b/kumascript/macros/LearnSidebar.ejs
index 71220ce3856c..871f4620223c 100644
--- a/kumascript/macros/LearnSidebar.ejs
+++ b/kumascript/macros/LearnSidebar.ejs
@@ -835,7 +835,7 @@ async function renderSubsection(subsection) {
 }
 
 async function renderSection(section) {
-  let output = `<li><a href="${baseURL}${section.link}"><strong>${l10nStrings[section.name]}</strong></a></li>`;
+  let output = `<li class="section"><a href="${baseURL}${section.link}">${l10nStrings[section.name]}</a></li>`;
 
   for (const subsection of section.subsections) {
     output += await renderSubsection(subsection);
diff --git a/kumascript/macros/MathMLRef.ejs b/kumascript/macros/MathMLRef.ejs
index 1385d7618b4d..f4f562139a81 100644
--- a/kumascript/macros/MathMLRef.ejs
+++ b/kumascript/macros/MathMLRef.ejs
@@ -56,8 +56,8 @@ async function getTitle(pageSlug) {
 %>
 <section id="Quick_links" data-macro="MathMLRef">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/MathML"><strong>MathML</strong></a></li>
-  <li class="no-link"><strong><%=text['Guides']%></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/MathML">MathML</a></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Authoring"><%=await getTitle("Authoring")%></a></li>
@@ -65,7 +65,7 @@ async function getTitle(pageSlug) {
     <li><a href="/<%=locale%>/docs/Web/MathML/Values"><%=await getTitle("Values")%></a></li>
     </ol>
   </li>
-  <li class="no-link"><strong><%=text['Reference']%></strong></li>
+  <li class="section no-link"><%=text['Reference']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -79,7 +79,7 @@ async function getTitle(pageSlug) {
     </details>
   </li>
   <li><a href="/<%=locale%>/docs/Web/MathML/Attribute"><%=await getTitle("Attribute")%></a></li>
-  <li class="no-link"><strong><%=text['Examples']%></strong></li>
+  <li class="section no-link"><%=text['Examples']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula"><%=await getTitle("Examples/Deriving_the_Quadratic_Formula")%></a></li>
diff --git a/kumascript/macros/PWASidebar.ejs b/kumascript/macros/PWASidebar.ejs
index e9928974bb39..597b77b4868e 100644
--- a/kumascript/macros/PWASidebar.ejs
+++ b/kumascript/macros/PWASidebar.ejs
@@ -75,7 +75,7 @@ async function getTitle(pageSlug) {
 }
 
 async function renderRootItem(item) {
-  return `<li><a href="${getLink(item)}"><strong>${await getTitle(item)}</strong></a></li>`
+  return `<li class="section"><a href="${getLink(item)}">${await getTitle(item)}</a></li>`
 }
 
 async function renderItem(item) {
diff --git a/kumascript/macros/SVGRef.ejs b/kumascript/macros/SVGRef.ejs
index 5cb704f6da92..59512ea6f390 100644
--- a/kumascript/macros/SVGRef.ejs
+++ b/kumascript/macros/SVGRef.ejs
@@ -66,8 +66,8 @@ async function getTitle(pageSlug) {
 %>
 <section id="Quick_links" data-macro="SVGRef">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/SVG"><strong>SVG</strong></a></li>
-  <li class="no-link"><strong><%=text['Tutorials']%></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/SVG">SVG</a></li>
+  <li class="section no-link"><%=text['Tutorials']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Introducing SVG from scratch']%></summary>
@@ -92,7 +92,7 @@ async function getTitle(pageSlug) {
       </ol>
     </details>
   </li>
-  <li class="no-link"><strong><%=text['Reference']%></strong></li>
+  <li class="section no-link"><%=text['Reference']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -105,7 +105,7 @@ async function getTitle(pageSlug) {
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Attribute'])%>
     </details>
   </li>
-  <li class="no-link"><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/SVG/Applying_SVG_effects_to_HTML_content"><%=await getTitle("Applying_SVG_effects_to_HTML_content")%></a></li>
diff --git a/kumascript/macros/WebAssemblySidebar.ejs b/kumascript/macros/WebAssemblySidebar.ejs
index 67df97fc0c5c..8dbeff2bb8d8 100644
--- a/kumascript/macros/WebAssemblySidebar.ejs
+++ b/kumascript/macros/WebAssemblySidebar.ejs
@@ -61,7 +61,7 @@ var text = mdn.localStringMap({
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li data-default-state="open"><a href="<%=baseURL%>"><strong><%=text['WebAssembly_home_page']%></strong></a>
+  <li class="section" data-default-state="open"><a href="<%=baseURL%>"><%=text['WebAssembly_home_page']%></a>
   <li class="toggle">
     <details open>
       <summary><%=text['Tutorials']%></summary>
diff --git a/kumascript/macros/WebExtAPISidebar.ejs b/kumascript/macros/WebExtAPISidebar.ejs
index f637dd65b33e..16216346ea2b 100644
--- a/kumascript/macros/WebExtAPISidebar.ejs
+++ b/kumascript/macros/WebExtAPISidebar.ejs
@@ -23,7 +23,7 @@ let text = {
 
 async function buildSublist(pages, title, ignoreBadges) {
   var result =
-    '<li data-default-state="open"><a href="#"><strong>' +
+    '<li class="section" data-default-state="open"><a href="#">' +
     title +
     "</strong></a><ol>";
 
diff --git a/kumascript/macros/XsltSidebar.ejs b/kumascript/macros/XsltSidebar.ejs
index 2d42bcd9b492..d2773bf72f5a 100644
--- a/kumascript/macros/XsltSidebar.ejs
+++ b/kumascript/macros/XsltSidebar.ejs
@@ -1,7 +1,7 @@
 <%
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function getPageLinkAndTitle(slug) {

From 9e9da139784e405cf1901b14b386730dcf003f1d Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 14:02:09 +0100
Subject: [PATCH 3/6] chore(sidebar): reduce section margin-top to 1.5rem

---
 client/src/document/organisms/sidebar/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index bc8346ef6a6f..f54d00bd395e 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -43,7 +43,7 @@
     font-size: var(--type-base-font-size-rem);
     font-weight: var(--font-body-strong-weight);
     letter-spacing: 0.02rem;
-    margin-top: 1.75rem;
+    margin-top: 1.5rem;
 
     &.no-link {
       padding: 0.25rem;

From b8cecd51285f9196246cb114e8a3de1a21b69a0f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 14:33:54 +0100
Subject: [PATCH 4/6] chore(sidebar): remove unused data-default-state attrs

---
 kumascript/macros/WebAssemblySidebar.ejs           | 2 +-
 kumascript/macros/WebExtAPISidebar.ejs             | 2 +-
 kumascript/tests/macros/WebAssemblySidebar.test.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/kumascript/macros/WebAssemblySidebar.ejs b/kumascript/macros/WebAssemblySidebar.ejs
index 8dbeff2bb8d8..e5405fc21d02 100644
--- a/kumascript/macros/WebAssemblySidebar.ejs
+++ b/kumascript/macros/WebAssemblySidebar.ejs
@@ -61,7 +61,7 @@ var text = mdn.localStringMap({
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li class="section" data-default-state="open"><a href="<%=baseURL%>"><%=text['WebAssembly_home_page']%></a>
+  <li class="section"><a href="<%=baseURL%>"><%=text['WebAssembly_home_page']%></a>
   <li class="toggle">
     <details open>
       <summary><%=text['Tutorials']%></summary>
diff --git a/kumascript/macros/WebExtAPISidebar.ejs b/kumascript/macros/WebExtAPISidebar.ejs
index 16216346ea2b..948842a8083f 100644
--- a/kumascript/macros/WebExtAPISidebar.ejs
+++ b/kumascript/macros/WebExtAPISidebar.ejs
@@ -23,7 +23,7 @@ let text = {
 
 async function buildSublist(pages, title, ignoreBadges) {
   var result =
-    '<li class="section" data-default-state="open"><a href="#">' +
+    '<li class="section"><a href="#">' +
     title +
     "</strong></a><ol>";
 
diff --git a/kumascript/tests/macros/WebAssemblySidebar.test.ts b/kumascript/tests/macros/WebAssemblySidebar.test.ts
index 36224097a3e3..edad02d2a826 100644
--- a/kumascript/tests/macros/WebAssemblySidebar.test.ts
+++ b/kumascript/tests/macros/WebAssemblySidebar.test.ts
@@ -4,7 +4,7 @@ const expected = `\
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li data-default-state="open"><a href="/en-US/docs/WebAssembly"><strong>WebAssembly home page</strong></a>
+  <li><a href="/en-US/docs/WebAssembly"><strong>WebAssembly home page</strong></a>
   <li class="toggle">
     <details open>
       <summary>Tutorials</summary>

From 2b7b35296033c48180d7868a0ea16408b9523b55 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 14:35:02 +0100
Subject: [PATCH 5/6] test(sidebar): update expectation

---
 kumascript/tests/macros/WebAssemblySidebar.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kumascript/tests/macros/WebAssemblySidebar.test.ts b/kumascript/tests/macros/WebAssemblySidebar.test.ts
index edad02d2a826..0e52c7438221 100644
--- a/kumascript/tests/macros/WebAssemblySidebar.test.ts
+++ b/kumascript/tests/macros/WebAssemblySidebar.test.ts
@@ -4,7 +4,7 @@ const expected = `\
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li><a href="/en-US/docs/WebAssembly"><strong>WebAssembly home page</strong></a>
+  <li class="section"><a href="/en-US/docs/WebAssembly">WebAssembly home page</a>
   <li class="toggle">
     <details open>
       <summary>Tutorials</summary>

From 6da747e8b42bee78ae45c0f876894e794ea613ac Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 2 Nov 2023 15:48:05 +0100
Subject: [PATCH 6/6] fixup! test(sidebar): update expectation

---
 kumascript/tests/macros/DefaultAPISidebar.test.ts | 2 +-
 kumascript/tests/macros/apiref.test.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kumascript/tests/macros/DefaultAPISidebar.test.ts b/kumascript/tests/macros/DefaultAPISidebar.test.ts
index 64e34dd3a0b5..baa886189dc2 100644
--- a/kumascript/tests/macros/DefaultAPISidebar.test.ts
+++ b/kumascript/tests/macros/DefaultAPISidebar.test.ts
@@ -256,7 +256,7 @@ async function checkResult(html, config) {
 
   if (config.expected.overview) {
     // Test overview link
-    const overviewLink = dom.querySelector("ol>li>strong");
+    const overviewLink = dom.querySelector("ol>li.section");
     checkItem(config.expected.overview, overviewLink, config.locale);
   }
 
diff --git a/kumascript/tests/macros/apiref.test.ts b/kumascript/tests/macros/apiref.test.ts
index 14aeb7f4ddd2..132283c93b68 100644
--- a/kumascript/tests/macros/apiref.test.ts
+++ b/kumascript/tests/macros/apiref.test.ts
@@ -506,7 +506,7 @@ async function checkResult(html, config) {
   expect(num_valid_links).toEqual(num_total_links);
 
   // Test main interface link
-  const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li>strong>a");
+  const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li.section>a");
   expect(mainIfLink.textContent).toEqual(config.expected.mainIfLink.text);
 
   if (mainIfLink.href !== "") {