MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility

Browse source
This commit is contained in:
MeowcaTheoRange 2023-12-21 02:57:17 -06:00
parent da747f5bb4
commit 7417aa331f
4 changed files with 229 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

181
views/scripts/accessibility.js
View file

@ -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>
<legend>Accessibility controls</legend>
<label for="acc-scale">
<input
id="acc-scale"
type="number"
style="width: 8ch"
min="8"
max="48"
value="16"
/>
UI scale</label><br />
<label for="acc-width">
document.querySelector("#accessibility").innerHTML = `<details>
<summary>Accessibility controls</summary>
<fieldset>
<label for="acc-scale">UI scale:
<input
id="acc-scale"
type="number"
style="width: 8ch"
min="8"
max="48"
value="16"
/>
</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 for="acc-base" class="checkbox">
<input id="acc-base" type="checkbox" id="acc-base" />
<span class="checkbox">✓</span>
Base style (requires reload)
</label>
</fieldset>`;
</label><br />
<label for="acc-font">Font family:
<select id="acc-font">
<option value="Lexend Deca" selected>Page Default</option>
<option value="-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
&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");

2
views/scripts/interface.js
View file

@ -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", () => {

67
views/styles/normal.css
View file

@ -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);
}

1
views/styles/style.css
View file

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