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

Author: Lukas742

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

@@ -33,11 +33,13 @@ export interface ObjectPageTitlePropTypes extends CommonProps {
 
   /**
    * The `header` is positioned in the `ObjectPageTitle` left area.
+   *
    * Use this prop to display a `Title` (or any other component that serves as a heading).
    */
   header?: ReactNode;
   /**
    * The `subHeader` is positioned in the `ObjectPageTitle` left area below the `header`.
+   *
    * Use this aggregation to display a component like `Label` or any other component that serves as sub header.
    */
   subHeader?: ReactNode;
@@ -225,7 +227,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>
           )}