From a2b2c8ea5cebf32ff38a4f9d0879a7c68ab4bc6b Mon Sep 17 00:00:00 2001
From: Uday Raj Sahai <udayrajsahai22@gmail.com>
Date: Thu, 17 Sep 2026 16:28:12 +0530
Subject: [PATCH] Accessibility-fix-in-code

---
 app/[locale]/(user)/about-us/page.tsx         |   8 +-
 .../CollaborativesListingClient.tsx           |  11 +-
 app/[locale]/(user)/components/Content.tsx    |  11 +-
 app/[locale]/(user)/components/Datasets.tsx   |   2 +-
 .../(user)/components/ListingComponent.tsx    |   4 +-
 app/[locale]/(user)/components/Sectors.tsx    |   2 +-
 app/[locale]/(user)/components/UseCases.tsx   |   2 +-
 app/[locale]/(user)/datasets/page.tsx         |   4 +
 app/[locale]/(user)/page.module.scss          |   5 +
 .../publishers/PublishersListingClient.tsx    |   5 +-
 .../(user)/sectors/SectorsListing.tsx         |  11 +-
 .../(user)/usecases/UseCasesListingClient.tsx |   6 +-
 .../dashboard/components/main-footer.tsx      |   6 +
 .../dashboard/components/main-nav.tsx         | 126 +++++++++---------
 app/[locale]/dashboard/components/sidebar.tsx |   2 +-
 app/[locale]/layout.tsx                       |   7 +
 components/provider.tsx                       |  41 +++++-
 styles/globals.css                            |   7 +
 18 files changed, 164 insertions(+), 96 deletions(-)

diff --git a/app/[locale]/(user)/about-us/page.tsx b/app/[locale]/(user)/about-us/page.tsx
index 65d4dae4..b409f54a 100644
--- a/app/[locale]/(user)/about-us/page.tsx
+++ b/app/[locale]/(user)/about-us/page.tsx
@@ -56,7 +56,7 @@ const About = () => {
   });
 
   return (
-    <main>
+    <div>
       <JsonLd json={jsonLd} />
       <BreadCrumbs
         data={[
@@ -65,7 +65,9 @@ const About = () => {
         ]}
       />
       <div className="container mb-5 py-5 lg:py-10">
-        <Text variant="heading2xl">About CivicDataSpace</Text>
+        <Text variant="heading2xl" as="h1">
+          About CivicDataSpace
+        </Text>
         <div className=" flex flex-col gap-4 pt-4 lg:gap-6 lg:pt-6">
           <Text variant="headingLg" fontWeight="regular" className=" leading-5">
             CivicDataSpace is a collaborative, open-source platform that goes
@@ -118,7 +120,7 @@ const About = () => {
           <Team />
         </div> */}
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx b/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx
index 5f59ef8b..a0726485 100644
--- a/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx
+++ b/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx
@@ -162,7 +162,7 @@ const CollaborativesListingClient = () => {
   });
 
   return (
-    <main>
+    <div>
       <JsonLd json={jsonLd} />
       <BreadCrumbs
         data={[
@@ -178,6 +178,7 @@ const CollaborativesListingClient = () => {
                 <div className="flex flex-col gap-5 lg:w-3/5">
                   <Text
                     variant="heading2xl"
+                    as="h1"
                     fontWeight="bold"
                     color="onBgDefault"
                   >
@@ -231,7 +232,7 @@ const CollaborativesListingClient = () => {
             {/* Search and Filter Section */}
             <div className="flex flex-wrap gap-6 pt-4 lg:flex-nowrap">
               <SearchInput
-                label={''}
+                label="Search"
                 className={cn('w-full', Styles.Search)}
                 onSubmit={(e) => {
                   setSearchTerm(e);
@@ -252,8 +253,8 @@ const CollaborativesListingClient = () => {
                   Sort :
                 </Text>
                 <Select
-                  label=""
-                  labelInline
+                  label="Sort"
+                  labelHidden
                   name="sort-select"
                   options={[
                     {
@@ -412,7 +413,7 @@ const CollaborativesListingClient = () => {
           )}
         </div>
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/[locale]/(user)/components/Content.tsx b/app/[locale]/(user)/components/Content.tsx
index 316d8aab..53c3f190 100644
--- a/app/[locale]/(user)/components/Content.tsx
+++ b/app/[locale]/(user)/components/Content.tsx
@@ -62,12 +62,13 @@ export const Content = () => {
   ];
 
   return (
-    <main className="container py-10 md:px-8 lg:py-20">
+    <div className="container py-10 md:px-8 lg:py-20">
       <div className="flex justify-around gap-8 px-4 md:px-12 lg:px-12">
         <div className="flex flex-col gap-11 lg:w-[60%]">
           <div className="flex flex-col gap-2">
             <Text
               variant="heading3xl"
+              as="h1"
               color="onBgDefault"
               className="text-textOnBGDefault1"
             >
@@ -86,9 +87,9 @@ export const Content = () => {
             <SearchInput
               className={cn(Styles.Search)}
               onSubmit={handleSearch}
-              label={''}
+              label="Search"
               placeholder="Search for any data"
-              name={''}
+              name="search"
               withButton
             />
           </div>
@@ -102,7 +103,7 @@ export const Content = () => {
                 <Link
                   key={`${item.label}_${index}`}
                   href={item.link}
-                  className="w-[177px] md:basis-[177px]"
+                  className="w-[177px] rounded-[8px] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-interactive-focused)] md:basis-[177px]"
                   data-tour={
                     index === 0
                       ? 'datasets-link'
@@ -157,6 +158,6 @@ export const Content = () => {
           />
         </div>
       </div>
-    </main>
+    </div>
   );
 };
diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx
index 46b8d696..4b31a380 100644
--- a/app/[locale]/(user)/components/Datasets.tsx
+++ b/app/[locale]/(user)/components/Datasets.tsx
@@ -89,7 +89,7 @@ const Datasets = () => {
         <div>
           <Button
             kind="tertiary"
-            className="shadow-none border-none bg-transparent px-0 text-primaryText hover:underline"
+            className="shadow-none border-none bg-transparent px-0 text-primaryText hover:underline outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-interactive-focused)]"
             onClick={() => {
               router.push('/datasets');
             }}
diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx
index ebcc25f9..bdfb1aa9 100644
--- a/app/[locale]/(user)/components/ListingComponent.tsx
+++ b/app/[locale]/(user)/components/ListingComponent.tsx
@@ -499,8 +499,8 @@ const ListingComponent: React.FC<ListingProps> = ({
                   </div>
                   <div className="flex items-center gap-2" data-tour="sort">
                     <Select
-                      label=""
-                      labelInline
+                      label="Sort"
+                      labelHidden
                       name="select"
                       onChange={handleSortChange}
                       options={[
diff --git a/app/[locale]/(user)/components/Sectors.tsx b/app/[locale]/(user)/components/Sectors.tsx
index da3e4bcf..b097ef8c 100644
--- a/app/[locale]/(user)/components/Sectors.tsx
+++ b/app/[locale]/(user)/components/Sectors.tsx
@@ -44,7 +44,7 @@ const Sectors = () => {
         <div className="mr-8 lg:mr-12">
           <Button
             kind="tertiary"
-            className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline"
+            className="bg-transparent border-none shadow-none text-primaryText px-0 hover:underline outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-interactive-focused)]"
             onClick={() => {
               router.push('/sectors');
             }}
diff --git a/app/[locale]/(user)/components/UseCases.tsx b/app/[locale]/(user)/components/UseCases.tsx
index ba3b262e..fb8aa8a0 100644
--- a/app/[locale]/(user)/components/UseCases.tsx
+++ b/app/[locale]/(user)/components/UseCases.tsx
@@ -107,7 +107,7 @@ const UseCasesListingPage = () => {
         <div>
           <Button
             kind="tertiary"
-            className="shadow-none border-none bg-transparent px-0 text-primaryText hover:underline"
+            className="shadow-none border-none bg-transparent px-0 text-primaryText hover:underline outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-interactive-focused)]"
             onClick={() => {
               router.push('/usecases');
             }}
diff --git a/app/[locale]/(user)/datasets/page.tsx b/app/[locale]/(user)/datasets/page.tsx
index acfb0125..64e718df 100644
--- a/app/[locale]/(user)/datasets/page.tsx
+++ b/app/[locale]/(user)/datasets/page.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from 'opub-ui';
 
 import { generateJsonLd, generatePageMetadata } from '@/lib/utils';
 import JsonLd from '@/components/JsonLd';
@@ -52,6 +53,9 @@ const DatasetsListing = () => {
   return (
     <>
       <JsonLd json={jsonLd} />
+      <Text as="h1" visuallyHidden>
+        Datasets
+      </Text>
       <ListingComponent
         type="dataset"
         breadcrumbData={breadcrumbData}
diff --git a/app/[locale]/(user)/page.module.scss b/app/[locale]/(user)/page.module.scss
index 2bd2ee48..a5ca6beb 100644
--- a/app/[locale]/(user)/page.module.scss
+++ b/app/[locale]/(user)/page.module.scss
@@ -17,4 +17,9 @@
     background-color: #EBF9FC;  /* same as surface-stats */
     border-radius: 8px;
   }
+  input:focus-visible,
+  button:focus-visible {
+    outline: 2px solid var(--border-interactive-focused);
+    outline-offset: 2px;
+  }
 }
diff --git a/app/[locale]/(user)/publishers/PublishersListingClient.tsx b/app/[locale]/(user)/publishers/PublishersListingClient.tsx
index 55d7e030..22fb6cdc 100644
--- a/app/[locale]/(user)/publishers/PublishersListingClient.tsx
+++ b/app/[locale]/(user)/publishers/PublishersListingClient.tsx
@@ -81,7 +81,7 @@ const PublishersListingPage = () => {
   return (
     <>
       <JsonLd json={jsonLd} />
-      <main>
+      <div>
         <BreadCrumbs
           data={[
             { href: '/', label: 'Home' },
@@ -96,6 +96,7 @@ const PublishersListingPage = () => {
                   <div className="flex flex-col gap-5 ">
                     <Text
                       variant="heading2xl"
+                      as="h1"
                       fontWeight="bold"
                       color="onBgDefault"
                     >
@@ -179,7 +180,7 @@ const PublishersListingPage = () => {
             </div>
           </>
         </>
-      </main>
+      </div>
     </>
   );
 };
diff --git a/app/[locale]/(user)/sectors/SectorsListing.tsx b/app/[locale]/(user)/sectors/SectorsListing.tsx
index ca76c7e4..bffdb782 100644
--- a/app/[locale]/(user)/sectors/SectorsListing.tsx
+++ b/app/[locale]/(user)/sectors/SectorsListing.tsx
@@ -68,7 +68,7 @@ const SectorsListing = () => {
   });
 
   return (
-    <main>
+    <div>
       <JsonLd json={jsonLd} />
       <BreadCrumbs
         data={[
@@ -84,6 +84,7 @@ const SectorsListing = () => {
                 <div className="flex flex-col gap-5 ">
                   <Text
                     variant="heading2xl"
+                    as="h1"
                     fontWeight="bold"
                     color="onBgDefault"
                   >
@@ -136,7 +137,7 @@ const SectorsListing = () => {
                 <div className="mt-6 flex w-full flex-col justify-center gap-6">
                   <div className="flex flex-wrap gap-6 lg:flex-nowrap">
                     <SearchInput
-                      label={''}
+                      label="Search"
                       className={cn('w-full', Styles.Search)}
                       onSubmit={(e) => {
                         setSearchText(e);
@@ -155,8 +156,8 @@ const SectorsListing = () => {
                         Sort :
                       </Text>
                       <Select
-                        label=""
-                        labelInline
+                        label="Sort"
+                        labelHidden
                         name="sort-select"
                         options={[
                           {
@@ -213,7 +214,7 @@ const SectorsListing = () => {
           </div>
         </>
       </>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/[locale]/(user)/usecases/UseCasesListingClient.tsx b/app/[locale]/(user)/usecases/UseCasesListingClient.tsx
index e48d6548..a46291be 100644
--- a/app/[locale]/(user)/usecases/UseCasesListingClient.tsx
+++ b/app/[locale]/(user)/usecases/UseCasesListingClient.tsx
@@ -13,12 +13,12 @@ const breadcrumbData = [
 
 const UseCasesListingClient = () => {
   return (
-    <main>
+    <div>
       <BreadCrumbs data={breadcrumbData} />
       <div className="bg-primaryBlue">
         <div className="container flex flex-col-reverse justify-center gap-8 p-10 lg:flex-row">
           <div className="flex flex-col justify-center gap-6">
-            <Text variant="heading2xl" className="text-surfaceDefault">
+            <Text variant="heading2xl" as="h1" className="text-surfaceDefault">
               Use Cases
             </Text>
             <Text
@@ -54,7 +54,7 @@ const UseCasesListingClient = () => {
           redirectionURL={`/usecases`}
         />
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/[locale]/dashboard/components/main-footer.tsx b/app/[locale]/dashboard/components/main-footer.tsx
index 71d31511..271cac71 100644
--- a/app/[locale]/dashboard/components/main-footer.tsx
+++ b/app/[locale]/dashboard/components/main-footer.tsx
@@ -52,18 +52,22 @@ const MainFooter = () => {
     {
       icon: Icons.github,
       link: 'https://github.com/civicdatalab',
+      label: 'CivicDataLab on GitHub',
     },
     {
       icon: Icons.linkedin,
       link: 'https://www.linkedin.com/company/civicdatalab',
+      label: 'CivicDataLab on LinkedIn',
     },
     {
       icon: Icons.twitter,
       link: 'https://twitter.com/civicdatalab',
+      label: 'CivicDataLab on Twitter',
     },
     {
       icon: Icons.facebook,
       link: 'https://facebook.com/civicdatalab',
+      label: 'CivicDataLab on Facebook',
     },
   ];
   return (
@@ -86,6 +90,7 @@ const MainFooter = () => {
               key={index}
               href={item.link}
               target="_blank"
+              aria-label={item.label}
               className="h-8 w-8 rounded-5 bg-tertiaryAccent p-1.5"
             >
               <Icon
@@ -102,6 +107,7 @@ const MainFooter = () => {
               key={index}
               href={item.link}
               target="_blank"
+              aria-label={item.label}
               className="h-8 w-8 lg:h-10 lg:w-10 rounded-5 bg-tertiaryAccent p-1.5 lg:p-2"
             >
               <Icon
diff --git a/app/[locale]/dashboard/components/main-nav.tsx b/app/[locale]/dashboard/components/main-nav.tsx
index 64504c96..89844385 100644
--- a/app/[locale]/dashboard/components/main-nav.tsx
+++ b/app/[locale]/dashboard/components/main-nav.tsx
@@ -205,9 +205,9 @@ export function MainNav({ hideSearch = false }: MainNavProps) {
                   <div className="p-3">
                     <SearchInput
                       onSubmit={handleSearch}
-                      label={''}
+                      label="Search"
                       placeholder="Search for any data"
-                      name={''}
+                      name="search"
                     />
                   </div>
                 </Dialog.Content>
@@ -266,7 +266,7 @@ export function MainNav({ hideSearch = false }: MainNavProps) {
                 <Link href={item.href}>
                   <Text
                     variant="headingMd"
-                    as="h1"
+                    as="span"
                     className={`uppercase ${
                       pathname === item.href
                         ? 'text-[#84DCCF]'
@@ -309,20 +309,20 @@ export const ProfileContent = ({ session }: { session: Session }) => {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <Popover.Trigger>
-        {session.user.image ? (
-          <IconButton icon={session.user.image} size="slim">
-            {session.user.name}
-          </IconButton>
-        ) : (
-          <div
-            style={
-              {
-                '--border-highlight-subdued': 'var(--accent-tertiary-color)',
-              } as React.CSSProperties
-            }
-          >
+    <div
+      style={
+        {
+          '--border-highlight-subdued': 'var(--accent-tertiary-color)',
+        } as React.CSSProperties
+      }
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <Popover.Trigger>
+          {session.user.image ? (
+            <IconButton icon={session.user.image} size="slim">
+              {session.user.name}
+            </IconButton>
+          ) : (
             <Button
               kind="tertiary"
               size="slim"
@@ -334,55 +334,55 @@ export const ProfileContent = ({ session }: { session: Session }) => {
                 size="small"
               />
             </Button>
-          </div>
-        )}
-      </Popover.Trigger>
-      <Popover.Content align="end">
-        <div className="rounded-3 py-2 shadow-basicDeep">
-          <div className="flex flex-col px-5 py-2">
-            <Text variant="bodyMd" fontWeight="medium">
-              {session.user.name}
-            </Text>
-            <Text variant="bodyMd">{session.user.email}</Text>
-          </div>
-          <div className="flex w-full flex-col">
-            {profileLinks.map((link) => (
-              <Text variant="bodyMd" key={link.href}>
-                <Link
-                  onClick={() => setOpen(false)}
-                  href={link.href}
-                  className="block w-full px-5 py-2 text-textSubdued transition-colors duration-100 ease-ease hover:bg-actionSecondaryNeutralHovered hover:text-textDefault"
-                >
-                  {link.label}
-                </Link>
+          )}
+        </Popover.Trigger>
+        <Popover.Content align="end">
+          <div className="rounded-3 py-2 shadow-basicDeep">
+            <div className="flex flex-col px-5 py-2">
+              <Text variant="bodyMd" fontWeight="medium">
+                {session.user.name}
               </Text>
-            ))}
-          </div>
-          <Divider className="mx-3 my-3 w-auto" />
-          <div className="px-3">
-            <Button
-              onClick={async () => {
-                setOpen(false);
-                const response = await fetch(`/api/auth/logout`, {
-                  method: 'GET',
-                });
-                const data = await response.json();
+              <Text variant="bodyMd">{session.user.email}</Text>
+            </div>
+            <div className="flex w-full flex-col">
+              {profileLinks.map((link) => (
+                <Text variant="bodyMd" key={link.href}>
+                  <Link
+                    onClick={() => setOpen(false)}
+                    href={link.href}
+                    className="block w-full px-5 py-2 text-textSubdued transition-colors duration-100 ease-ease hover:bg-actionSecondaryNeutralHovered hover:text-textDefault"
+                  >
+                    {link.label}
+                  </Link>
+                </Text>
+              ))}
+            </div>
+            <Divider className="mx-3 my-3 w-auto" />
+            <div className="px-3">
+              <Button
+                onClick={async () => {
+                  setOpen(false);
+                  const response = await fetch(`/api/auth/logout`, {
+                    method: 'GET',
+                  });
+                  const data = await response.json();
 
-                await signOut({ redirect: false });
+                  await signOut({ redirect: false });
 
-                if (data.url) {
-                  window.location.href = data.url;
-                }
-              }}
-              kind="secondary"
-              size="slim"
-              fullWidth
-            >
-              Log Out
-            </Button>
+                  if (data.url) {
+                    window.location.href = data.url;
+                  }
+                }}
+                kind="secondary"
+                size="slim"
+                fullWidth
+              >
+                Log Out
+              </Button>
+            </div>
           </div>
-        </div>
-      </Popover.Content>
-    </Popover>
+        </Popover.Content>
+      </Popover>
+    </div>
   );
 };
diff --git a/app/[locale]/dashboard/components/sidebar.tsx b/app/[locale]/dashboard/components/sidebar.tsx
index cb48a2bb..badb395c 100644
--- a/app/[locale]/dashboard/components/sidebar.tsx
+++ b/app/[locale]/dashboard/components/sidebar.tsx
@@ -35,7 +35,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               {data.map((item, index) => (
                 <div key={index} className="mb-1 px-1 py-2 ">
                   <Link href={item.href} onClick={() => setOpen(false)}>
-                    <Text variant="headingSm" as="h1" color={'highlight'}>
+                    <Text variant="headingSm" as="span" color={'highlight'}>
                       {item.title}
                     </Text>
                   </Link>
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index f4a7d39b..c4dbb4d1 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -3,7 +3,9 @@ import { setRequestLocale } from 'next-intl/server';
 import { Inter as FontSans } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import React from 'react';
+import type { Metadata } from 'next';
 
+import { siteConfig } from '@/config/site';
 import GoogleAnalytics from '@/components/GoogleAnalytics';
 import Provider from '@/components/provider';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
@@ -11,6 +13,11 @@ import locales from '../../config/locales';
 
 const fontSans = FontSans({ subsets: ['latin'], display: 'swap' });
 
+export const metadata: Metadata = {
+  title: siteConfig.name,
+  description: siteConfig.description,
+};
+
 export function generateStaticParams() {
   return locales.all.map((locale) => ({ locale }));
 }
diff --git a/components/provider.tsx b/components/provider.tsx
index 9b1b46f3..da65d082 100644
--- a/components/provider.tsx
+++ b/components/provider.tsx
@@ -3,14 +3,47 @@
 import React from 'react';
 import { TourProvider } from '@/contexts/TourContext';
 import { ErrorBoundary } from '@sentry/nextjs';
+import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import HolyLoader from 'holy-loader';
 import { SessionProvider } from 'next-auth/react';
-import { Toaster, Tooltip } from 'opub-ui';
+import { Toaster } from 'opub-ui';
 
 import { RouterEvents } from '@/lib/navigation';
 import SessionGuard from './SessionGuard';
 
+/**
+ * The top loading bar comes from holy-loader, not our code.
+ * It adds a node with an invalid role="bar", then deletes and recreates
+ * it on every page change. Screen readers should ignore it (it is only
+ * visual). aria-hidden on the wrapper hides the whole bar from them.
+ * Delete this wrapper if holy-loader stops using role="bar":
+ * https://github.com/tomcru/holy-loader
+ */
+function HolyLoaderWithValidAria() {
+  React.useEffect(() => {
+    // Hide the bar if it is already on the page.
+    document.getElementById('holy-progress')?.setAttribute('aria-hidden', 'true');
+
+    // Hide it again whenever holy-loader inserts a new one.
+    const observer = new MutationObserver((mutations) => {
+      for (const { addedNodes } of mutations) {
+        for (const node of addedNodes) {
+          if (node instanceof HTMLElement && node.id === 'holy-progress') {
+            node.setAttribute('aria-hidden', 'true');
+          }
+        }
+      }
+    });
+
+    // Only watch new children of body — that is where the bar is added.
+    observer.observe(document.body, { childList: true });
+    return () => observer.disconnect();
+  }, []);
+
+  return <HolyLoader color="var(--action-primary-success-default)" />;
+}
+
 export default function Provider({ children }: { children: React.ReactNode }) {
   const [client] = React.useState(
     new QueryClient({
@@ -52,11 +85,11 @@ export default function Provider({ children }: { children: React.ReactNode }) {
           <QueryClientProvider client={client}>
             <TourProvider>
               <RouterEvents />
-              <HolyLoader color="var(--action-primary-success-default)" />
-              <Tooltip.Provider>
+              <HolyLoaderWithValidAria />
+              <TooltipProvider skipDelayDuration={200}>
                 {children}
                 <Toaster />
-              </Tooltip.Provider>
+              </TooltipProvider>
               {/* For now, tour guide is disabled as it is not working as expected */}
               {/* <TourGuide /> */}
             </TourProvider>
diff --git a/styles/globals.css b/styles/globals.css
index 12c43475..8b7b38bc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,6 +5,13 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Keep <h1> on the Text variant size; Tailwind preflight is off. */
+h1 {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
 /* Bhashini v3 paints the language icon/button white; the navbar is primary blue. */
 .bhashini-plugin-container .bhashini-dropdown-btn {
   color: #fff;