[UX Redesign] Final responsive, accessibility, and consistency pass

[luandro]

Summary

Apply the cross-cutting polish pass after the nine implementation issues land. Cleanup scope is intentionally limited to elements proven orphaned by the redesign. Page-level horizontal scroll is disallowed; intentionally scrollable inner containers (Logs / data tables, drawers / sheets) are allowed. Touch hit areas are evaluated as effective hit targets, not inner-control element size. Verify (not introduce) the skip-link target behavior owned by #13.

Scope

This issue covers only cross-page polish that cannot reasonably live in a single child issue:

• Keyboard focus consistency across all four primary tabs and their sub-views (Monitoramento / Eventos / Áreas › Áreas protegidas + Clusters / Configurações › Operação + Detecção + Notificações + FR24 + Sistema + Registros).
• 1280px + 768px layout for every primary surface. Spot-check 1024px. Use 480px only for drawers, modals, sticky controls, and the topbar — i.e. surfaces that change layout materially below 768px.
• No unintended PAGE-LEVEL horizontal scrolling. Intentionally scrollable inner containers (Logs table, data tables, drawers / sheets that scroll independently) are allowed.
• Loading / empty / error state copy and visual treatment is consistent across all four tabs.
• Typography: ensure the same font sizes / line heights for headings, body, and metadata across the four tabs.
• Touch hit areas: every interactive action must have an effective touch / hit target of at least 44×44 CSS px. A small native checkbox / select is fine when its wrapping <label> (or surrounding control group) provides the required hit area; the requirement applies to the effective target, not to the inner control element.
• Consistent Portuguese terminology: review (verbo), review_status (substantivo), Fase (operacional), Área protegida, Unidade de conservação, Cluster, Monitoramento, Eventos, Áreas, Configurações.
• Status is not communicated by color alone. Every colored badge also has a textual label or aria-label.
• Final removal of elements proven orphaned by the redesign (see Cleanup scope below).
• Verify (NOT introduce) the skip-link target behavior owned by [UX Redesign] Simplify global shell and primary navigation #13: the skip-link href updates to match the active primary view on every tab activation. Initial state is #view-dashboard.
• Verification of the parent issue's self-review checklist.

Cleanup scope (narrowly defined)

The redesign preserves the existing internal view IDs for #view-dashboard (Monitoramento, #14) and #view-settings (Configurações, #19). These remain in index.html after this issue lands. Do not remove them.

The redesign removes:

• #view-fr24 — replaced by Configurações › FR24 (Issue [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18) plus Áreas › Clusters (Issue [UX Redesign] Move cluster configuration into Áreas and clarify FR24 coverage #17).
• #view-logs — replaced by Configurações › Registros (Issue [UX Redesign] Move Registros into Configurações without changing audit behavior #20).
• The FR24 primary-nav tab (Issue [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18).
• The Logs primary-nav tab (Issue [UX Redesign] Move Registros into Configurações without changing audit behavior #20).
• The #nav-overflow overflow menu block — both its children (FR24, Logs) are gone by [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 / [UX Redesign] Move Registros into Configurações without changing audit behavior #20, so the block is now empty. (Issues [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 and [UX Redesign] Move Registros into Configurações without changing audit behavior #20 each remove their own overflow entry; this issue may remove the now-empty overflow container if it still remains.)
• #view-event-detail — removable only if Issue [UX Redesign] Reorganize Eventos into a review queue with investigation drawer #15 has fully replaced its functionality with the drawer in #view-events and no code path still targets it. The #/events/{id} deep link is preserved (it now points at Eventos + drawer). If anything still references #view-event-detail (e.g. a fallback in the loadEventDetail path), keep the view container until those references are removed.
• Old CSS classes only used by removed views (run grep to confirm).
• Old i18n keys (nav_fr24, nav_logs, etc.) marked unused in app/i18n.py. Keep them until both pt and en translation parity is verified across the new keys.

If any cleanup decision is in doubt, the element stays. Cleanup is about proven orphans, not "things that look stale".

Screenshot budget

Per primary surface (Monitoramento, Eventos, Áreas › Áreas protegidas, Áreas › Clusters, Configurações › Operação, Configurações › Detecção, Configurações › Notificações, Configurações › FR24, Configurações › Sistema, Configurações › Registros):

• 1280px (one screenshot)
• 768px (one screenshot)

Per overlay or sticky-control surface (Eventos drawer, phase-confirmation modal, FR24 enable toggle, bulk-action toolbar):

• 480px (one screenshot)

Total budget: ~10 surfaces × 2 = 20 + ~4 overlays × 1 = ~24 screenshots, plus a 1024px spot-check on the two most layout-sensitive surfaces (Monitoramento and Eventos).

Saved under docs/ux_redesign/screenshots/. One example each of: empty state, error state, loading state, with-data state per primary surface where those states are easily reproducible.

Out of scope

• New product functionality.
• New product copy or tone changes (only consistency polish; no rewrites).
• Translation of new strings — all new i18n keys were added in their owning child issue.
• Refactors unrelated to UX consistency.
• Removing #view-dashboard or #view-settings (they are the canonical homes for Monitoramento and Configurações; the redesign does not migrate them).
• Removing intentionally scrollable inner containers (Logs table, etc.).
• Introducing the skip-link target behavior — it is owned by [UX Redesign] Simplify global shell and primary navigation #13; this issue only verifies it.
• Assuming axe, lighthouse, or any other optional dev tool is installed. Use npx --no-install axe (per AGENTS.md); if axe is not installed, the QA pass records the missing-tool note and uses keyboard-only manual checks + the existing VM JS accessibility assertions instead.

Detailed behavior

Keyboard focus

• Tab order is logical on every surface.
• No focus traps (verify modals from Issue [UX Redesign] Make Shadow / Review / Live transitions explicit and safe #21 do not leak focus when closed; the new onCancel callback wired into showModal ensures Escape reverts reliably).
• Skip link (<a class="skip-link"> already on line 20 of index.html) lands on the active view's main content. This is owned by [UX Redesign] Simplify global shell and primary navigation #13; this issue verifies the behavior, not the implementation.
• Escape closes any open overlay (Eventos drawer, phase-change modal).

Tablet layout

• Every primary surface is usable at ~768px without page-level horizontal scroll on a 1024px viewport device-pixel-ratio-aware.
• Map panels cap their height appropriately.

Loading / empty / error states

• Same component used for loading spinners / progress across all tabs.
• Same wording voice for empty states ("Nenhum …").
• Same error rendering (.form-result and #view-*-error elements).

Typography

• Headings (h1, h2, eyebrow) consistent.
• Metadata (.muted) consistent.

Touch hit areas

• Every interactive action has an effective touch / hit target of at least 44×44 CSS px.
• A small native <input type="checkbox"> or <select> is acceptable when its wrapping <label> (or surrounding control group) provides the required 44×44 hit area. The requirement applies to the effective target, not to the inner control element.

Portuguese terminology

• Single glossary used everywhere: review (verbo), review_status (substantivo), Fase (operacional), Área protegida, Unidade de conservação, Cluster, Monitoramento, Eventos, Áreas, Configurações.

Color-not-alone status

• Every colored badge (review status, phase badge, FR24 budget state) carries a textual label too. Verified in DOM via tests.

Skip-link behavior (verification only)

• Verify the behavior added by [UX Redesign] Simplify global shell and primary navigation #13: on every primary tab activation, the skip-link href is updated to match the active primary view's ID (Dashboard/Monitoramento → #view-dashboard, Eventos → #view-events, Áreas → #view-areas, Configurações → #view-settings; transitional FR24/Logs likewise while they still exist).
• Initial state is #view-dashboard.
• If the behavior is not present (e.g. [UX Redesign] Simplify global shell and primary navigation #13 reverted or a regression slipped through), this issue does NOT implement the fix — it reports the regression and asks [UX Redesign] Simplify global shell and primary navigation #13 to fix it.

Acceptance criteria

• Every primary surface passes the keyboard-only navigation smoke test.
• Every primary surface renders without page-level horizontal scroll at 1280px and 768px. Intentionally scrollable inner containers (Logs table, data tables, drawers / sheets) remain allowed.
• 1024px spot-checks pass on Monitoramento and Eventos.
• 480px spot-checks pass on Eventos drawer and phase-change modal.
• Loading / empty / error state components are visually consistent across all four tabs.
• Every interactive action has an effective touch hit target of at least 44×44 CSS px. Native controls (checkbox / select) are exempt when their wrapping <label> provides the required hit area.
• Every colored badge also has a textual label.
• #view-fr24 is verified absent from index.html. ([UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 owns the actual removal.)
• #view-logs is verified absent from index.html. ([UX Redesign] Move Registros into Configurações without changing audit behavior #20 owns the actual removal.)
• The FR24 primary-nav tab is verified removed. ([UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 owns the actual removal.)
• The Logs primary-nav tab is verified removed. ([UX Redesign] Move Registros into Configurações without changing audit behavior #20 owns the actual removal.)
• The #nav-overflow block is removed (if not already removed by [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 / [UX Redesign] Move Registros into Configurações without changing audit behavior #20). If [UX Redesign] Move FR24 usage and budget into Monitoramento and Configurações #18 / [UX Redesign] Move Registros into Configurações without changing audit behavior #20 left the now-empty wrapper behind, [UX Redesign] Final responsive, accessibility, and consistency pass #22 may remove it; otherwise nothing to do.
• #view-event-detail is removed only if no code path targets it; otherwise it stays until the last reference is migrated.
• #view-dashboard and #view-settings are NOT removed (they remain the canonical homes for Monitoramento and Configurações).
• Screenshots saved under docs/ux_redesign/screenshots/ per the budget above.
• The skip-link href updates to match the active primary view on every tab activation, with initial state #view-dashboard. (Verify-only; [UX Redesign] Simplify global shell and primary navigation #13 owns the implementation.)
• The parent issue's Section 11 checklist answers "yes" for every question.

Test plan

• Accessibility audit: npx --no-install axe per the AGENTS.md rule. If axe is not installed, the command fails (does NOT auto-install) and the QA pass records a "tool not installed, manual keyboard checks used" note. Manual keyboard-only smoke test always runs.
• Visual regression: review the screenshots in docs/ux_redesign/screenshots/ against the wireframes; no automated visual-diff tool is required.
• Keyboard smoke: tab through every primary surface manually, verify focus order and skip link. Verify the skip-link target updates as expected; if it does not, file a regression against [UX Redesign] Simplify global shell and primary navigation #13 (do not implement the fix here).
• i18n parity: run both pt and en, verify no missing keys (no MissingTranslationError in the console).

Dependencies

• Issues [UX Redesign] Simplify global shell and primary navigation #13–[UX Redesign] Make Shadow / Review / Live transitions explicit and safe #21 must be merged first.

Rollout / compatibility

• Pure polish; no functional changes.

Open questions

None.