Feature/frontend quality accessibility refactor

[saidai-bhuvanesh]

Overview

This PR improves frontend responsiveness, accessibility, keyboard usability, CSS maintainability, mobile navigation quality, and frontend stability for ChaatBazaar while preserving the existing orange-themed design system.

Critical Problems Fixed

• Crowded Mobile Navbar: Replaced the desktop-first header navigation layout with an accessible drawer layout on viewports under 1024px.
• Missing Focus-Visible States: Interactive elements in the header now display high-contrast, glowing outlines (white glows in headers; brand orange glows elsewhere) when focused via keyboard.
• Missing Reduced-Motion Support: Implemented CSS guidelines to suppress parallax-heavy card translations, skeleton load shimmer animations, and bouncing floating emojis for users with motion sensitivity.
• Weak Form Accessibility Workflows: Enhanced client-side validations (in contact, login, and signup forms) to highlight invalid inputs visually (border-color: #c0392b) and update screen readers via aria-invalid="true".
• Frontend Parser-Breaking Conflict Artifacts: Cleaned up syntax leftovers (newFeatures and main raw text) in css/style.css, js/main.js, and data/menu.json which were breaking client-side logic and JSON parsing.
• Responsive Spacing Inconsistencies: Cleaned up margins, padding scale factors, and mobile touch targets to guarantee a fluid UX.

Features Added

• Responsive Hamburger Navigation: Dynamic toggle button transition and slide-in drawer layout.
• Keyboard Focus Lock: Drawer traps keyboard tab sequences and closes smoothly on Escape.
• Mobile Accordion Dropdowns: Categorized items render as clean expandable submenus.
• Glow Outline focus-visible Indicators: Modern glowing high-contrast outlines for all interactive elements.
• Preemptive Reduced-Motion Media Queries: Safe animations for motion-sensitive users.
• Visual Validation Form Indicators: High-contrast error outlines for text fields.
• Expanded Mobile Tap Targets: Standard 44px to 48px touch boundaries for navigation links and social icons.

Technical Improvements

• Unified mobile navigation drawer with complete accessibility logic in js/accessibility.js.
• Separated layout styles from accessibility rules in css/style.css.
• Cleaned and validated data/menu.json schema layout.
• Prevented layouts thrashing and improved browser rendering frames during drawer transitions.

Testing Completed

• Keyboard Navigation: Checked complete tab sequences, drawer focus trapping, and Escape closures.
• Responsive Layouts: Tested viewport sizes from 320px up to 1440px.
• Reduced Motion: Verified animations halt when user preferences set prefers-reduced-motion: reduce.
• Forms Usability: Triggered client-side validators and confirmed keyboard refocus on invalid elements.