ENG-8741: Web improvements

[carlosabadia]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements web performance and accessibility improvements across the Reflex documentation and landing pages. The changes migrate from Google Fonts to self-hosted fonts with proper preload hints, enhance ARIA attributes throughout the navigation components, optimize image formats, and improve semantic HTML structure.

Key Changes

• Migrated from Google Fonts CDN to self-hosted fonts (Instrument Sans and JetBrains Mono) with preload hints for improved performance
• Enhanced accessibility by adding descriptive aria-label attributes to navigation buttons, social links, and interactive elements
• Added ARIA role attributes (menubar/menuitem) to navigation menu structure for proper screen reader support
• Optimized image assets by replacing webp with avif format and reducing file sizes
• Improved semantic HTML by changing sidebar section titles from h5 to h2 elements
• Unified color classes for better consistency across light/dark modes
• Adjusted Product menu visibility - now shows on all screen sizes instead of xl+ only

Minor Issues

• Missing newline at end of assets/fonts.css file

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured improvements to performance and accessibility with no logic errors. The font migration improves page load performance, accessibility enhancements follow best practices, and image optimizations reduce bandwidth. The only minor issue is a missing newline in the CSS file which is purely cosmetic.
• No files require special attention

Important Files Changed

Filename	Overview
assets/fonts.css	Added self-hosted font definitions for Instrument Sans and JetBrains Mono
pcweb/pcweb.py	Migrated from Google Fonts to self-hosted fonts with preload hints for improved performance
pcweb/components/docpage/navbar/navbar.py	Added role attributes for ARIA menubar/menuitem and restructured Product menu visibility
pcweb/pages/landing/views/hero.py	Moved aria-label from Python to JavaScript for file upload input

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Server
    participant FontFiles as Font Files
    participant Assets as Image Assets
    
    Note over Browser,Assets: Page Load Sequence
    
    Browser->>Server: Request HTML page
    Server-->>Browser: HTML with preload hints
    
    par Font Preloading
        Browser->>FontFiles: Preload instrument-sans.woff2
        Browser->>FontFiles: Preload jetbrains-mono.woff2
    end
    
    Browser->>Server: Request fonts.css
    Server-->>Browser: Font-face definitions
    
    Note over Browser,FontFiles: Fonts loaded from local assets<br/>instead of Google Fonts CDN
    
    FontFiles-->>Browser: instrument-sans.woff2
    FontFiles-->>Browser: jetbrains-mono.woff2
    
    Browser->>Assets: Request optimized AVIF images
    Assets-->>Browser: Compressed image files
    
    Note over Browser: Accessibility enhancements:<br/>- ARIA labels on navigation<br/>- Role attributes for menu structure<br/>- Semantic HTML (h2 instead of h5)

Loading

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[linear]

ENG-8741 Lighthouse Score Investigation