Unify Header landmark structure

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Header/Header.module.css

@@ -17,24 +17,15 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
-  .bui-Header {
-    display: flex;
-    flex-direction: column;
-    padding-top: var(--bui-space-2);
-    width: 100%;
-    padding-inline: var(--bui-space-5);
-  }
-
   .bui-HeaderAfterSticky {
     display: flex;
     flex-direction: column;
     gap: var(--bui-space-3);
   }
 
-  .bui-HeaderBeforeSticky[data-sticky],
-  .bui-HeaderStickySentinel[data-sticky],
-  .bui-HeaderContent[data-sticky],
-  .bui-HeaderAfterSticky[data-sticky] {
+  .bui-HeaderBeforeSticky,
+  .bui-HeaderContent,
+  .bui-HeaderAfterSticky {
     width: 100%;
     padding-inline: var(--bui-space-5);
     box-sizing: border-box;
@@ -59,7 +50,8 @@
     flex-direction: row;
     justify-content: space-between;
     gap: var(--bui-space-3);
-    padding-block: var(--bui-space-3);
+    padding-top: var(--bui-space-2);
+    padding-bottom: var(--bui-space-3);
   }
 
   .bui-HeaderContent[data-sticky] {

packages/ui/src/components/Header/Header.tsx

@@ -180,12 +180,16 @@ export const Header = (props: HeaderProps) => {
   const titleAndActionsContent = (
     <>
       <div className={classes.titleStack}>
-        <div className={classes.breadcrumbs} aria-hidden={isStuck || undefined}>
+        <div
+          className={classes.breadcrumbs}
+          aria-hidden={isStuck || undefined}
+          inert={isStuck ? '' : undefined}
+        >
           {breadcrumbs &&
             breadcrumbs.map(breadcrumb => (
               <Fragment key={breadcrumb.label}>
                 <Link
-                  href={isStuck ? undefined : breadcrumb.href}
+                  href={breadcrumb.href}
                   color="secondary"
                   className={classes.breadcrumbLink}
                   standalone
@@ -205,12 +209,13 @@ export const Header = (props: HeaderProps) => {
           <div
             className={classes.breadcrumbsSmall}
             aria-hidden={!isStuck || undefined}
+            inert={isStuck ? undefined : ''}
           >
             {breadcrumbs &&
               breadcrumbs.map(breadcrumb => (
                 <Fragment key={breadcrumb.label}>
                   <Link
-                    href={isStuck ? breadcrumb.href : undefined}
+                    href={breadcrumb.href}
                     color="secondary"
                     className={classes.breadcrumbLinkSmall}
                     standalone
@@ -273,35 +278,27 @@ export const Header = (props: HeaderProps) => {
     </div>
   );
 
-  if (sticky) {
-    return (
-      <>
-        {beforeStickyContent}
+  return (
+    <>
+      {beforeStickyContent}
+      {sticky && (
         <div
           ref={stickySentinelRef}
           className={classes.stickySentinel}
           data-sticky=""
           aria-hidden="true"
         />
-        <header
-          className={classes.content}
-          data-sticky=""
-          data-stuck={isStuck || undefined}
-          {...dataAttributes}
-        >
-          {titleAndActionsContent}
-        </header>
-        {afterStickyContent}
-      </>
-    );
-  }
-
-  return (
-    <header className={classes.root} {...dataAttributes}>
-      {beforeStickyContent}
-      <div className={classes.content}>{titleAndActionsContent}</div>
+      )}
+      <header
+        className={classes.content}
+        data-sticky={sticky || undefined}
+        data-stuck={isStuck || undefined}
+        {...dataAttributes}
+      >
+        {titleAndActionsContent}
+      </header>
       {afterStickyContent}
-    </header>
+    </>
   );
 };