semantic tags

apps/studio/components/layouts/PageLayout/PageHeader.tsx

@@ -44,7 +44,7 @@ export const PageHeader = ({
   const displayBreadcrumbs = isCompact && title ? [...breadcrumbs, { label: title }] : breadcrumbs
 
   return (
-    <div className={cn('space-y-4', className)}>
+    <header className={cn('space-y-4', className)}>
       {(displayBreadcrumbs.length > 0 ||
         (isCompact && (title || primaryActions || secondaryActions))) && (
         <div className={cn('flex items-center gap-4', isCompact ? 'justify-between' : 'mb-4')}>
@@ -126,6 +126,6 @@ export const PageHeader = ({
           </div>
         </div>
       )}
-    </div>
+    </header>
   )
 }

packages/ui-patterns/src/PageSection/index.tsx

@@ -38,14 +38,14 @@ const PageSectionRoot = ({
   ...props
 }: PageSectionRootProps) => {
   return (
-    <div
+    <section
       data-slot="page-section"
       data-orientation={orientation}
       className={cn(pageSectionRootVariants({ orientation }), className)}
       {...props}
     >
       {children}
-    </div>
+    </section>
   )
 }