MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Fix a11y icon visibility and inline toggle colors

Browse Source 
- Fix white-on-white a11y toggle: explicit white text/border on FAB bg
- Add Unicode fallback (wheelchair symbol) if FA7 glyph fails to render
  (handles FA6/FA7 conflict on sites with both loaded)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-14 20:37:47 -05:00
parent ddf3655501
commit 2d03bc4e6a
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/media/css/template.css
View File

@@ -17214,25 +17214,24 @@ button#mokoThemeSwitch {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
border: 1.5px solid currentColor; border: 1.5px solid rgba(255,255,255,.6);
background: transparent; background: transparent;
color: inherit; color: #fff;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
transition: background .2s, color .2s; transition: background .2s, color .2s;
opacity: .8;
} }
.a11y-toggle-inline:hover, .a11y-toggle-inline:hover,
.a11y-toggle-inline:focus-visible { .a11y-toggle-inline:focus-visible {
opacity: 1; background: rgba(255,255,255,.2);
background: rgba(255,255,255,.15); border-color: #fff;
} }
.a11y-toggle-inline.active { .a11y-toggle-inline.active {
opacity: 1; background: rgba(255,255,255,.3);
background: rgba(255,255,255,.25); border-color: #fff;
} }
/* Floating a11y panel when inline */ /* Floating a11y panel when inline */

12
src/media/js/template.js
View File

@@ -292,7 +292,17 @@
toggle.className = "a11y-toggle"; toggle.className = "a11y-toggle";
toggle.setAttribute("aria-label", "Accessibility options"); toggle.setAttribute("aria-label", "Accessibility options");
toggle.setAttribute("aria-expanded", "false"); toggle.setAttribute("aria-expanded", "false");
toggle.appendChild(faIcon("fa-solid fa-universal-access")); var icon = faIcon("fa-solid fa-universal-access");
// Unicode fallback if FA7 glyph doesn't render
setTimeout(function () {
var cs = win.getComputedStyle(icon, "::before");
if (!cs.content || cs.content === "none" || cs.content === '""' || cs.content === '"" / ""') {
icon.className = "";
icon.textContent = "\u267F";
icon.style.fontSize = "1.1rem";
}
}, 500);
toggle.appendChild(icon);
// Panel // Panel
var panel = doc.createElement("div"); var panel = doc.createElement("div");