From a7e85eaf7e158ce65464084f784fbe4e2bfa26f0 Mon Sep 17 00:00:00 2001
From: deadlock97 <manidhar.syv1997@gmail.com>
Date: Mon, 23 Mar 2026 01:00:21 +0530
Subject: [PATCH 1/2] Fix accessibility: heading hierarchy and color contrast
 issues

---
 src/components/Layout/HomeContent.js    | 14 +++++++-------
 src/components/Layout/TopNav/TopNav.tsx |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index f9b785db420..55fddf92b85 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -297,9 +297,9 @@ export function HomeContent() {
                     <div className="absolute inset-0 bg-gradient-right" />
                     <div className="bg-wash relative h-14 w-full" />
                     <div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
-                      <h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
+                      <h3 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
                         Stay true to the web
-                      </h4>
+                      </h3>
                       <p className="lg:text-xl leading-normal text-secondary">
                         People expect web app pages to load fast. On the server,
                         React lets you start streaming HTML while you’re still
@@ -383,9 +383,9 @@ export function HomeContent() {
                         </div>
                       </div>
                       <div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
-                        <h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
+                        <h3 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
                           Go truly native
-                        </h4>
+                        </h3>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
                           People expect native apps to look and feel like their
                           platform.{' '}
@@ -1114,9 +1114,9 @@ function SearchableVideoList({ videos }) {
             noPadding={true}
             contentMarginTop="72px"
             height="30rem">
-            <h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
+            <h2 className="mx-4 mb-1 font-bold text-3xl text-primary">
               React Videos
-            </h1>
+            </h2>
             <p className="mx-4 mb-0 leading-snug text-secondary text-xl">
               A brief history of React
             </p>
@@ -1315,7 +1315,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
               />
             </svg>
 
-            <span className="text-gray-30">
+            <span className="text-gray-50 dark:text-gray-30">
               {domain}
               {path != null && '/'}
             </span>
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index efc90ed2c76..1a18c510d55 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -312,10 +312,10 @@ export default function TopNav({
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base'
+                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-50 dark:text-gray-30 rounded-full align-middle text-base'
                 )}
                 onClick={onOpenSearch}>
-                <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="align-middle me-3 text-gray-50 dark:text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
                 Search
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>

From b6c15f26f549f1fa7899ce77f570f1e6b6c44c99 Mon Sep 17 00:00:00 2001
From: deadlock97 <manidhar.syv1997@gmail.com>
Date: Mon, 23 Mar 2026 11:28:20 +0530
Subject: [PATCH 2/2] Dark mode contrast issues fixed

---
 src/components/Layout/HomeContent.js    | 2 +-
 src/components/Layout/TopNav/TopNav.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 55fddf92b85..f27b7bfa548 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1315,7 +1315,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
               />
             </svg>
 
-            <span className="text-gray-50 dark:text-gray-30">
+            <span className="text-gray-50">
               {domain}
               {path != null && '/'}
             </span>
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 1a18c510d55..e32c28f5a68 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -303,7 +303,7 @@ export default function TopNav({
               <div className="flex flex-column justify-center items-center">
                 <NextLink
                   href="/versions"
-                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
+                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-10 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
                   v{siteConfig.version}
                 </NextLink>
               </div>
@@ -312,10 +312,10 @@ export default function TopNav({
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-50 dark:text-gray-30 rounded-full align-middle text-base'
+                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-50 dark:text-gray-10 rounded-full align-middle text-base'
                 )}
                 onClick={onOpenSearch}>
-                <IconSearch className="align-middle me-3 text-gray-50 dark:text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="align-middle me-3 text-gray-50 dark:text-gray-10 shrink-0 group-betterhover:hover:text-gray-70" />
                 Search
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>