From 2d03bc4e6a2fa3218875820168506473393b6b16 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Tue, 14 Apr 2026 20:37:47 -0500
Subject: [PATCH] Fix a11y icon visibility and inline toggle colors

- 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>
---
 src/media/css/template.css | 13 ++++++-------
 src/media/js/template.js   | 12 +++++++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/media/css/template.css b/src/media/css/template.css
index 5b82fc3..1669c78 100644
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -17214,25 +17214,24 @@ button#mokoThemeSwitch {
 	width: 28px;
 	height: 28px;
 	border-radius: 50%;
-	border: 1.5px solid currentColor;
+	border: 1.5px solid rgba(255,255,255,.6);
 	background: transparent;
-	color: inherit;
+	color: #fff;
 	font-size: 1rem;
 	cursor: pointer;
 	padding: 0;
 	transition: background .2s, color .2s;
-	opacity: .8;
 }
 
 .a11y-toggle-inline:hover,
 .a11y-toggle-inline:focus-visible {
-	opacity: 1;
-	background: rgba(255,255,255,.15);
+	background: rgba(255,255,255,.2);
+	border-color: #fff;
 }
 
 .a11y-toggle-inline.active {
-	opacity: 1;
-	background: rgba(255,255,255,.25);
+	background: rgba(255,255,255,.3);
+	border-color: #fff;
 }
 
 /* Floating a11y panel when inline */
diff --git a/src/media/js/template.js b/src/media/js/template.js
index f1fb442..47f1aaf 100644
--- a/src/media/js/template.js
+++ b/src/media/js/template.js
@@ -292,7 +292,17 @@
 		toggle.className = "a11y-toggle";
 		toggle.setAttribute("aria-label", "Accessibility options");
 		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
 		var panel = doc.createElement("div");