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

Add accessibility toolbar with 6 toggleable options

Browse Source 
Adds a floating accessibility toolbar to the template with individually
enable/disable options: text resize, color inversion, high contrast,
highlight links, readable font, and pause animations. Each option has
an admin toggle in the Theme tab and persists visitor preferences in
localStorage. Also fixes count() on null in mod_login override.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-04 11:21:22 -05:00
parent 005644b07f
commit 28bf07a443
7 changed files with 543 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/language/en-GB/tpl_mokocassiopeia.ini
View File

@@ -108,6 +108,29 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
; ===== Accessibility toolbar =====
TPL_MOKO_A11Y_TOOLBAR_ENABLED="Accessibility toolbar"
TPL_MOKO_A11Y_TOOLBAR_ENABLED_DESC="Show a floating accessibility toolbar with text resize and colour inversion controls."
TPL_MOKO_A11Y_TEXT_RESIZE="Text resize"
TPL_MOKO_A11Y_TEXT_RESIZE_DESC="Allow visitors to increase or decrease text size."
TPL_MOKO_A11Y_COLOR_INVERSION="Colour inversion"
TPL_MOKO_A11Y_COLOR_INVERSION_DESC="Allow visitors to invert page colours for improved readability."
TPL_MOKO_A11Y_TOOLBAR_POS="Toolbar position"
TPL_MOKO_A11Y_TOOLBAR_POS_DESC="Screen corner for the accessibility toolbar."
TPL_MOKO_A11Y_BTN_LABEL="Accessibility options"
TPL_MOKO_A11Y_TEXT_DECREASE="Decrease text size"
TPL_MOKO_A11Y_TEXT_RESET="Reset text size"
TPL_MOKO_A11Y_TEXT_INCREASE="Increase text size"
TPL_MOKO_A11Y_INVERT_COLORS="Invert colours"
TPL_MOKO_A11Y_HIGH_CONTRAST="High contrast"
TPL_MOKO_A11Y_HIGH_CONTRAST_DESC="Allow visitors to boost page contrast for improved readability."
TPL_MOKO_A11Y_HIGHLIGHT_LINKS="Highlight links"
TPL_MOKO_A11Y_HIGHLIGHT_LINKS_DESC="Allow visitors to outline all links so they stand out from surrounding text."
TPL_MOKO_A11Y_READABLE_FONT="Readable font"
TPL_MOKO_A11Y_READABLE_FONT_DESC="Allow visitors to switch to a clean system font optimised for readability."
TPL_MOKO_A11Y_PAUSE_ANIMATIONS="Pause animations"
TPL_MOKO_A11Y_PAUSE_ANIMATIONS_DESC="Allow visitors to stop all CSS animations and transitions."
; ===== CSS Variables tab =====
TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colours, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"