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 18:32:20 -06:00
parent 859bd74c59
commit 71b81d1e5b
5 changed files with 71 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
embeds/nav.html
View file

@ -1,4 +1,4 @@
<section class="nav">
<section class="nav" role="navigation" aria-label="Site navigation">
<p>
<a href="/">Home</a> <a href="/branding/">Branding</a>
<a href="/site/">Site Information</a>

10
views/projects/scripts/data_get_projects.js
View file

@ -7,7 +7,7 @@ fetch("./public/projects.json")
.reduce(
(html, project) =>
html +
`<h1>${project.name}${
`<h1><a href="${project.url}">${project.name}${
/*<span style="vertical-align: middle;
font-size: 0.5em;">${project.tags.reduce(
(html, tag) =>
@ -20,19 +20,13 @@ fetch("./public/projects.json")
">${tag}</button>`,
""
)}</span>*/ ""
}</h1>
}</a></h1>
<p><b>${new Date(project.date).toLocaleDateString()}</b></p>
${project.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`,
""
)}
<p>
<button
onclick="window.location.assign('${project.url}')"
>
Open
</button>
or
<button
onclick="window.manager.createWindow('${project.url}', false${
project.size?.[0] ? ", " + project.size[0] : ""

13
views/scripts/accessibility.js
View file

@ -27,7 +27,7 @@ const FONTS = [
function createAccessibilityNodes() {
document.querySelector("#accessibility").innerHTML = `<details>
<summary>Accessibility controls</summary>
<summary>Site Modifiers</summary>
<fieldset>
<label for="acc-scale">UI scale:
<input
@ -84,7 +84,6 @@ function createAccessibilityNodes() {
<label for="acc-base" class="checkbox">Base style:
<input id="acc-base" type="checkbox" />
<span class="checkbox">✓</span>
(requires reload)
</label>
</fieldset>
</details>`;
@ -138,7 +137,7 @@ function createAccessibilityNodes() {
accBase.addEventListener("change", function (e) {
window.localStorage.setItem("acc-base", e.target.checked);
window.location.reload();
changeBase(e.target.checked);
});
}
@ -159,7 +158,7 @@ function initializeChanges(_, loading) {
}
let width = window.localStorage.getItem("acc-width");
if (width == null) {
window.localStorage.setItem("acc-width", 40);
window.localStorage.setItem("acc-width", 50);
width = window.localStorage.getItem("acc-width");
}
let font = window.localStorage.getItem("acc-font");
@ -198,11 +197,7 @@ function initializeChanges(_, loading) {
changeColor(hue, sat, hueOver === "true", satOver === "true");
changeFont(font);
if (loading) {
prevBase = base;
changeBase(base === "true");
} else if (base != prevBase) window.location.reload();
changeBase(base === "true");
if (scale != null && accScale != null) accScale.value = scale;
if (width != null && accWidth != null) accWidth.value = width;

50
views/styles/normal.css
View file

@ -62,9 +62,9 @@
/* The foreground color of the page. */
--color: hsl(var(--base-color), 85%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 40%);
--accent-color: hsl(var(--base-color), 30%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 50%);
--accent-color-bg: hsl(var(--base-color), 75%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%);
@ -87,9 +87,9 @@
/* The foreground color of the page. */
--color: hsl(var(--base-color), 15%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 60%);
--accent-color: hsl(var(--base-color), 70%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 30%);
--accent-color-bg: hsl(var(--base-color), 25%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 5%);
/* The color of the borders used on certain elements. */
@ -98,17 +98,17 @@
}
html.base {
--base-color: 0, 0% !important;
/* --base-color: 0, 0% !important; */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--font-weight: normal;
--font-weight: normal !important;
--header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--header-font-weight: bold;
--header-font-weight: bold !important;
--underlay-color: #fff !important;
--background-color: transparent !important;
@ -117,10 +117,10 @@ html.base {
--accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
--border-width: calc(1em / 16);
--border-style: solid;
--border-color: var(--color);
--border-radius: 0;
--border-width: calc(1em / 16) !important;
--border-style: solid !important;
--border-color: var(--color) !important;
--border-radius: 0 !important;
}
@media (prefers-color-scheme: dark) {
@ -136,8 +136,32 @@ html.base {
}
}
html.base body {
margin: 0;
@media (forced-colors: active) {
:root {
/* --base-color: 0, 0% !important; */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--font-weight: normal !important;
--header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--header-font-weight: bold !important;
--underlay-color: #fff !important;
--background-color: transparent !important;
--color: #000 !important;
--accent-color: #c0c0c0 !important;
--accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
--border-width: calc(1em / 16) !important;
--border-style: solid !important;
--border-color: var(--color) !important;
--border-radius: 0 !important;
}
}
/* Size and type normalize */

27
views/styles/windows.css
View file

@ -25,6 +25,7 @@ div.window-object {
min-height: 2em;
background-color: var(--accent-color);
color: var(--accent-color-fg);
--border-color: var(--color);
border: var(--border-width) var(--border-style) var(--border-color);
resize: both;
overflow: hidden;
@ -36,6 +37,18 @@ div.window-object {
animation-duration: 0.25s;
}
html.base div.window-object {
--background-color: transparent !important;
--color: #000 !important;
--accent-color: #c0c0c0 !important;
--accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
background-color: var(--accent-color);
color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color);
}
div.window-object {
/* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 10%);
@ -70,6 +83,20 @@ div.window-object {
}
}
@media (prefers-color-scheme: dark) {
html.base div.window-object {
--background-color: transparent !important;
--color: #fff !important;
--accent-color: #404040 !important;
--accent-color-bg: #fff !important;
--accent-color-fg: #fff !important;
background-color: var(--accent-color);
color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color);
}
}
div.window-object.unfocused {
opacity: 0.5;
}