Align theme-fab + a11y toolbar behavior + CSS with MokoAI

jmiller commented

2026-07-19 06:59:32 +00:00

Owner

Align theme-fab + a11y toolbar behavior + CSS with MokoAI

MokoAI vendors this project's theme switcher (light/dark/auto FAB) + accessibility toolbar and has refined the behavior + CSS (responsive collapse-into-tab on mobile, light-theme accent #aec5f5 with black text on accent buttons, fab/tab color parity, login in-card placement). Align this project's implementation so the widget behavior + CSS match.

Reference behavior (MokoAI)

Theme FAB (light/dark + AUTO) + inline a11y toggle + a11y toolbar (resize, invert, contrast, highlight links, readable font, pause animations).
Login/sign-up: controls relocated INTO the card as a flush bottom bar (shared rounded corners — part of the login box).
App desktop: FAB in the sidebar corner.
App mobile (<=768px): controls collapse into a labeled tab (universal-access icon) left of the message box; tapping pops a panel that flattens its left edge and emerges from the tab (tab + panel read as one continuous blue bar); tap-outside closes.
Light theme: accent #aec5f5; accent-filled buttons use black text (never white on light); the fab + tab stay a consistent blue (do not change color).

Reference / tracking: MokoConsulting/MokoAI#146

## Align theme-fab + a11y toolbar behavior + CSS with MokoAI MokoAI vendors this project's theme switcher (light/dark/auto FAB) + accessibility toolbar and has refined the behavior + CSS (responsive collapse-into-tab on mobile, light-theme accent `#aec5f5` with black text on accent buttons, fab/tab color parity, login in-card placement). Align this project's implementation so the widget behavior + CSS match. ### Reference behavior (MokoAI) - Theme FAB (light/dark + AUTO) + inline a11y toggle + a11y toolbar (resize, invert, contrast, highlight links, readable font, pause animations). - **Login/sign-up:** controls relocated INTO the card as a flush bottom bar (shared rounded corners — part of the login box). - **App desktop:** FAB in the sidebar corner. - **App mobile (<=768px):** controls collapse into a labeled tab (universal-access icon) left of the message box; tapping pops a panel that flattens its left edge and emerges from the tab (tab + panel read as one continuous blue bar); tap-outside closes. - **Light theme:** accent `#aec5f5`; accent-filled buttons use black text (never white on light); the fab + tab stay a consistent blue (do not change color). Reference / tracking: MokoConsulting/MokoAI#146

jmiller commented

2026-07-19 07:10:27 +00:00

Author

Owner

Branch created: feature/178-align-theme-fab-a11y-toolbar-behavior-cs

git fetch origin
git checkout feature/178-align-theme-fab-a11y-toolbar-behavior-cs

Branch created: [`feature/178-align-theme-fab-a11y-toolbar-behavior-cs`](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/src/branch/feature/178-align-theme-fab-a11y-toolbar-behavior-cs) ```bash git fetch origin git checkout feature/178-align-theme-fab-a11y-toolbar-behavior-cs ```

jmiller commented

2026-07-21 20:09:37 +00:00

Author

Owner

🧪 Testing plan — Theme-FAB + a11y toolbar (MokoAI parity)

Build: feature/fab-a11y-mokoai-parity (commit 9159108). Theme FAB + a11y toolbar params enabled.

Parity already in place (regression-check these still work)

FAB floats bottom-right; sun/moon switch + Auto toggle + inline a11y toggle present.
a11y toggle opens the floating panel; tap-outside closes it.
Toggle colour is theme-aware: #1565c0 (light) / #42a5f5 (dark); the FAB body stays #112855 in both themes.

New: login-card relocation

Visit the login page (index.php?option=com_users&view=login). → the FAB relocates into the login card as a flush bottom bar: in-card class, full-width, top separator border, centred, no float shadow.
Theme switch and a11y toggle still work while docked in the card.
Light + dark theme both render the docked bar correctly.
If the login form is injected late (AJAX/modal), the MutationObserver still relocates it within ~3 s.
Non-login pages: FAB still floats normally (relocation only on body.view-login).

⚠️ Selector verification (the one caveat)

Confirm the login container selector matches the live com_users markup — the relocation targets .com-users-login, .login .card, main#maincontent .card. If the FAB does not dock on the login page, inspect the login DOM and adjust the selector in relocateFabToLoginCard().

Pass criteria

Docked flush bar on login (both themes), fully functional; unchanged behaviour everywhere else.

## 🧪 Testing plan — Theme-FAB + a11y toolbar (MokoAI parity) **Build:** `feature/fab-a11y-mokoai-parity` (commit `9159108`). Theme FAB + a11y toolbar params enabled. ### Parity already in place (regression-check these still work) - [ ] FAB floats bottom-right; sun/moon switch + Auto toggle + inline a11y toggle present. - [ ] a11y toggle opens the floating panel; **tap-outside closes** it. - [ ] Toggle colour is theme-aware: **`#1565c0`** (light) / **`#42a5f5`** (dark); the FAB body stays `#112855` in both themes. ### New: login-card relocation - [ ] Visit the login page (`index.php?option=com_users&view=login`). → the **FAB relocates into the login card** as a flush bottom bar: `in-card` class, full-width, top separator border, centred, no float shadow. - [ ] Theme switch **and** a11y toggle still work while docked in the card. - [ ] Light + dark theme both render the docked bar correctly. - [ ] If the login form is injected late (AJAX/modal), the `MutationObserver` still relocates it within ~3 s. - [ ] **Non-login pages:** FAB still floats normally (relocation only on `body.view-login`). ### ⚠️ Selector verification (the one caveat) - [ ] Confirm the login container selector matches the live com_users markup — the relocation targets `.com-users-login, .login .card, main#maincontent .card`. If the FAB does **not** dock on the login page, inspect the login DOM and adjust the selector in `relocateFabToLoginCard()`. ### Pass criteria Docked flush bar on login (both themes), fully functional; unchanged behaviour everywhere else.