fix(ObjectPage): improve focus and scroll behavior (#7150)

Fixes #5783
Fixes #7155

Author: Lukas742

packages/main/src/components/ObjectPage/ObjectPage.cy.tsx

@@ -343,7 +343,12 @@ describe('ObjectPage', () => {
   it('scroll to sections - default mode', () => {
     document.body.style.margin = '0px';
     cy.mount(
-      <ObjectPage titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh', scrollBehavior: 'auto' }}>
+      <ObjectPage
+        data-testid="op"
+        titleArea={DPTitle}
+        headerArea={DPContent}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
+      >
         {OPContent}
       </ObjectPage>
     );
@@ -362,6 +367,16 @@ describe('ObjectPage', () => {
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
     cy.findByText('Test').should('be.visible');
 
+    // no scroll when focusing something in the header area
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
+    cy.findByText('Job Information').should('be.visible');
+    cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
+    cy.wait(100);
+    cy.realPress('ArrowLeft');
+    cy.get('@scrollTop').then((scrollTop) => {
+      cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
+    });
+
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
     cy.realPress('ArrowDown');
     cy.realPress('ArrowDown');
@@ -371,6 +386,7 @@ describe('ObjectPage', () => {
 
     cy.mount(
       <ObjectPage
+        data-testid
         titleArea={DPTitle}
         headerArea={DPContent}
         footerArea={Footer}
@@ -394,9 +410,10 @@ describe('ObjectPage', () => {
 
     cy.wait(200);
     //fallback click
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click();
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
     cy.findByTestId('footer').should('be.visible');
     cy.findByText('Employment').should('be.visible');
+    cy.findByText('Job Information').should('be.visible');
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
     cy.findByText('Test').should('be.visible');
@@ -413,12 +430,90 @@ describe('ObjectPage', () => {
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.findByTestId('footer').should('be.visible');
+
+    cy.mount(
+      <ObjectPage
+        data-testid
+        titleArea={DPTitle}
+        headerArea={DPContent}
+        footerArea={Footer}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
+      >
+        {OPContent}
+        <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
+          <ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
+            <FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
+              <span>Start SubSection1</span>
+              <span>End SubSection1</span>
+            </FlexBox>
+          </ObjectPageSubSection>
+          <ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
+            <FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
+              <span>Start SubSection2</span>
+              <span>End SubSection2</span>
+            </FlexBox>
+          </ObjectPageSubSection>
+        </ObjectPageSection>
+      </ObjectPage>
+    );
+    cy.wait(100);
+
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
+    cy.realPress('ArrowDown');
+    cy.get('[ui5-responsive-popover]').should('be.visible');
+    cy.realPress('ArrowDown');
+    cy.wait(50);
+    cy.realPress('ArrowDown');
+    cy.realPress('Enter');
+    // wait for scroll
+    cy.wait(200);
+    cy.findByText('Start SubSection2').should('be.visible');
   });
 
   it('scroll to sections - tab mode', () => {
     document.body.style.margin = '0px';
+
     cy.mount(
       <ObjectPage
+        data-testid
+        titleArea={DPTitle}
+        headerArea={DPContent}
+        footerArea={Footer}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
+      >
+        {OPContent}
+        <ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
+          <ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
+            <FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
+              <span>Start SubSection1</span>
+              <span>End SubSection1</span>
+            </FlexBox>
+          </ObjectPageSubSection>
+          <ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
+            <FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
+              <span>Start SubSection2</span>
+              <span>End SubSection2</span>
+            </FlexBox>
+          </ObjectPageSubSection>
+        </ObjectPageSection>
+      </ObjectPage>
+    );
+    cy.wait(100);
+
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
+    cy.realPress('ArrowDown');
+    cy.get('[ui5-responsive-popover]').should('be.visible');
+    cy.realPress('ArrowDown');
+    cy.wait(50);
+    cy.realPress('ArrowDown');
+    cy.realPress('Enter');
+    // wait for scroll
+    cy.wait(200);
+    cy.findByText('Start SubSection2').should('be.visible');
+
+    cy.mount(
+      <ObjectPage
+        data-testid="op"
         titleArea={DPTitle}
         headerArea={DPContent}
         mode={ObjectPageMode.IconTabBar}
@@ -430,9 +525,16 @@ describe('ObjectPage', () => {
     cy.findByText('Job Information').should('not.exist');
     cy.findByTestId('section 1').should('be.visible');
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click();
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
     cy.findByText('Job Information').should('be.visible');
     cy.findByTestId('section 1').should('not.exist');
+    // no scroll when focusing something in the header area
+    cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
+    cy.wait(100);
+    cy.realPress('ArrowLeft');
+    cy.get('@scrollTop').then((scrollTop) => {
+      cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
+    });
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
     cy.findByText('section 2').should('not.exist');

packages/main/src/components/ObjectPage/ObjectPage.module.css

@@ -33,10 +33,6 @@
   }
 }
 
-.withFooter {
-  scroll-padding-block-end: calc(var(--_ui5wcr-BarHeight) + 0.5rem);
-}
-
 .iconTabBarMode section[data-component-name='ObjectPageSection'] > div[role='heading'] {
   display: none;
 }