From c1c0e1490a25693f26852d74c56071d46e88d363 Mon Sep 17 00:00:00 2001
From: Radek Napora <78928539+radeknapora@users.noreply.github.com>
Date: Tue, 28 Oct 2025 13:11:50 +0100
Subject: [PATCH] fix(dashboard) Standardize heading levels for consistent
 hierarchy (#13861)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

**What** — What changes are introduced in this PR?

This PR standardizes heading levels across dashboard components to maintain proper semantic HTML hierarchy.

**Why** — Why are these changes relevant or necessary?

*Please provide answer here*

**How** — How have these changes been implemented?

- Added optional `headingLevel` prop `"h1" | "h2" | "h3"` to `DataTable` component with default value of `"h1"`

- Modified `Heading` component usage to explicitly specify the appropriate level based on context

**Testing** — How have these changes been tested, or how can the reviewer test the feature?

*Please provide answer here*

---

## Checklist

Please ensure the following before requesting a review:

- [x] I have added a **changeset** for this PR
    - Every non-breaking change should be marked as a **patch**
    - To add a changeset, run `yarn changeset` and follow the prompts
- [ ] The changes are covered by relevant **tests**
- [x] I have verified the code works as intended locally
- [ ] I have linked the related issue(s) if applicable
---
 .changeset/hungry-buses-fry.md                        |  5 +++++
 .../src/components/data-table/data-table.tsx          |  4 +++-
 .../api-key-sales-channel-section.tsx                 |  1 +
 .../api-key-management-list-table.tsx                 |  2 +-
 .../components/campaign-budget/campaign-budget.tsx    | 11 +++--------
 .../components/campaign-spend/campaign-spend.tsx      |  2 +-
 .../campaign-list/components/campaign-list-table.tsx  |  2 +-
 .../components/inventory-item-location-levels.tsx     |  2 +-
 .../components/inventory-item-reservations.tsx        |  2 +-
 .../price-list-product-section.tsx                    |  2 +-
 .../product-variant-section.tsx                       |  1 +
 .../product-list-table/product-list-table.tsx         |  2 +-
 .../promotion-conditions-section.tsx                  |  2 +-
 .../promotion-list-table/promotion-list-table.tsx     |  2 +-
 14 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/hungry-buses-fry.md

diff --git a/.changeset/hungry-buses-fry.md b/.changeset/hungry-buses-fry.md
new file mode 100644
index 0000000000..1b3d2ca3f2
--- /dev/null
+++ b/.changeset/hungry-buses-fry.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard) standardize heading levels for consistent hierarchy
diff --git a/packages/admin/dashboard/src/components/data-table/data-table.tsx b/packages/admin/dashboard/src/components/data-table/data-table.tsx
index 770baef32d..9c09fd0748 100644
--- a/packages/admin/dashboard/src/components/data-table/data-table.tsx
+++ b/packages/admin/dashboard/src/components/data-table/data-table.tsx
@@ -77,6 +77,7 @@ interface DataTableProps<TData> {
   rowHref?: (row: TData) => string
   emptyState?: DataTableEmptyStateProps
   heading?: string
+  headingLevel?: "h1" | "h2" | "h3"
   subHeading?: string
   prefix?: string
   pageSize?: number
@@ -117,6 +118,7 @@ export const DataTable = <TData,>({
   enableFilterMenu,
   rowHref,
   heading,
+  headingLevel = "h1",
   subHeading,
   prefix,
   pageSize = 10,
@@ -384,7 +386,7 @@ export const DataTable = <TData,>({
           <div className="flex items-center gap-x-4">
             {shouldRenderHeading && (
               <div>
-                {heading && <Heading>{heading}</Heading>}
+                {heading && <Heading level={headingLevel}>{heading}</Heading>}
                 {subHeading && (
                   <Text size="small" className="text-ui-fg-subtle">
                     {subHeading}
diff --git a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
index 2d064fad15..4105b46b61 100644
--- a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
+++ b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
@@ -56,6 +56,7 @@ export const ApiKeySalesChannelSection = ({
         filters={filters}
         commands={commands}
         heading={t("salesChannels.domain")}
+        headingLevel="h2"
         getRowId={(row) => row.id}
         rowCount={count}
         isLoading={isPending}
diff --git a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
index 7f857424b1..e95ea2ce14 100644
--- a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
+++ b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
@@ -53,7 +53,7 @@ export const ApiKeyManagementListTable = ({
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
         <div>
-          <Heading level="h2">
+          <Heading level="h1">
             {keyType === "publishable"
               ? t(`apiKeyManagement.domain.publishable`)
               : t("apiKeyManagement.domain.secret")}
diff --git a/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx b/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx
index 39d763ac60..8827f97a61 100644
--- a/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx
+++ b/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx
@@ -30,19 +30,14 @@ export const CampaignBudget = ({ campaign }: CampaignBudgetProps) => {
   return (
     <Container className="flex flex-col gap-y-4 px-6 py-4">
       <div className="flex justify-between">
-        <div className="flex-grow">
-          <div className="bg-ui-bg-base shadow-borders-base float-start flex size-7 items-center justify-center rounded-md">
+        <div className="mb-2 grid flex-grow grid-cols-[28px_1fr] items-center gap-x-3">
+          <div className="bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md">
             <div className="bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]">
               <ChartPie className="text-ui-fg-subtle" />
             </div>
           </div>
 
-          <Heading
-            className="text-ui-fg-subtle ms-10 mt-[1.5px] font-normal"
-            level="h3"
-          >
-            {getTranslation()}
-          </Heading>
+          <Heading level="h2">{getTranslation()}</Heading>
         </div>
 
         <ActionMenu
diff --git a/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx b/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx
index 191633a125..7d40c738c3 100644
--- a/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx
+++ b/packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx
@@ -19,7 +19,7 @@ export const CampaignSpend = ({ campaign }: CampaignSpendProps) => {
           </div>
         </div>
 
-        <Heading level="h3" className="text-ui-fg-subtle font-normal">
+        <Heading level="h2">
           {campaign.budget?.type === "use_by_attribute"
             ? t("campaigns.fields.totalUsedByAttribute")
             : campaign.budget?.type === "spend"
diff --git a/packages/admin/dashboard/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx b/packages/admin/dashboard/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx
index 7137dfd348..5df5530f85 100644
--- a/packages/admin/dashboard/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx
+++ b/packages/admin/dashboard/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx
@@ -50,7 +50,7 @@ export const CampaignListTable = () => {
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("campaigns.domain")}</Heading>
+        <Heading level="h1">{t("campaigns.domain")}</Heading>
         <Link to="/campaigns/create">
           <Button size="small" variant="secondary">
             {t("actions.create")}
diff --git a/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx b/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx
index 8904d645bb..a08942f632 100644
--- a/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx
+++ b/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx
@@ -15,7 +15,7 @@ export const InventoryItemLocationLevelsSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("inventory.locationLevels")}</Heading>
+        <Heading level="h2">{t("inventory.locationLevels")}</Heading>
         <Button size="small" variant="secondary" asChild>
           <Link to="locations">{t("inventory.manageLocations")}</Link>
         </Button>
diff --git a/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx b/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
index 293fb7e444..935ccbda5a 100644
--- a/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
+++ b/packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
@@ -15,7 +15,7 @@ export const InventoryItemReservationsSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("reservations.domain")}</Heading>
+        <Heading level="h2">{t("reservations.domain")}</Heading>
         <Button size="small" variant="secondary" asChild>
           <Link to={`/reservations/create?item_id=${inventoryItem.id}`}>
             {t("actions.create")}
diff --git a/packages/admin/dashboard/src/routes/price-lists/price-list-detail/components/price-list-product-section/price-list-product-section.tsx b/packages/admin/dashboard/src/routes/price-lists/price-list-detail/components/price-list-product-section/price-list-product-section.tsx
index 49e4ae5b3a..2c5f1d5912 100644
--- a/packages/admin/dashboard/src/routes/price-lists/price-list-detail/components/price-list-product-section/price-list-product-section.tsx
+++ b/packages/admin/dashboard/src/routes/price-lists/price-list-detail/components/price-list-product-section/price-list-product-section.tsx
@@ -113,7 +113,7 @@ export const PriceListProductSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("priceLists.products.header")}</Heading>
+        <Heading level="h2">{t("priceLists.products.header")}</Heading>
         <ActionMenu
           groups={[
             {
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx b/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
index 670b0420d9..0732b9628c 100644
--- a/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
@@ -103,6 +103,7 @@ export const ProductVariantSection = ({
         pageSize={PAGE_SIZE}
         isLoading={isPending}
         heading={t("products.variants.header")}
+        headingLevel="h2"
         emptyState={{
           empty: {
             heading: t("products.variants.empty.heading"),
diff --git a/packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx b/packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
index dfdc9e9452..5c906dadc3 100644
--- a/packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
@@ -68,7 +68,7 @@ export const ProductListTable = () => {
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("products.domain")}</Heading>
+        <Heading level="h1">{t("products.domain")}</Heading>
         <div className="flex items-center justify-center gap-x-2">
           <Button size="small" variant="secondary" asChild>
             <Link to={`export${location.search}`}>{t("actions.export")}</Link>
diff --git a/packages/admin/dashboard/src/routes/promotions/promotion-detail/components/promotion-conditions-section/promotion-conditions-section.tsx b/packages/admin/dashboard/src/routes/promotions/promotion-detail/components/promotion-conditions-section/promotion-conditions-section.tsx
index a994ffebf5..cca4bbfe09 100644
--- a/packages/admin/dashboard/src/routes/promotions/promotion-detail/components/promotion-conditions-section/promotion-conditions-section.tsx
+++ b/packages/admin/dashboard/src/routes/promotions/promotion-detail/components/promotion-conditions-section/promotion-conditions-section.tsx
@@ -58,7 +58,7 @@ export const PromotionConditionsSection = ({
     <Container className="p-0">
       <div className="flex items-center justify-between px-6 py-4">
         <div className="flex flex-col">
-          <Heading>
+          <Heading level="h2">
             {t(
               ruleType === "target-rules"
                 ? `promotions.fields.conditions.${ruleType}.${applicationMethodTargetType}.title`
diff --git a/packages/admin/dashboard/src/routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx b/packages/admin/dashboard/src/routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx
index f731913244..a8a1ec83bd 100644
--- a/packages/admin/dashboard/src/routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx
+++ b/packages/admin/dashboard/src/routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx
@@ -55,7 +55,7 @@ export const PromotionListTable = () => {
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("promotions.domain")}</Heading>
+        <Heading level="h1">{t("promotions.domain")}</Heading>
 
         <Button size="small" variant="secondary" asChild>
           <Link to="create">{t("actions.create")}</Link>