feat: resolve keyboard access and visible focus order gaps

[Johnsource-hub]

#closes
#977

Description

This PR addresses mobile layout usability, keyboard flow navigation, and web accessibility (a11y) considerations across the core responsive messaging layouts. It repairs hidden interaction points, updates ARIA landmark state configurations, and ensures native support for system motion preferences.

Problem Statement

• Issue: Icon-only navigation targets on mobile screen layouts lacked descriptive, non-visual names. Furthermore, off-screen tracking drawers (such as the collapsed sidebar panel) remained fully focusable via standard keyboard sequential Tab arrays.
• Impact: Screen-reader users encountered ambiguous controls, while keyboard-only users faced invisible navigation focus traps when attempting to browse their secure layout frames.

Technical Changes & Wins

• Structural Focus Mitigation (Sidebar.tsx): Implemented absolute visual and behavioral blocking (invisible, pointer-events-none, and dynamic tabIndex={-1}) on hidden layout components. This keeps off-screen sidebar options completely outside the keyboard navigation sequence when closed.
• Accessible Name Resolution (Topbar.tsx, BottomNavigation.tsx): Appended descriptive aria-label, aria-expanded, and aria-controls bindings to all icon-only buttons to convey operational context explicitly to screen readers.
• System Motion Awareness (use-mobile.tsx): Expanded the mobile detection hook with a query listener for (prefers-reduced-motion: reduce). This bypasses sliding transitions instantly for users with motion sensitivities.

Affected Path Scopes

• src/hooks/use-mobile.tsx
• src/components/mail/Sidebar.tsx
• src/components/mail/Topbar.tsx
• src/components/mail/BottomNavigation.tsx

Scope Guardrails Compliance

• All enhancements exist strictly inside the targeted component paths.
• No alternative mobile tooling packages or external UI frameworks were introduced.
• The implementation operates completely on local layout logic, using zero live messaging logs or sensitive user metadata variables.

Verification & Testing

• Verified full keyboard operation: every navigation item is reachable and actionable using only Tab and Enter/Space.
• Passed local workspace dependency integrity metrics clean:

  npx tsc --noEmit
  npm run lint