CivicDataLab · UdayRajSahai2 · Sep 17, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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