fix(ObjectPage): announce first section heading with screen readers (#7186)

Fixes #7043

Author: Lukas742

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

@@ -355,7 +355,12 @@ describe('ObjectPage', () => {
 
     cy.wait(200);
 
-    cy.findByText('Goals').should('not.be.visible');
+    // first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
+    cy.findByText('Goals')
+      .parent()
+      .should('have.css', 'width', '1px')
+      .and('have.css', 'margin', '-1px')
+      .and('have.css', 'position', 'absolute');
     cy.findByText('Employment').should('not.be.visible');
     cy.findByText('Test').should('be.visible');
 
@@ -819,6 +824,7 @@ describe('ObjectPage', () => {
     cy.get('[data-component-name="ObjectPageAnchorBarExpandBtn"]').click();
     cy.findByText('https://github.com/SAP/ui5-webcomponents-react').should('not.be.visible');
   });
+
   it('ObjectPageSection/SubSection: Custom header & hideTitleText', () => {
     document.body.style.margin = '0px';
     const TestComp = ({ mode }: ObjectPagePropTypes) => {
@@ -880,8 +886,12 @@ describe('ObjectPage', () => {
       cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
       cy.findByText('Custom Header Section One').should('be.visible');
       cy.findByText('toggle titleText1').click({ scrollBehavior: false, force: true });
-      // first titleText should never be displayed
-      cy.findByText('Goals').should('not.be.visible');
+      // first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
+      cy.findByText('Goals')
+        .parent()
+        .should('have.css', 'width', '1px')
+        .and('have.css', 'margin', '-1px')
+        .and('have.css', 'position', 'absolute');
       cy.findByText('Custom Header Section One').should('be.visible');
 
       cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').click();

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

@@ -21,15 +21,18 @@
   &[data-in-iframe='true'] {
     scroll-behavior: auto;
   }
-  section[id*='ObjectPageSection-'] > div[role='heading'] {
-    display: none;
-  }
 
-  /* explanation why first-child selector is not sufficient here:
-   https://stackoverflow.com/questions/7128406/css-select-the-first-child-from-elements-with-particular-attribute
-   */
-  section[id*='ObjectPageSection-'] ~ section[id*='ObjectPageSection-'] > div[role='heading'] {
-    display: block;
+  /*invisible first heading*/
+  section[id*='ObjectPageSection-']:first-of-type > div[role='heading'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    white-space: nowrap;
   }
 }
 

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

@@ -72,7 +72,7 @@ const meta = {
     ),
     titleArea: (
       <ObjectPageTitle
-        header="Denise Smith"
+        header={<Title level="H2">Denise Smith</Title>}
         subHeader="Senior UI Developer"
         actionsBar={
           <Toolbar design="Transparent">

packages/main/src/components/ObjectPageTitle/index.tsx

@@ -158,10 +158,7 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
           >
             <FlexBox className={classNames.titleMainSection} onClick={onHeaderClick}>
               {header && (
-                <div
-                  className={classNames.title}
-                  data-component-name="ObjectPageTitleHeader" /*onClick={onHeaderClick}*/
-                >
+                <div className={classNames.title} data-component-name="ObjectPageTitleHeader">
                   {header}
                 </div>
               )}