Fix several accessibility issues

src/styles/index.css

@@ -16,6 +16,19 @@
     box-sizing: border-box;
 }
 
+/*
+Accent Color Ideas
+--text-link: #4693C3;
+  --text-link: #F9B273;
+  --text-link: #5CA9BF;
+  --text-link: #E43F66;
+--text-link: #2FB8D1;
+--text-link: #A78BFA;
+--text-link: #F2B049;
+--text-link: #E47B19;
+  --text-link: #FFB628;
+*/
+
 :root {
     --background-primary: #333333;
     --background-secondary: #1F1F1F;
@@ -46,6 +59,7 @@ body {
     font-family: 'Montserrat', 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
     line-height: 1.5;
     color: var(--text-primary);
+    margin: 0;
 }
 
 a {
@@ -57,6 +71,10 @@ a:hover {
     text-decoration: underline;
 }
 
+pre, code, kbd, samp {
+    font-family: "JetBrains Mono", Consolas, monospace;
+}
+
 
 
 

src/templates/page.ejs

@@ -121,11 +121,11 @@ content = content.replaceAll(headingRe, (...match) => {
 <div id="mobile-header">
     <a href="<%= shareRootLink %>">
         <% if (subRoot.note.hasRelation("shareLogo")) { %>
-            <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= mobileLogoHeight %>" alt="Logo" />
+            <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
         <% } %>
         <%= subRoot.note.title %>
     </a>
-    <button id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
+    <button aria-label="Show Mobile Menu" id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
 </div>
 <div id="split-pane">
     <div id="left-pane">
@@ -138,9 +138,9 @@ content = content.replaceAll(headingRe, (...match) => {
                     <%= subRoot.note.title %>
                 </a>
                 <div class="theme-selection">
-                    Site Theme
+                    <span id="sitetheme">Site Theme</span>
                     <label class="switch">
-                      <input type="checkbox" checked="<%= currentTheme === "dark" %>">
+                      <input type="checkbox" checked="<%= currentTheme === "dark" %>" aria-labelledby="sitetheme">
                       <span class="slider"></span>
                       <svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
                       <svg class="light-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg>
@@ -175,6 +175,9 @@ content = content.replaceAll(headingRe, (...match) => {
                 <% if (isEmpty && (!note.hasVisibleChildren() && note.type !== "book")) { %>
                     <p>This note has no content.</p>
                 <% } else { %>
+                    <%
+                    content = content.replace(/<img /g, `<img alt="Article Image" loading="lazy" `);
+                    %>
                     <%- content %>
                 <% } %>
             </div>

src/templates/tree_item.ejs

@@ -7,7 +7,7 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
 
     <% if (note.noteId !== subRoot.note.noteId) { %>
     <a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
-        <% if (note.hasVisibleChildren()) { %><button class="collapse-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
+        <% if (note.hasVisibleChildren()) { %><button class="collapse-button" aria-label="Expand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
         <span><%= note.title %></span>
     </a>
 <% } %>