Feature/critical accessibility responsive fixes

[saidai-bhuvanesh]

Overview

This PR introduces critical accessibility, responsive navigation, keyboard usability, reduced-motion support, and mobile UX improvements for ChaatBazaar while preserving the existing orange-themed design identity.

Critical Problems Fixed

• Weak Keyboard Accessibility: Standardized modern glowing focus states using box-shadow on :focus-visible, with white outlines inside the orange header.
• Limited Mobile Usability: Repositioned menu links into a responsive vertical slide-out drawer on viewports <= 1024px, with touch-friendly 48px tap targets.
• Motion Sensitivity Preferences: Added system-level prefers-reduced-motion settings to freeze shimmer skeleton animations, reduce hovers, and hide floating background emojis.
• Incomplete Form Accessibility: Integrated dynamic validation error borders (outlined in red) and ARIA states (aria-invalid) on contact, login, and signup input forms.
• Accidental Clicks Prevention: Increased the tap target sizes of footer social links to exactly 44px on mobile devices.
• Responsive spacing inconsistencies: Refined padding and line heights on mobile screens for about, team, and testimonial sections.

Testing Completed

• Syntax validation via Node CLI
• Mobile emulator drawer tests
• Keyboard traversal, tab flow, and focus-trapping validation
• Dynamic validation error highlights checking

Before vs. After Carousel

Before and After screenshots are attached inside the walkthrough.md artifact for review.

Overview

This PR introduces critical accessibility, responsive navigation, keyboard usability, reduced-motion support, and mobile UX improvements for ChaatBazaar while preserving the existing orange-themed design identity.

Critical Problems Fixed

• Weak Keyboard Accessibility: Standardized modern glowing focus states using box-shadow on :focus-visible, with white outlines inside the orange header.
• Limited Mobile Usability: Repositioned menu links into a responsive vertical slide-out drawer on viewports <= 1024px, with touch-friendly 48px tap targets.
• Motion Sensitivity Preferences: Added system-level prefers-reduced-motion settings to freeze shimmer skeleton animations, reduce hovers, and hide floating background emojis.
• Incomplete Form Accessibility: Integrated dynamic validation error borders (outlined in red) and ARIA states (aria-invalid) on contact, login, and signup input forms.
• Accidental Clicks Prevention: Increased the tap target sizes of footer social links to exactly 44px on mobile devices.
• Responsive spacing inconsistencies: Refined padding and line heights on mobile screens for about, team, and testimonial sections.

Testing Completed

• Syntax validation via Node CLI
• Mobile emulator drawer tests
• Keyboard traversal, tab flow, and focus-trapping validation
• Dynamic validation error highlights checking

Before vs. After Carousel

Before and After screenshots are attached inside the walkthrough.md artifact for review.

Overview

This PR introduces critical accessibility, responsive navigation, keyboard usability, reduced-motion support, and mobile UX improvements for ChaatBazaar while preserving the existing orange-themed design identity.

Critical Problems Fixed

• Weak Keyboard Accessibility: Standardized modern glowing focus states using box-shadow on :focus-visible, with white outlines inside the orange header.
• Limited Mobile Usability: Repositioned menu links into a responsive vertical slide-out drawer on viewports <= 1024px, with touch-friendly 48px tap targets.
• Motion Sensitivity Preferences: Added system-level prefers-reduced-motion settings to freeze shimmer skeleton animations, reduce hovers, and hide floating background emojis.
• Incomplete Form Accessibility: Integrated dynamic validation error borders (outlined in red) and ARIA states (aria-invalid) on contact, login, and signup input forms.
• Accidental Clicks Prevention: Increased the tap target sizes of footer social links to exactly 44px on mobile devices.
• Responsive spacing inconsistencies: Refined padding and line heights on mobile screens for about, team, and testimonial sections.

Testing Completed

• Syntax validation via Node CLI
• Mobile emulator drawer tests
• Keyboard traversal, tab flow, and focus-trapping validation
• Dynamic validation error highlights checking

Before vs. After Carousel

Before and After screenshots are attached inside the walkthrough.md artifact for review.