Refactor code structure for improved readability and maintainability

Author: Alexandre Machado

app/components/cart/CartDrawer.tsx

@@ -22,27 +22,69 @@ export function CartDrawer({
   onRemoveItem,
 }: CartDrawerProps) {
   const drawerRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
 
-  // Close on escape key
+  // Close on escape key and focus trap
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
+
     if (isOpen) {
+      // Store the currently focused element
+      previousActiveElement.current = document.activeElement as HTMLElement;
+      
+      // Focus the drawer when it opens
+      setTimeout(() => {
+        drawerRef.current?.focus();
+      }, 0);
+      
       document.addEventListener('keydown', handleEscape);
       document.body.style.overflow = 'hidden';
     }
+
     return () => {
       document.removeEventListener('keydown', handleEscape);
       document.body.style.overflow = '';
+      
+      // Restore focus to previous element when drawer closes
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
     };
   }, [isOpen, onClose]);
 
-  // Focus trap
+  // Focus trap for Tab key
   useEffect(() => {
-    if (isOpen && drawerRef.current) {
-      drawerRef.current.focus();
-    }
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+      if (!drawerRef.current) return;
+
+      const focusableElements = drawerRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (!firstElement || !lastElement) return;
+
+      // Shift + Tab on first element - trap to last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      }
+      // Tab on last element - trap to first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, [isOpen]);
 
   const isEmpty = items.length === 0;

app/components/cart/CartProvider.tsx

@@ -84,7 +84,11 @@ export function CartProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     if (!isReady || typeof window === 'undefined') return;
-    window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
+    try {
+      window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
+    } catch (error) {
+      console.warn('Failed to persist cart to localStorage:', error);
+    }
   }, [items, isReady]);
 
   const value = useMemo<CartContextValue>(() => {

app/lib/utils.ts

@@ -1,10 +1,23 @@
 import { type ClassValue, clsx } from 'clsx';
+import DOMPurify from 'dompurify';
 
 // Classname utility
 export function cn(...inputs: ClassValue[]) {
   return clsx(inputs);
 }
 
+// Sanitize HTML to prevent XSS attacks
+export function sanitizeHtml(html: string): string {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'b', 'i', 'u', 'span', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
+  });
+}
+
 // Currency formatter
 export function formatCurrency(amount: string, currencyCode: string = 'USD'): string {
   return new Intl.NumberFormat('en-US', {

app/routes/products.$handle.tsx

@@ -5,7 +5,7 @@ import { useLoaderData } from '@remix-run/react';
 import { useMemo, useState } from 'react';
 import { storefront } from '../lib/storefront';
 import { PRODUCT_BY_HANDLE_QUERY, RELATED_PRODUCTS_QUERY } from '../lib/shopify/queries';
-import { formatCurrency } from '../lib/utils';
+import { formatCurrency, sanitizeHtml } from '../lib/utils';
 import { Badge } from '../components/ui/Badge';
 import { Button } from '../components/ui/Button';
 import { AnimateIn } from '../components/motion/AnimateIn';
@@ -203,7 +203,7 @@ export default function ProductPage() {
               {/* Description */}
               <div className="text-text-secondary leading-relaxed">
                 {product.descriptionHtml ? (
-                  <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
+                  <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(product.descriptionHtml) }} />
                 ) : (
                   <p>{product.description}</p>
                 )}

package-lock.json

@@ -15,7 +15,9 @@
     "@remix-run/node": "^2.15.0",
     "@remix-run/react": "^2.15.0",
     "@remix-run/serve": "^2.15.0",
+    "@types/dompurify": "^3.0.5",
     "clsx": "^2.1.0",
+    "dompurify": "^3.3.3",
     "isbot": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"