feat(ObjectPage): enable keyboard-navigation for sections

Author: Lukas742

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

@@ -130,8 +130,7 @@
 
 @container (max-width: 599px) {
   .header,
-  .headerContainer,
-  .content {
+  .headerContainer {
     padding-inline: 1rem;
   }
 
@@ -142,8 +141,7 @@
 
 @container (min-width: 600px) and (max-width: 1439px) {
   .header,
-  .headerContainer,
-  .content {
+  .headerContainer {
     padding-inline: 2rem;
   }
 
@@ -154,8 +152,7 @@
 
 @container (min-width: 1440px) {
   .header,
-  .headerContainer,
-  .content {
+  .headerContainer {
     padding-inline: 3rem;
   }
 

packages/main/src/components/ObjectPage/ObjectPageUtils.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, KeyboardEvent } from 'react';
 import { isValidElement } from 'react';
 import { safeGetChildrenArray } from '../../internal/safeGetChildrenArray.js';
 import type { ObjectPageSectionPropTypes } from '../ObjectPageSection/index.js';
@@ -17,3 +17,39 @@ export const getSectionElementById = (objectPage: HTMLDivElement, isSubSection:
     `#${isSubSection ? 'ObjectPageSubSection' : 'ObjectPageSection'}-${CSS.escape(id)}`,
   );
 };
+
+interface NavigateSectionParam {
+  e: KeyboardEvent<HTMLDivElement>;
+  onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+  componentName: 'ObjectPageSection' | 'ObjectPageSubSection';
+}
+
+export function navigateSections({ e, onKeyDown, componentName }: NavigateSectionParam) {
+  if (typeof onKeyDown === 'function') {
+    onKeyDown(e);
+  }
+  if (e.currentTarget !== e.target) {
+    return;
+  }
+
+  const nextSibling = e.currentTarget.nextElementSibling as HTMLElement;
+  const prevSibling = e.currentTarget.previousElementSibling as HTMLElement;
+  if ((e.key === 'ArrowDown' || e.key === 'ArrowRight') && nextSibling.dataset.componentName === componentName) {
+    e.preventDefault();
+    e.currentTarget.tabIndex = -1;
+    nextSibling.tabIndex = 0;
+    nextSibling.focus({ preventScroll: true });
+    nextSibling.scrollIntoView({ behavior: 'instant', block: 'start' });
+  }
+
+  if ((e.key === 'ArrowUp' || e.key === 'ArrowLeft') && prevSibling.dataset.componentName === componentName) {
+    e.preventDefault();
+    e.currentTarget.tabIndex = -1;
+    prevSibling.tabIndex = 0;
+    prevSibling.focus({ preventScroll: true });
+    prevSibling.scrollIntoView({
+      behavior: 'instant',
+      block: 'start',
+    });
+  }
+}

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

@@ -252,6 +252,9 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     });
     setTabSelectId(newSelectionSectionId);
     scrollEvent.current = targetEvent;
+    if (isMounted) {
+      getSectionElementById(objectPageContentRef.current, false, newSelectionSectionId)?.focus({ preventScroll: true });
+    }
     fireOnSelectedChangedEvent(targetEvent, index, newSelectionSectionId, section);
   };
 
@@ -602,6 +605,17 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;
   }
 
+  useEffect(() => {
+    if (isMounted && children) {
+      const firstSection: HTMLElement = objectPageContentRef.current.querySelector(
+        '[data-component-name="ObjectPageSection"]',
+      );
+      if (firstSection) {
+        firstSection.tabIndex = 0;
+      }
+    }
+  }, [isMounted, children]);
+
   return (
     <div
       ref={componentRef}

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

@@ -1,7 +1,16 @@
+.section {
+  box-sizing: border-box;
+}
+
 .section [data-component-name='ObjectPageSubSection']:not(:first-child) {
   padding-block-start: 0.5rem;
 }
 
+.section:focus {
+  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+}
+
 .headerContainer {
   padding-block: 0.5rem;
   color: var(--sapGroup_TitleTextColor);
@@ -54,3 +63,21 @@
   height: 100%;
   box-sizing: border-box;
 }
+
+@container (max-width: 599px) {
+  .section {
+    padding-inline: 1rem;
+  }
+}
+
+@container (min-width: 600px) and (max-width: 1439px) {
+  .section {
+    padding-inline: 2rem;
+  }
+}
+
+@container (min-width: 1440px) {
+  .section {
+    padding-inline: 3rem;
+  }
+}

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

@@ -3,9 +3,10 @@
 import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
-import { forwardRef } from 'react';
+import type { ReactNode, FocusEventHandler, KeyboardEventHandler } from 'react';
+import { Children, isValidElement, forwardRef } from 'react';
 import type { CommonProps } from '../../types/index.js';
+import { navigateSections } from '../ObjectPage/ObjectPageUtils.js';
 import { classNames, styleData } from './ObjectPageSection.module.css.js';
 
 export interface ObjectPageSectionPropTypes extends CommonProps {
@@ -73,22 +74,88 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
     header,
     ...rest
   } = props;
-
   useStylesheet(styleData, ObjectPageSection.displayName);
-
   const htmlId = `ObjectPageSection-${id}`;
-
   const titleClasses = clsx(classNames.title, titleTextUppercase && classNames.uppercase);
 
+  const handleFocus: FocusEventHandler<HTMLElement> = (e) => {
+    if (typeof props.onFocus === 'function') {
+      props.onFocus(e);
+    }
+    const hasSubSection = Children.toArray(children).some(
+      // @ts-expect-error: if type is string, then it's not a subcomponent
+      (child) => isValidElement(child) && child.type?.displayName === 'ObjectPageSubSection',
+    );
+    if (hasSubSection && e.target === e.currentTarget) {
+      const opSubSection: HTMLElement = e.currentTarget.querySelector('[data-component-name="ObjectPageSubSection"]');
+      if (opSubSection) {
+        opSubSection.tabIndex = 0;
+      }
+    }
+  };
+
+  const handleBlur: FocusEventHandler<HTMLElement> = (e) => {
+    if (typeof props.onBlur === 'function') {
+      props.onBlur(e);
+    }
+    const hasSubSection = Children.toArray(children).some(
+      // @ts-expect-error: if type is string, then it's not a subcomponent
+      (child) => isValidElement(child) && child.type?.displayName === 'ObjectPageSubSection',
+    );
+    if (hasSubSection && e.target === e.currentTarget) {
+      const allSubSections: NodeListOf<HTMLElement> = e.currentTarget.querySelectorAll(
+        '[data-component-name="ObjectPageSubSection"]',
+      );
+      allSubSections.forEach((subSection) => {
+        subSection.tabIndex = -1;
+      });
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {
+    navigateSections({ e, onKeyDown: props.onKeyDown, componentName: 'ObjectPageSection' });
+    const target = e.currentTarget as HTMLElement;
+    if (
+      (e.key === 'ArrowDown' || e.key === 'ArrowRight') &&
+      (target.nextElementSibling as HTMLElement).dataset.componentName === 'ObjectPageSection'
+    ) {
+      e.preventDefault();
+      // scroll 12px so section is noticed as selected
+      requestAnimationFrame(() => {
+        target.parentElement.parentElement.scrollBy(0, 12);
+        const isFirstSection =
+          (target.previousElementSibling as HTMLElement).dataset.componentName !== 'ObjectPageSection';
+        // header collapse leads to loose scrolling - this fallback makes sure the second section is marked as selected
+        if (isFirstSection) {
+          target.parentElement.parentElement.scrollBy(0, 14);
+        }
+      });
+    }
+    if (
+      (e.key === 'ArrowUp' || e.key === 'ArrowLeft') &&
+      (target.previousElementSibling as HTMLElement).dataset.componentName === 'ObjectPageSection'
+    ) {
+      e.preventDefault();
+      // scroll 12px so section is noticed as selected
+      requestAnimationFrame(() => {
+        target.parentElement.parentElement.scrollBy(0, 12);
+      });
+    }
+  };
+
   return (
     <section
       ref={ref}
       role="region"
       className={clsx(classNames.section, wrapTitleText && classNames.wrap, className)}
       style={style}
+      tabIndex={-1}
       {...rest}
       id={htmlId}
       data-component-name="ObjectPageSection"
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
     >
       {!!header && <div className={classNames.headerContainer}>{header}</div>}
       {!hideTitleText && (

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

@@ -8,6 +8,7 @@ import { forwardRef } from 'react';
 import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent } from '../../enums/index.js';
 import type { CommonProps } from '../../types/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { navigateSections } from '../ObjectPage/ObjectPageUtils.js';
 import { classNames, styleData } from './ObjectPageSubSection.module.css.js';
 
 export interface ObjectPageSubSectionPropTypes extends CommonProps {
@@ -83,6 +84,9 @@ const ObjectPageSubSection = forwardRef<HTMLDivElement, ObjectPageSubSectionProp
       style={style}
       tabIndex={-1}
       {...rest}
+      onKeyDown={(e) => {
+        navigateSections({ e, onKeyDown: props.onKeyDown, componentName: 'ObjectPageSubSection' });
+      }}
       className={subSectionClassName}
       id={htmlId}
       data-component-name="ObjectPageSubSection"