added "Accessibility Mode" feature with ability to add spacing betwee…

…n lists at the root of a profile (either all lists or sources only)

src/content.js

@@ -3,6 +3,7 @@
 import "./features/register_feature_options";
 
 import "./features/access_keys/access_keys";
+import "./features/accessibility/accessibility";
 import "./features/agc/agc_content";
 import "./features/akaNameLinks/akaNameLinks";
 import "./features/appsMenu/appsMenu";

src/features/accessibility/accessibility.css

@@ -0,0 +1,18 @@
+:root {
+  --a11y-spacing: 1em;
+}
+
+.a11y-list-spacing #toc ~ ol > li,
+.a11y-list-spacing #toc ~ ul > li,
+.a11y-list-spacing a[name='Biography'] ~ ol > li,
+.a11y-list-spacing a[name='Biography'] ~ ul > li {
+  margin-top: var(--a11y-spacing);
+  margin-bottom: var(--a11y-spacing);
+}
+
+.a11y-src-spacing ol.references > li,
+.a11y-src-spacing a[name='Sources'] ~ ol:not(a[name^='Acknowledgement'] ~ ol) > li,
+.a11y-src-spacing a[name='Sources'] ~ ul:not(a[name^='Acknowledgement'] ~ ul) > li {
+  margin-top: var(--a11y-spacing);
+  margin-bottom: var(--a11y-spacing);
+}

src/features/accessibility/accessibility.js

@@ -0,0 +1,21 @@
+import $ from "jquery";
+import { checkIfFeatureEnabled, getFeatureOptions } from "../../core/options/options_storage.js";
+
+async function initAccessibility() {
+  const options = await getFeatureOptions("accessibility");
+  if (options.listItemSpacing && options.listItemSpacing > 0) {
+    document.documentElement.style.setProperty("--a11y-spacing", 1.5 * options.listItemSpacing / 100 + "em"); // this is based on the normal paragraph margin being 1.5em
+    if (options.spaceSourceItemsOnly) {
+      $("html").addClass("a11y-src-spacing");
+    } else {
+      $("html").addClass("a11y-list-spacing");
+    }
+  }
+}
+
+checkIfFeatureEnabled("accessibility").then((result) => {
+  if (result) {
+    import("./accessibility.css");
+    initAccessibility();
+  }
+});

src/features/accessibility/accessibility_options.js

@@ -0,0 +1,59 @@
+import { registerFeature, OptionType } from "../../core/options/options_registry";
+
+const accessibilityFeature = {
+  name: "Accessibility Mode",
+  id: "accessibility",
+  description: "Style options to make profiles more readable.",
+  category: "Style",
+  defaultValue: false,
+  options: [
+    {
+      id: "listItemSpacing",
+      type: OptionType.SELECT,
+      label: "The amount of spacing to add between list items.",
+      values: [
+        {
+          value: 0,
+          text: "none",
+        },
+        {
+          value: 50,
+          text: "50% (half)",
+        },
+        {
+          value: 75,
+          text: "75%",
+        },
+        {
+          value: 100,
+          text: "100% (standard)",
+        },
+        {
+          value: 150,
+          text: "150%",
+        },
+        {
+          value: 200,
+          text: "200% (double)",
+        },
+        {
+          value: 300,
+          text: "300%",
+        },
+        {
+          value: 400,
+          text: "400% (extra wide)",
+        },
+      ],
+      defaultValue: 100,
+    },
+    {
+      id: "spaceSourceItemsOnly",
+      type: OptionType.CHECKBOX,
+      label: "Limit additional spacing to only lists under the Sources section.",
+      defaultValue: true,
+    },
+  ],
+};
+
+registerFeature(accessibilityFeature);

src/features/register_feature_options.js

@@ -7,6 +7,7 @@ import { registerFeature } from "../core/options/options_registry";
 // the feature and options
 ////////////////////////////////////////////////////////////////////////////////
 
+import "./accessibility/accessibility_options.js";
 import "./agc/agc_options.js";
 import "./categoryDisplay/categoryDisplay_options.js";
 import "./change_family_lists/change_family_lists_options.js";