feat(macros): add Accessibility sidebar (#10659)

Includes the following sections: > Accessibility > - Guides > - Learn accessibility > - WCAG > > ARIA > - ARIA guides > - ARIA states and properties > - ARIA roles Co-authored-by: Onkar Ruikar <[email protected]> Co-authored-by: Claas Augner <[email protected]>
mdn · Apr 16, 2024 · 0b6e2ae · 0b6e2ae
1 parent 8216930
commit 0b6e2ae
Showing 1 changed file with 137 additions and 0 deletions.
diff --git a/kumascript/macros/AccessibilitySidebar.ejs b/kumascript/macros/AccessibilitySidebar.ejs
@@ -0,0 +1,137 @@
+<%
+
+const locale = env.locale;
+const baseURL = `/${locale}/docs/`;
+
+const l10nStrings = mdn.localStringMap({
+  "en-US": {
+    "Accessibility" : "Accessibility",
+    "Guides" : "Guides",
+    "Learn" : "Learn accessibility",
+    "ARIA" : "ARIA",
+    "ARIA_guides" : "ARIA guides",
+    "ARIA states and properties": "ARIA states and properties",
+    "ARIA roles": "ARIA roles",
+    "WCAG": "WCAG",
+  }
+});
+
+const sections = [
+  {
+    name: "Accessibility",
+    link: "Web/Accessibility",
+    subsections: [
+      {
+        name: "Guides",
+        pages: [
+          "Web/Accessibility/Information_for_Web_authors",
+          "Web/Accessibility/Accessibility:_What_users_can_to_to_browse_safely",
+          "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets",
+          "Web/Accessibility/Keyboard-navigable_JavaScript_widgets",
+          "Web/Accessibility/Mobile_accessibility_checklist",
+          "Web/Accessibility/Understanding_WCAG",
+          "Web/Accessibility/Cognitive_accessibility",
+          "Web/Accessibility/Accessibility_and_Spacial_Patterns",
+          "Web/Accessibility/Understanding_Colors_and_Luminance",
+          "Web/Accessibility/Seizure_disorders",
+        ]
+      },
+      {
+        name: "Learn",
+        pages: [
+          "Learn/Accessibility/",
+          "Learn/Accessibility/What_is_accessibility",
+          "Learn/Accessibility/HTML",
+          "Learn/Accessibility/CSS_and_JavaScript",
+          "Learn/Accessibility/WAI-ARIA_basics",
+          "Learn/Accessibility/Multimedia",
+          "Learn/Accessibility/Mobile",
+          "Learn/Accessibility/Accessibility_troubleshooting",
+        ]
+      },
+      {
+        name: "WCAG",
+        directory: "Web/Accessibility/Understanding_WCAG",
+      }
+    ]
+  },
+  {
+    name: "ARIA",
+    link: "Web/Accessibility/ARIA",
+    subsections: [
+      {
+        name: "ARIA_guides",
+        pages: [
+          "Web/Accessibility/ARIA/Annotations",
+          "Web/Accessibility/ARIA/ARIA_Guides",
+          "Web/Accessibility/ARIA/ARIA_Live_Regions",
+          "Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide",
+          "Web/Accessibility/ARIA/ARIA_Techniques",
+          "Web/Accessibility/ARIA/Multipart_labels",
+          "Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs",
+        ]
+      },
+      {
+        name: "ARIA states and properties",
+        directory: "Web/Accessibility/ARIA/attributes",
+      },
+      {
+        name: "ARIA roles",
+        directory: "Web/Accessibility/ARIA/roles",
+      }
+    ]
+  }
+];
+
+async function renderSubsection(subsection) {
+  let output = `<li><details><summary>${l10nStrings[subsection.name]}</summary><ol>`;
+
+  if (subsection.pages) {
+    for (const page of subsection.pages) {
+      const link = web.smartLink(`${baseURL}${page}`);
+      output += `<li>${link}</li>`;
+    }
+  } else {
+    output += await renderDirectory(subsection.directory);
+  }
+  output += "</ol></details></li>";
+
+  return output;
+}
+
+
+async function renderDirectory(directory) {
+  const path = `${baseURL}${directory}`;
+  const output = await template("ListSubpagesForSidebar", [path, true, true]);
+
+  return output;
+}
+
+
+async function renderSection(section) {
+  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);
+  }
+
+  return output;
+}
+
+async function renderSidebar() {
+  let output = '<section id="Quick_links" data-macro="AccessibilitySidebar"><ol>';
+
+  for (const section of sections) {
+    output += await renderSection(section);
+  }
+  
+  output += "</ol></section>";
+
+  return output;
+}
+
+const output = await renderSidebar();
+
+%>
+
+<%-output%>