https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #46 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200768 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200768&action=edit Bug 38550: Replace toggle buttons with Light/Dark/Auto dropdown The PoC patch's two btn-dark buttons in the navbar had several problems: in dark mode the .btn-dark colour rendered them invisible against the .bg-dark navbar; they offered no "follow system" option even though the JS already supported one; aria-pressed wasn't initialised in markup so screen readers had no toggle state until DOMContentLoaded ran; and the click handlers threw on browsers where localStorage access is blocked (privacy mode, kiosk lockdowns), silently breaking the toggle. This patch replaces the two buttons with a single dropdown in the user-menu area styled to match the existing #debug-controls-dropdown pattern, and rewrites switch-theme.js to be hardened, accessible and "auto"-aware. Markup changes (header.inc): * New #bd-theme nav-item dropdown: a sun / moon / half-circle icon toggle (matching the resolved theme) opens a Light / Dark / Auto menu. Each option uses a Font Awesome icon, a label and a trailing checkmark that's hidden by default and revealed only on the option whose aria-pressed is "true". * Default markup state is aria-pressed="true" on Auto, so screen readers and the visual checkmark are coherent on first paint even if JS hasn't run yet — switch-theme.js then corrects this to match the persisted preference once the DOM is ready. * The toggle's aria-label is updated on each change to read e.g. "Toggle colour theme (current: dark)". Style changes (_header.scss): * #bd-theme .theme-active-marker visibility flips from hidden to visible based on the parent button's aria-pressed state. Using visibility (not display) preserves the dropdown's row layout. Behavioural changes (switch-theme.js): * localStorage reads/writes are wrapped in try/catch. When storage is unavailable, the toggle still works for the current page; reloading just resets to system-preferred. * Three preferences are now distinct: "light", "dark", "auto". resolveTheme(preference) returns the *resolved* theme actually applied to <html>, while the dropdown shows the *preference*. * "Auto" really tracks the OS: matchMedia('(prefers-color-scheme: dark)') has a change listener that re-applies the resolved theme whenever the preference is "auto" (or no preference is stored). * showActiveTheme() updates aria-pressed, the .active class, the toggle's icon (sun / moon / half-circle) and the toggle's aria-label every time. Also focuses the toggle after a click so keyboard users land back on the switcher. * Initial application of data-bs-theme remains the responsibility of the inline FOUC-killer in doc-head-open.inc — this script no longer touches the attribute on script load, only on user clicks and on system-preference changes when in "auto". Test plan: 1) Apply patch, rebuild: yarn css:build 2) Fresh browser profile (no localStorage, OS in light mode): - Reload — page renders light, dropdown shows half-circle icon, "Auto" option has the checkmark - Switch OS to dark mode (without reloading) — page flips to dark, half-circle icon stays (preference is still "auto") 3) Click "Light" — page flips to light, sun icon shown, "Light" option marked. Reload — preference persists. 4) Click "Dark" — page flips to dark, moon icon shown, "Dark" option marked. Reload — preference persists. 5) Click "Auto" again — preference resets, half-circle icon shown, resolved theme follows OS. 6) Open devtools, simulate localStorage being blocked (Safari "Block all cookies" or Firefox strict mode). Reload — no JS errors; toggle still works for the session; reload reverts to system preference. Confirm in console no "SecurityError". 7) Keyboard navigation: tab to the dropdown toggle, Enter opens the menu, arrow keys move between options, Enter activates, focus returns to the toggle after activation. 8) Screen reader (NVDA / VoiceOver): on opening the menu, each option is announced with its label and pressed state. -- You are receiving this mail because: You are watching all bug changes. _______________________________________________ Koha-bugs mailing list [email protected] https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-bugs website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
