From 8abd59124576f23d25813fe06f4231bd214c2cb1 Mon Sep 17 00:00:00 2001
From: Paul Bratslavsky <codingafterthirty@gmail.com>
Date: Fri, 4 Sep 2026 13:13:55 -0700
Subject: [PATCH] fix(a11y): use h1 for the product title on product detail
 pages

The product detail page rendered the product name as <h2> in Next and
TanStack, leaving those pages with no <h1> at all. A page should have
exactly one h1, and screen-reader users navigate by it.

Astro and Nuxt already used <h1>, so this also brings all four frontends
to the same heading structure.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 next/components/products/single-product.tsx         | 2 +-
 tanstack/src/components/products/single-product.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/next/components/products/single-product.tsx b/next/components/products/single-product.tsx
index b09f4c10..626dff80 100644
--- a/next/components/products/single-product.tsx
+++ b/next/components/products/single-product.tsx
@@ -80,7 +80,7 @@ export const SingleProduct = ({
           </div>
         </div>
         <div>
-          <h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
+          <h1 className="text-2xl font-semibold mb-4">{product.name}</h1>
           <p className=" mb-6 bg-white text-xs px-4 py-1 rounded-full text-black w-fit">
             {locale === 'fr' ? '€' : '$'}
             {formatNumber(product.price, locale)}
diff --git a/tanstack/src/components/products/single-product.tsx b/tanstack/src/components/products/single-product.tsx
index b230d6af..e368e5ee 100644
--- a/tanstack/src/components/products/single-product.tsx
+++ b/tanstack/src/components/products/single-product.tsx
@@ -75,7 +75,7 @@ export const SingleProduct = ({
           </div>
         </div>
         <div>
-          <h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
+          <h1 className="text-2xl font-semibold mb-4">{product.name}</h1>
           <p className=" mb-6 bg-white text-xs px-4 py-1 rounded-full text-black w-fit">
             {locale === 'fr' ? '€' : '$'}
             {formatNumber(product.price, locale)}