Improve accessibility

views/scripts/accessibility.js

@@ -1,21 +1,31 @@
 var accScale;
 var accWidth;
+var accFont;
+
+var accHueOverride;
+var accHue;
+var accSaturationOverride;
+var accSaturation;
+
 var accBase;
 
+var propagateStyles = propagateStyles ?? null;
+
 function createAccessibilityNodes() {
-  document.querySelector("#accessibility").innerHTML = `<fieldset>
+  document.querySelector("#accessibility").innerHTML = `<details>
-  <legend>Accessibility controls</legend>
+  <summary>Accessibility controls</summary>
-  <label for="acc-scale">
+  <fieldset>
-    <input
+    <label for="acc-scale">UI scale:
-      id="acc-scale"
+      <input
-      type="number"
+        id="acc-scale"
-      style="width: 8ch"
+        type="number"
-      min="8"
+        style="width: 8ch"
-      max="48"
+        min="8"
-      value="16"
+        max="48"
-    />
+        value="16"
-    UI scale</label><br />
+      />
-    <label for="acc-width">
+    </label><br />
+    <label for="acc-width">Page width:
       <input
         id="acc-width"
         type="number"
@@ -23,17 +33,65 @@ function createAccessibilityNodes() {
         min="30"
         value="50"
       />
-      Page width</label><br />
+    </label><br />
-  <label for="acc-base" class="checkbox">
+    <label for="acc-font">Font family:
-    <input id="acc-base" type="checkbox" id="acc-base" />
+      <select id="acc-font">
-    <span class="checkbox">✓</span>
+        <option value="Lexend Deca" selected>Page Default</option>
-    Base style (requires reload)
+        <option value="-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
-  </label>
+        Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
-</fieldset>`;
+        &quot;Segoe UI Symbol&quot;">System Default</option>
+        <option value="Minecraft">Mojangles</option>
+        <option value="sans-serif">Sans-serif</option>
+        <option value="serif">Serif</option>
+        <option value="mono">Monospace</option>
+        <option value="cursive">Cursive</option>
+        <option value="fantasy">Fantasy</option>
+      </select>
+    </label><br />
+      <label for="acc-hue">Page hue:
+        <input
+          id="acc-hue"
+          type="range"
+          min="0"
+          max="360"
+          value="0"
+        />
+        <label for="acc-hue-over" class="checkbox">
+          <input id="acc-hue-over" type="checkbox" />
+          <span class="checkbox">✓</span>
+        </label>
+      </label><br />
+      <label for="acc-sat">Page saturation:
+        <input
+          id="acc-sat"
+          type="range"
+          min="0"
+          max="100"
+          value="100"
+        />
+        <label for="acc-sat-over" class="checkbox">
+          <input id="acc-sat-over" type="checkbox" />
+          <span class="checkbox">✓</span>
+        </label>
+      </label><br />
+    <label for="acc-base" class="checkbox">Base style:
+      <input id="acc-base" type="checkbox" />
+      <span class="checkbox">✓</span>
+      (requires reload)
+    </label>
+  </fieldset>
+</details>`;
   document.querySelector("#accessibility").hidden = false;
 
   accScale = document.getElementById("acc-scale");
   accWidth = document.getElementById("acc-width");
+  accFont = document.getElementById("acc-font");
+
+  accHueOverride = document.getElementById("acc-hue-over");
+  accHue = document.getElementById("acc-hue");
+  accSaturationOverride = document.getElementById("acc-sat-over");
+  accSaturation = document.getElementById("acc-sat");
+
   accBase = document.getElementById("acc-base");
 
   accScale.addEventListener("change", function (e) {
@@ -46,6 +104,31 @@ function createAccessibilityNodes() {
     changeWidth(e.target.value);
   });
 
+  accFont.addEventListener("change", function (e) {
+    window.localStorage.setItem("acc-font", e.target.value);
+    changeFont(e.target.value);
+  });
+
+  accHueOverride.addEventListener("change", function (e) {
+    window.localStorage.setItem("acc-hue-over", e.target.checked);
+    changeColor(accHue?.value, accSaturation?.value, e.target.checked, accSaturationOverride?.checked);
+  });
+
+  accHue.addEventListener("input", function (e) {
+    window.localStorage.setItem("acc-hue", e.target.value);
+    changeColor(e.target.value, accSaturation?.value, accHueOverride?.checked, accSaturationOverride?.checked);
+  });
+
+  accSaturationOverride.addEventListener("change", function (e) {
+    window.localStorage.setItem("acc-sat-over", e.target.checked);
+    changeColor(accHue?.value, accSaturation?.value, accHueOverride?.checked, e.target.checked);
+  });
+
+  accSaturation.addEventListener("input", function (e) {
+    window.localStorage.setItem("acc-sat", e.target.value);
+    changeColor(accHue?.value, e.target.value, accHueOverride?.checked, accSaturationOverride?.checked);
+  });
+
   accBase.addEventListener("change", function (e) {
     window.localStorage.setItem("acc-base", e.target.checked);
     window.location.reload();
@@ -72,6 +155,31 @@ function initializeChanges(_, loading) {
     window.localStorage.setItem("acc-width", 40);
     width = window.localStorage.getItem("acc-width");
   }
+  let font = window.localStorage.getItem("acc-font");
+  if (font == null) {
+    window.localStorage.setItem("acc-font", "Lexend Deca");
+    font = window.localStorage.getItem("acc-font");
+  }
+  let hueOver = window.localStorage.getItem("acc-hue-over");
+  if (hueOver == null) {
+    window.localStorage.setItem("acc-hue-over", false);
+    hueOver = window.localStorage.getItem("acc-hue-over");
+  }
+  let hue = window.localStorage.getItem("acc-hue");
+  if (hue == null) {
+    window.localStorage.setItem("acc-hue", 0);
+    hue = window.localStorage.getItem("acc-hue");
+  }
+  let satOver = window.localStorage.getItem("acc-sat-over");
+  if (satOver == null) {
+    window.localStorage.setItem("acc-sat-over", false);
+    satOver = window.localStorage.getItem("acc-sat-over");
+  }
+  let sat = window.localStorage.getItem("acc-sat");
+  if (sat == null) {
+    window.localStorage.setItem("acc-sat", 0);
+    sat = window.localStorage.getItem("acc-sat");
+  }
   let base = window.localStorage.getItem("acc-base");
   if (base == null) {
     window.localStorage.setItem("acc-base", false);
@@ -80,6 +188,10 @@ function initializeChanges(_, loading) {
   changeScale(scale);
   changeWidth(width);
 
+  changeColor(hue, sat, hueOver === "true", satOver === "true");
+
+  changeFont(font);
+
   if (loading) {
     prevBase = base;
     changeBase(base === "true");
@@ -87,6 +199,13 @@ function initializeChanges(_, loading) {
 
   if (scale != null && accScale != null) accScale.value = scale;
   if (width != null && accWidth != null) accWidth.value = width;
+  if (font != null && accFont != null) accFont.value = font;
+
+  if (hueOver != null && accHueOverride != null) accHueOverride.checked = hueOver === "true";
+  if (hue != null && accHue != null) accHue.value = hue;
+  if (satOver != null && accSaturationOverride != null) accSaturationOverride.checked = satOver === "true";
+  if (sat != null && accSaturation != null) accSaturation.value = sat;
+
   if (base != null && accBase != null) accBase.checked = base === "true";
 }
 
@@ -98,6 +217,28 @@ function changeWidth(width) {
   document.documentElement.style.setProperty("--document-width", width + "em");
 }
 
+function changeFont(font) {
+  document.documentElement.style.setProperty("--font-family", font);
+}
+
+
+
+const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--base-color").split(", ");
+function changeColor(hue, sat, hueOver, satOver) {
+  if (accHue != null) accHue.disabled = !hueOver;
+  if (accSaturation != null) accSaturation.disabled = !satOver;
+
+  document.documentElement.style.setProperty("--base-color", 
+    (hueOver ? hue : baseColor[0])
+    + ", " 
+    + (satOver ? (sat + "%") : baseColor[1])
+  );
+
+  if (propagateStyles != null) propagateStyles(getComputedStyle(document.documentElement));
+}
+
+
+
 function changeBase(base) {
   if (base) document.documentElement.classList.add("base");
   else document.documentElement.classList.remove("base");

views/scripts/interface.js

@@ -14,7 +14,7 @@ function propagateStyles(rootStyles, parent) {
     "--accent-color-fg",
     rootStyles.getPropertyValue("--accent-color-fg")
   );
-  wfParent.style.setProperty("--border-style", "0.0625em solid var(--color)");
+  wfParent.style.setProperty("--border-color", "var(--color)");
 }
 
 window.addEventListener("DOMContentLoaded", () => {

views/styles/normal.css

@@ -240,6 +240,13 @@ fieldset {
   color: var(--color);
 }
 
+summary {
+  font-size: 1em;
+  line-height: 1.5em;
+  margin-inline: 0;
+  margin-block: 0.5em;
+}
+
 iframe {
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: var(--border-radius);
@@ -274,6 +281,7 @@ textarea {
   margin-inline: 0;
   margin-block: 0.25em;
   font-size: 1em;
+  vertical-align: middle;
   background-color: var(--background-color);
   color: var(--color);
 }
@@ -339,6 +347,7 @@ label.checkbox {
   position: relative;
   margin-inline: 0;
   margin-block: 0.25em;
+  vertical-align: middle;
 }
 
 label.checkbox input[type="checkbox"] {
@@ -364,6 +373,7 @@ label.checkbox input[type="checkbox"] + span.checkbox {
   color: transparent;
   text-align: center;
   user-select: none;
+  vertical-align: middle;
 }
 
 label.checkbox input[type="checkbox"]:focus + span.checkbox {
@@ -376,3 +386,60 @@ label.checkbox input[type="checkbox"]:checked + span.checkbox {
   border-radius: var(--border-radius);
   color: var(--accent-color-fg);
 }
+
+/* -- Range styling */
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+
+  box-sizing: content-box;
+  position: relative;
+  display: inline-block;
+  width: 10em;
+  height: 1em;
+  line-height: 1em;
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+  padding-inline: 0;
+  padding-block: 0.25em;
+  margin-inline: 0;
+  margin-block: 0.25em;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+/***** Chrome, Safari, Opera and Edge Chromium styles *****/
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+
+  background-color: var(--accent-color);
+  height: 1.625em;
+  width: 1em;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline: 2px solid var(--accent-color-fg);
+}
+
+/******** Firefox styles ********/
+
+input[type="range"]::-moz-range-thumb {
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+
+  background-color: var(--accent-color);
+  height: 1.5em;
+  width: 1em;
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+  outline: 2px solid var(--accent-color-fg);
+}

views/styles/style.css

@@ -14,7 +14,6 @@
   /* position: sticky;
   bottom: 1em;
   left: 1em; */
-  background-color: var(--background-color);
   padding: 0.5em;
 }