fix(themes): 🚀 Fix Lighthouse Performance & Accessibility Issues

[Ahmed-S-Abduallah]

🎯 Overview

This PR addresses critical Lighthouse and PageSpeed issues related to image layout shifts (CLS) and color contrast compliance.

✨ Changes Made

📸 Image Layout Shift (CLS) Fixes

• ✅ Added explicit width and height attributes to all <img> elements
• ✅ Implemented CSS aspect-ratio fallbacks for dynamic images
• ✅ Preserved existing lazy loading (loading="lazy" and data-src) systems
• ✅ Fixed images in:
  • Product pages (main images & thumbnails)
  • Cart items
  • Blog posts & listings
  • Order details & attachments
  • Testimonials avatars
  • Footer tax certificates
  • Brand logos & banners

🎨 Color Contrast Improvements

• ✅ Fixed low-contrast text issues (WCAG AA compliance)
• ✅ Replaced opacity-based text with solid colors
• ✅ Improved text-gray-400 and text-gray-500 contrast ratios
• ✅ Enhanced focus states visibility
• ✅ Added text shadows for better readability on colored backgrounds

♿ Accessibility Enhancements

• ✅ Ensured all images have meaningful alt attributes
• ✅ Improved form label contrast
• ✅ Enhanced focus indicators
• ✅ Maintained RTL layout compatibility

📊 Expected Results

• CLS Score: Close to 0 (no layout shifts)
• Accessibility Score: 100 (WCAG AA compliant)
• Performance: Improved Core Web Vitals
• No "Image elements do not have explicit width and height" warnings
• No "Background and foreground colors do not have sufficient contrast" warnings

🧪 Testing

• ✅ Verified all images load without layout shift
• ✅ Tested lazy loading functionality
• ✅ Verified RTL layout compatibility
• ✅ Checked color contrast ratios meet WCAG AA standards
• ✅ Tested on multiple pages (product, cart, blog, orders)

📝 Files Changed

• src/views/pages/product/single.twig
• src/views/pages/cart.twig
• src/views/pages/blog/*.twig
• src/views/pages/customer/orders/single.twig
• src/views/components/home/custom-testimonials.twig
• src/assets/styles/02-generic/reset.scss
• src/assets/styles/05-utilities/accessibility.scss (new)
• src/assets/styles/app.scss

🔒 Compatibility

• ✅ Salla platform compatible
• ✅ RTL layout preserved
• ✅ No breaking changes
• ✅ Production-ready code

[sentry]

Bug: The width and height attributes on images are ineffective for preventing layout shifts because CSS classes like w-full and h-80 override them by setting both dimensions explicitly.
_{Severity: MEDIUM}

Suggested Fix

To fix the layout shift, either remove the fixed height class (e.g., h-80) and ensure a global img { height: auto; } rule exists, or use the CSS aspect-ratio property. This will allow the browser to correctly reserve space based on the image's dimensions before it loads.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: src/views/pages/blog/single.twig#L42

Potential issue: The addition of `width` and `height` attributes to `<img>` tags is
intended to prevent Cumulative Layout Shift (CLS). However, this is ineffective because
CSS classes like `h-80`, `w-full`, and `h-full` are also applied, which explicitly set
both the width and height of the image. According to browser specifications, for the
HTML attributes to be used for aspect-ratio based space reservation, at least one CSS
dimension must be `auto`. Since both are defined, the browser ignores the aspect ratio
implied by the HTML attributes, leading to the very layout shifts the change was meant
to prevent. This issue is present on multiple pages, including the blog and product
single pages.

_{Did we get this right? 👍 / 👎 to inform future reviews.}