From e1c8b41a6cbc0efeaaee381729e9c9a0cc9def5e Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 2 Jul 2026 10:40:19 +0200
Subject: [PATCH 1/2] fix(ObjectPageTitle): correct screen reader reading order

---
 .../ObjectPageTitle.module.css                |  5 +++
 .../src/components/ObjectPageTitle/index.tsx  | 38 +++++++++----------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css b/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css
index 077b9693539..18ba780d886 100644
--- a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css
+++ b/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css
@@ -35,6 +35,11 @@
   }
 }
 
+.titleAndSubHeader {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .titleMainSection {
   overflow-x: hidden;
   flex: 1 1 auto;
diff --git a/packages/main/src/components/ObjectPageTitle/index.tsx b/packages/main/src/components/ObjectPageTitle/index.tsx
index bded325043e..2b7ebfc3cb5 100644
--- a/packages/main/src/components/ObjectPageTitle/index.tsx
+++ b/packages/main/src/components/ObjectPageTitle/index.tsx
@@ -158,15 +158,25 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
             className={classNames.middleSection}
             data-component-name="ObjectPageTitleMiddleSection"
           >
-            <FlexBox className={classNames.titleMainSection} onClick={onHeaderClick}>
-              {_header && (
-                <div className={classNames.title} data-component-name="ObjectPageTitleHeader">
-                  {_header}
-                </div>
-              )}
-              {children && (
-                <div className={classNames.content} data-component-name="ObjectPageTitleContent">
-                  {children}
+            <FlexBox direction={FlexBoxDirection.Column} className={classNames.titleAndSubHeader}>
+              <FlexBox className={classNames.titleMainSection} onClick={onHeaderClick}>
+                {_header && (
+                  <div className={classNames.title} data-component-name="ObjectPageTitleHeader">
+                    {_header}
+                  </div>
+                )}
+                {children && (
+                  <div className={classNames.content} data-component-name="ObjectPageTitleContent">
+                    {children}
+                  </div>
+                )}
+              </FlexBox>
+              {_subHeader && (
+                <div
+                  className={clsx(classNames.subTitle, classNames.subTitleBottom)}
+                  data-component-name="ObjectPageTitleSubHeader"
+                >
+                  {_subHeader}
                 </div>
               )}
             </FlexBox>
@@ -184,16 +194,6 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
               </div>
             )}
           </FlexBox>
-          {_subHeader && (
-            <FlexBox id="sub">
-              <div
-                className={clsx(classNames.subTitle, classNames.subTitleBottom)}
-                data-component-name="ObjectPageTitleSubHeader"
-              >
-                {_subHeader}
-              </div>
-            </FlexBox>
-          )}
         </FlexBox>
       </FlexBox>
       {props?.['data-header-content-visible'] ? expandedContent : snappedContent}

From 40d09f2b16686348ba18c47f2b4c0af2bd89a6a7 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 3 Jul 2026 10:48:39 +0200
Subject: [PATCH 2/2] adjust tests

---
 .../components/ObjectPage/ObjectPage.cy.tsx    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index ead0f5d8839..557fcaedb33 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -746,19 +746,19 @@ describe('ObjectPage', () => {
     cy.get('[data-component-name="ObjectPageTabContainer"]').should('not.exist');
 
     cy.findByText('Update Heights').click();
-    cy.findByText('{"offset":1080,"scroll":2280}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
 
     cy.findByTestId('op').scrollTo('bottom');
     cy.findByText('Update Heights').click({ force: true });
-    cy.findByText('{"offset":1080,"scroll":2280}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
 
     cy.mount(<TestSingleSectionComp height="2000px" withFooter mode={ObjectPageMode.Default} />);
     cy.findByText('Update Heights').click();
-    cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
 
     cy.findByTestId('op').scrollTo('bottom');
     cy.findByText('Update Heights').click({ force: true });
-    cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
 
     cy.mount(<TestSingleSectionComp height="400px" mode={ObjectPageMode.Default} />);
     cy.findByText('Update Heights').click();
@@ -812,19 +812,19 @@ describe('ObjectPage', () => {
     cy.get('[data-component-name="ObjectPageTabContainer"]').should('not.exist');
 
     cy.findByText('Update Heights').click();
-    cy.findByText('{"offset":1080,"scroll":2250}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2230}').should('exist');
 
     cy.findByTestId('op').scrollTo('bottom');
     cy.findByText('Update Heights').click({ force: true });
-    cy.findByText('{"offset":1080,"scroll":2250}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2230}').should('exist');
 
     cy.mount(<TestSingleSectionComp height="2000px" withFooter mode={ObjectPageMode.IconTabBar} />);
     cy.findByText('Update Heights').click();
-    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
 
     cy.findByTestId('op').scrollTo('bottom');
     cy.findByText('Update Heights').click({ force: true });
-    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
 
     cy.mount(<TestSingleSectionComp height="400px" mode={ObjectPageMode.IconTabBar} />);
     cy.findByText('Update Heights').click();
@@ -850,7 +850,7 @@ describe('ObjectPage', () => {
     cy.findByText('Update Heights').click({ force: true });
     cy.findByText('{"offset":1080,"scroll":1080}').should('exist');
 
-    cy.mount(<TestSingleSectionComp height="925px" mode={ObjectPageMode.IconTabBar} />);
+    cy.mount(<TestSingleSectionComp height="950px" mode={ObjectPageMode.IconTabBar} />);
     cy.findByText('https://github.com/UI5/webcomponents-react').should('be.visible');
 
     cy.wait(50);