fix(ObjectPageTitle): correct screen reader reading order (#8753)

Fixes #8752

Author: Lukas742

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);

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;

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}