From bcad9af6deb10af45a35632dddacee219acdb482 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 1 Jul 2024 13:38:00 +0200
Subject: [PATCH] fix(ObjectPage): always show focused element when Tabbing in
 content

---
 .../ObjectPage/ObjectPage.module.css          |  5 +++++
 .../main/src/components/ObjectPage/index.tsx  | 22 +++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css
index 37bffec20cd..2dc7313de94 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.module.css
+++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css
@@ -28,6 +28,11 @@
   }
 }
 
+.objectPage:has([data-component-name='ObjectPageFooter']) {
+  /* bar height + padding */
+  scroll-padding-block-end: calc(var(--_ui5_bar_base_height) + 1.5rem);
+}
+
 .iconTabBarMode section[data-component-name='ObjectPageSection'] > div[role='heading'] {
   display: none;
 }
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index ff9fec55e72..9e48ad97822 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -17,6 +17,7 @@ import { ObjectPageMode } from '../../enums/index.js';
 import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
 import { safeGetChildrenArray } from '../../internal/safeGetChildrenArray.js';
 import { useObserveHeights } from '../../internal/useObserveHeights.js';
+import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
 import type { CommonProps, Ui5CustomEvent } from '../../types/index.js';
 import type { AvatarPropTypes, TabContainerDomRef } from '../../webComponents/index.js';
 import { Tab, TabContainer } from '../../webComponents/index.js';
@@ -807,8 +808,17 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
     [classNames.headerHoverStyles]
   );
 
+  const getStickyHeaderHeight = useCallback(
+    (collapsedPadding = topHeaderHeight) =>
+      headerPinned || scrolledHeaderExpanded
+        ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
+        : `${collapsedPadding}px`,
+    [topHeaderHeight, headerCollapsed, headerContentHeight]
+  );
+
   const objectPageStyles: CSSProperties = {
-    ...style
+    ...style,
+    scrollPaddingBlockStart: `calc(${getStickyHeaderHeight()} + var(${cssVarVersionInfoPrefix}tc_header_height_text_only)`
   };
   if (headerCollapsed === true && (headerContent || titleInHeader)) {
     objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;
@@ -858,10 +868,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
           ref={anchorBarRef}
           className={classNames.anchorBar}
           style={{
-            top:
-              scrolledHeaderExpanded || headerPinned
-                ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
-                : `${topHeaderHeight + 5}px`
+            top: getStickyHeaderHeight(topHeaderHeight + 5)
           }}
         >
           <ObjectPageAnchorBar
@@ -883,10 +890,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
           className={classNames.tabContainer}
           data-component-name="ObjectPageTabContainer"
           style={{
-            top:
-              headerPinned || scrolledHeaderExpanded
-                ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
-                : `${topHeaderHeight}px`
+            top: getStickyHeaderHeight()
           }}
         >
           <TabContainer