Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix several accessibility issues

Browse Source
This commit is contained in:
Zerebos 2024-06-10 02:17:50 -04:00
parent 01a8d0f864
commit 2cdd2a0a54
No known key found for this signature in database
GPG Key ID: 79BE50E3D28D5686
3 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/index.css
View File

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

11
src/templates/page.ejs
View File

@ -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>

2
src/templates/tree_item.ejs
View File

@ -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>
<% } %>