From 94f52d2910e43d31d2822f4b50c0126deb654952 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 22 Oct 2026 15:26:43 +0200
Subject: [PATCH 1/2] feat(ObjectPage): derive section accessible names from
 titles

---
 .../ObjectPage/ObjectPage.stories.tsx         | 68 ++++---------------
 .../ObjectPage/test/ObjectPage.gallery.tsx    | 24 +++++++
 .../ObjectPage/test/ObjectPage.spec.tsx       | 19 ++++++
 .../components/ObjectPageSection/index.tsx    |  6 ++
 .../components/ObjectPageSubSection/index.tsx |  6 ++
 5 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
index 7ec697c637b..b501c31d53e 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
@@ -167,7 +167,7 @@ export const Default: Story = {
     return (
       // `onBeforeNavigate` & `onToggleHeaderArea` have to be added like this, otherwise Storybook invokes them incorrectly sometimes
       <ObjectPage {...args} onBeforeNavigate={args.onBeforeNavigate} onToggleHeaderArea={args.onToggleHeaderArea}>
-        <ObjectPageSection titleText="Goals" id="goals" aria-label="Goals">
+        <ObjectPageSection titleText="Goals" id="goals">
           <Form layout="S1 M2 L3 XL3" labelSpan="S12 M12 L12 XL12">
             <FormItem labelContent={<Label showColon>Evangelize the UI framework across the company</Label>}>
               <Text>4 days overdue - Cascaded</Text>
@@ -180,11 +180,10 @@ export const Default: Story = {
             </FormItem>
           </Form>
         </ObjectPageSection>
-        <ObjectPageSection titleText="Personal" id="personal" aria-label="Personal">
+        <ObjectPageSection titleText="Personal" id="personal">
           <ObjectPageSubSection
             titleText="Connect"
             id="personal-connect"
-            aria-label="Connect"
             actions={
               <>
                 <Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
@@ -225,11 +224,7 @@ export const Default: Story = {
               </FormGroup>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Payment Information"
-            id="personal-payment-information"
-            aria-label="Payment Information"
-          >
+          <ObjectPageSubSection titleText="Payment Information" id="personal-payment-information">
             <Form>
               <FormGroup headerText="Salary">
                 <FormItem labelContent={<Label showColon>Bank Transfer</Label>}>
@@ -244,12 +239,8 @@ export const Default: Story = {
             </Form>
           </ObjectPageSubSection>
         </ObjectPageSection>
-        <ObjectPageSection titleText="Employment" id="employment" aria-label="Employment">
-          <ObjectPageSubSection
-            titleText="Job Information"
-            id="employment-job-information"
-            aria-label="Job Information"
-          >
+        <ObjectPageSection titleText="Employment" id="employment">
+          <ObjectPageSubSection titleText="Job Information" id="employment-job-information">
             <Form>
               <FormItem labelContent={<Label showColon>Job Classification</Label>}>
                 <FlexBox direction={FlexBoxDirection.Column}>
@@ -277,11 +268,7 @@ export const Default: Story = {
               </FormItem>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Employee Details"
-            id="employment-employee-details"
-            aria-label="Employee Details"
-          >
+          <ObjectPageSubSection titleText="Employee Details" id="employment-employee-details">
             <Form>
               <FormItem labelContent={<Label showColon>Start Date</Label>}>
                 <Text>Jan 01, 2018</Text>
@@ -303,11 +290,7 @@ export const Default: Story = {
               </FormItem>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Job Relationship"
-            id="employment-job-relationship"
-            aria-label="Job Relationship"
-          >
+          <ObjectPageSubSection titleText="Job Relationship" id="employment-job-relationship">
             <Form>
               <FormItem labelContent={<Label showColon>Manager</Label>}>
                 <Text>John Doe</Text>
@@ -346,26 +329,18 @@ export const SectionWithCustomHeader: Story = {
   render(args) {
     return (
       <ObjectPage {...args} onBeforeNavigate={args.onBeforeNavigate}>
-        <ObjectPageSection
-          titleText="Goals"
-          hideTitleText
-          id="goals"
-          aria-label="Goals"
-          header={<Title>Custom Header Section One</Title>}
-        >
+        <ObjectPageSection titleText="Goals" hideTitleText id="goals" header={<Title>Custom Header Section One</Title>}>
           <div style={{ width: '100%', height: '200px', background: 'cadetblue' }} />
         </ObjectPageSection>
         <ObjectPageSection
           titleText="Personal"
           hideTitleText
           id="personal"
-          aria-label="Personal"
           header={<MessageStrip hideCloseButton>Custom Header Section Two</MessageStrip>}
         >
           <ObjectPageSubSection
             titleText="Connect"
             id="personal-connect"
-            aria-label="Connect"
             actions={
               <>
                 <Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
@@ -406,11 +381,7 @@ export const SectionWithCustomHeader: Story = {
               </FormGroup>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Payment Information"
-            id="personal-payment-information"
-            aria-label="Payment Information"
-          >
+          <ObjectPageSubSection titleText="Payment Information" id="personal-payment-information">
             <Form>
               <FormGroup headerText="Salary">
                 <FormItem labelContent={<Label showColon>Bank Transfer</Label>}>
@@ -429,7 +400,6 @@ export const SectionWithCustomHeader: Story = {
           titleText="Employment"
           hideTitleText
           id="employment"
-          aria-label="Employment"
           header={
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <Icon name={sunIcon} style={{ marginInlineEnd: '2rem' }} />
@@ -538,12 +508,8 @@ export const SingleSection: Story = {
   render(args) {
     return (
       <ObjectPage {...args}>
-        <ObjectPageSection titleText="Employment" id="employment" aria-label="Employment">
-          <ObjectPageSubSection
-            titleText="Job Information"
-            id="employment-job-information"
-            aria-label="Job Information"
-          >
+        <ObjectPageSection titleText="Employment" id="employment">
+          <ObjectPageSubSection titleText="Job Information" id="employment-job-information">
             <Form>
               <FormItem labelContent={<Label showColon>Job Classification</Label>}>
                 <FlexBox direction={FlexBoxDirection.Column}>
@@ -571,11 +537,7 @@ export const SingleSection: Story = {
               </FormItem>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Employee Details"
-            id="employment-employee-details"
-            aria-label="Employee Details"
-          >
+          <ObjectPageSubSection titleText="Employee Details" id="employment-employee-details">
             <Form>
               <FormItem labelContent={<Label showColon>Start Date</Label>}>
                 <Text>Jan 01, 2018</Text>
@@ -597,11 +559,7 @@ export const SingleSection: Story = {
               </FormItem>
             </Form>
           </ObjectPageSubSection>
-          <ObjectPageSubSection
-            titleText="Job Relationship"
-            id="employment-job-relationship"
-            aria-label="Job Relationship"
-          >
+          <ObjectPageSubSection titleText="Job Relationship" id="employment-job-relationship">
             <Form>
               <FormItem labelContent={<Label showColon>Manager</Label>}>
                 <Text>John Doe</Text>
diff --git a/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx b/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
index d8f2446f753..eff53a2e376 100644
--- a/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
+++ b/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
@@ -5,6 +5,7 @@ import { Title } from '../../../webComponents/Title/index.js';
 import { FlexBox } from '../../FlexBox/index.js';
 import { ObjectPageHeader } from '../../ObjectPageHeader/index.js';
 import { ObjectPageSection } from '../../ObjectPageSection/index.js';
+import { ObjectPageSubSection } from '../../ObjectPageSubSection/index.js';
 import { ObjectPageTitle } from '../../ObjectPageTitle/index.js';
 import { ObjectPage } from '../index.js';
 
@@ -114,3 +115,26 @@ export const ObjectPageShortSectionTabSwitchTestComp = () => {
     </ObjectPage>
   );
 };
+
+export const ObjectPageAccessibleNameTestComp = () => {
+  return (
+    <>
+      <span id="external-section-label">External section label</span>
+      <ObjectPageSection id="automatic" titleText="Automatic section">
+        <ObjectPageSubSection id="automatic-subsection" titleText="Automatic subsection">
+          Content
+        </ObjectPageSubSection>
+      </ObjectPageSection>
+      <ObjectPageSection id="aria-label" titleText="Section with aria-label" aria-label="Custom section label">
+        Content
+      </ObjectPageSection>
+      <ObjectPageSection
+        id="aria-labelledby"
+        titleText="Section with aria-labelledby"
+        aria-labelledby="external-section-label"
+      >
+        Content
+      </ObjectPageSection>
+    </>
+  );
+};
diff --git a/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx b/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
index 00f76fdede6..563d44913cf 100644
--- a/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
+++ b/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
@@ -126,4 +126,23 @@ test.describe('ObjectPage', () => {
     await page.getByRole('tab', { name: 'Short' }).click();
     await expect.poll(topSpacerHeight).toBe(0);
   });
+
+  test('uses titleText as the accessible name and respects explicit names', async ({ mount, page }) => {
+    await mount('ObjectPage/ObjectPageAccessibleNameTestComp');
+
+    const automaticSection = page.getByRole('region', { name: 'Automatic section' });
+    const automaticSubsection = page.getByRole('region', { name: 'Automatic subsection' });
+
+    await expect(automaticSection).toHaveAttribute('aria-label', 'Automatic section');
+    await expect(automaticSubsection).toHaveAttribute('aria-label', 'Automatic subsection');
+
+    await expect(page.getByRole('region', { name: 'Custom section label' })).toHaveAttribute(
+      'aria-label',
+      'Custom section label',
+    );
+    await expect(page.getByRole('region', { name: 'External section label' })).toHaveAttribute(
+      'aria-labelledby',
+      'external-section-label',
+    );
+  });
 });
diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx
index f08d3907deb..9c87a8bd808 100644
--- a/packages/main/src/components/ObjectPageSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSection/index.tsx
@@ -28,6 +28,8 @@ export interface ObjectPageSectionPropTypes extends CommonProps {
   /**
    * Defines the title of the `ObjectPageSection`.
    *
+   * __Note:__ The title is also used as the accessible name of the section unless `aria-label` or `aria-labelledby` is provided.
+   *
    */
   titleText: string;
   /**
@@ -137,6 +139,8 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
     wrapTitleText,
     header,
     fitContent,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     ...rest
   } = props;
 
@@ -257,6 +261,8 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
       style={style}
       tabIndex={objectPageMode === ObjectPageMode.Default ? -1 : 0}
       {...propsWithoutOmitted}
+      aria-label={ariaLabel ?? (ariaLabelledBy == null ? titleText : undefined)}
+      aria-labelledby={ariaLabelledBy}
       id={htmlId}
       data-component-name="ObjectPageSection"
       onFocus={objectPageMode === ObjectPageMode.Default ? handleFocusDefault : handleFocusIconTabBar}
diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx
index 269aa7e9d11..08498429a8a 100644
--- a/packages/main/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSubSection/index.tsx
@@ -24,6 +24,8 @@ export interface ObjectPageSubSectionPropTypes extends CommonProps {
   children: ReactNode | ReactNode[];
   /**
    * Defines the title of the `ObjectPageSubSection`.
+   *
+   * __Note:__ The title is also used as the accessible name of the subsection unless `aria-label` or `aria-labelledby` is provided.
    */
   titleText: string;
   /**
@@ -71,6 +73,8 @@ const ObjectPageSubSection = forwardRef<HTMLDivElement, ObjectPageSubSectionProp
     hideTitleText,
     titleTextLevel = 'H4',
     titleTextUppercase,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     ...rest
   } = props;
   const htmlId = `ObjectPageSubSection-${id}`;
@@ -86,6 +90,8 @@ const ObjectPageSubSection = forwardRef<HTMLDivElement, ObjectPageSubSectionProp
       style={style}
       tabIndex={-1}
       {...rest}
+      aria-label={ariaLabel ?? (ariaLabelledBy == null ? titleText : undefined)}
+      aria-labelledby={ariaLabelledBy}
       onKeyDown={(e) => {
         navigateSections({ e, onKeyDown: props.onKeyDown, componentName: 'ObjectPageSubSection' });
       }}

From 5d19edee2d2bf0c899152aba993ead21e6011d92 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 23 Oct 2026 09:51:46 +0200
Subject: [PATCH 2/2] feat: improve (single-section) accessibility

---
 .../main/src/components/ObjectPage/context.ts | 10 ++++++-
 .../main/src/components/ObjectPage/index.tsx  | 18 ++++++++---
 .../ObjectPage/test/ObjectPage.gallery.tsx    | 28 +++++++++++++++++
 .../ObjectPage/test/ObjectPage.spec.tsx       | 30 +++++++++++++++++++
 .../components/ObjectPageSection/index.tsx    | 21 ++++++-------
 .../components/ObjectPageSubSection/index.tsx |  4 ++-
 6 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/context.ts b/packages/main/src/components/ObjectPage/context.ts
index ea970d117ca..693e33879ae 100644
--- a/packages/main/src/components/ObjectPage/context.ts
+++ b/packages/main/src/components/ObjectPage/context.ts
@@ -2,6 +2,14 @@ import { createContext, useContext } from 'react';
 import { ObjectPageMode } from '../../enums/ObjectPageMode.js';
 import type { ObjectPagePropTypes } from './types/index.js';
 
-export const ObjectPageContext = createContext<ObjectPagePropTypes['mode']>(ObjectPageMode.Default);
+interface ObjectPageContextValue {
+  mode: ObjectPagePropTypes['mode'];
+  hasOnlySingleSection: boolean;
+}
+
+export const ObjectPageContext = createContext<ObjectPageContextValue>({
+  mode: ObjectPageMode.Default,
+  hasOnlySingleSection: false,
+});
 
 export const useObjectPageContext = () => useContext(ObjectPageContext);
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 3b01850cc0b..96918be57e2 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -98,6 +98,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const [tabSelectId, setTabSelectId] = useState<null | string>(null);
   const titleAreaInteractive = headerArea && !preserveHeaderStateOnClick;
   const hasOnlySingleSection = Children.count(children) === 1;
+  const objectPageContextValue = useMemo(() => ({ mode, hasOnlySingleSection }), [mode, hasOnlySingleSection]);
   const tabContainerHeaderHeight = hasOnlySingleSection ? 1 : TAB_CONTAINER_HEADER_HEIGHT;
 
   const isProgrammaticallyScrolled = useRef(false);
@@ -716,15 +717,24 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   }
 
   useEffect(() => {
-    if (isMounted && children && mode === ObjectPageMode.Default) {
+    if (isMounted && children && (mode === ObjectPageMode.Default || hasOnlySingleSection)) {
       const firstSection: HTMLElement = objectPageContentRef.current.querySelector(
         '[data-component-name="ObjectPageSection"]',
       );
       if (firstSection) {
-        firstSection.tabIndex = 0;
+        if (hasOnlySingleSection) {
+          const firstSubSection = firstSection.querySelector<HTMLElement>(
+            '[data-component-name="ObjectPageSubSection"]',
+          );
+          if (firstSubSection) {
+            firstSubSection.tabIndex = 0;
+          }
+        } else if (mode === ObjectPageMode.Default) {
+          firstSection.tabIndex = 0;
+        }
       }
     }
-  }, [isMounted, children, mode]);
+  }, [isMounted, children, mode, hasOnlySingleSection]);
 
   const handleContentBlur: FocusEventHandler<HTMLDivElement> = (e) => {
     const opNode = objectPageRef.current;
@@ -746,7 +756,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   };
 
   return (
-    <ObjectPageContext.Provider value={mode}>
+    <ObjectPageContext.Provider value={objectPageContextValue}>
       <div
         ref={componentRef}
         data-component-name="ObjectPage"
diff --git a/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx b/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
index eff53a2e376..ac7f5267a66 100644
--- a/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
+++ b/packages/main/src/components/ObjectPage/test/ObjectPage.gallery.tsx
@@ -138,3 +138,31 @@ export const ObjectPageAccessibleNameTestComp = () => {
     </>
   );
 };
+
+export const ObjectPageSingleSectionTestComp = () => {
+  return (
+    <>
+      <ObjectPage>
+        <ObjectPageSection id="single" titleText="Single section">
+          <ObjectPageSubSection id="first" titleText="First subsection">
+            First subsection content
+          </ObjectPageSubSection>
+          <ObjectPageSubSection id="second" titleText="Second subsection">
+            Second subsection content
+          </ObjectPageSubSection>
+        </ObjectPageSection>
+      </ObjectPage>
+      <button type="button">After ObjectPage</button>
+    </>
+  );
+};
+
+export const ObjectPageSingleSectionIconTabBarTestComp = () => {
+  return (
+    <ObjectPage mode={ObjectPageMode.IconTabBar}>
+      <ObjectPageSection id="single" titleText="Single section">
+        Single section content
+      </ObjectPageSection>
+    </ObjectPage>
+  );
+};
diff --git a/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx b/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
index 563d44913cf..9dce0079a9b 100644
--- a/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
+++ b/packages/main/src/components/ObjectPage/test/ObjectPage.spec.tsx
@@ -145,4 +145,34 @@ test.describe('ObjectPage', () => {
       'external-section-label',
     );
   });
+
+  test('keeps only a single section out of the tab order', async ({ mount, page }) => {
+    await mount('ObjectPage/ObjectPageSingleSectionTestComp');
+
+    const section = page.getByRole('region', { name: 'Single section' });
+    const firstSubSection = page.getByRole('region', { name: 'First subsection' });
+    const secondSubSection = page.getByRole('region', { name: 'Second subsection' });
+
+    expect(await section.getAttribute('tabindex')).toBeNull();
+    await expect(section).toHaveAttribute('aria-label', 'Single section');
+    await expect(firstSubSection).toHaveAttribute('tabindex', '0');
+    await expect(page.locator('[data-component-name="ObjectPageTabContainer"]')).toHaveCount(0);
+
+    await firstSubSection.focus();
+    await page.keyboard.press('ArrowDown');
+    await expect(secondSubSection).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'After ObjectPage' })).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(secondSubSection).toBeFocused();
+    expect(await section.getAttribute('tabindex')).toBeNull();
+
+    await mount('ObjectPage/ObjectPageSingleSectionIconTabBarTestComp');
+    expect(await page.getByRole('region', { name: 'Single section' }).getAttribute('tabindex')).toBeNull();
+    await expect(page.locator('[data-component-name="ObjectPageTabContainer"]')).toHaveCount(0);
+
+    await mount('ObjectPage/ObjectPageFitContentTabSwitchTestComp');
+    await expect(page.getByRole('region', { name: 'Fit 1' })).toHaveAttribute('tabindex', '0');
+    await expect(page.locator('[data-component-name="ObjectPageTabContainer"]').first()).toBeVisible();
+  });
 });
diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx
index 9c87a8bd808..351dfd05bea 100644
--- a/packages/main/src/components/ObjectPageSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSection/index.tsx
@@ -158,20 +158,21 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
       ),
     [children],
   );
-  const objectPageMode = useObjectPageContext();
+  const { mode: objectPageMode, hasOnlySingleSection } = useObjectPageContext();
 
   const handleFocusDefault = (e: FocusEvent<HTMLElement>) => {
     if (typeof props.onFocus === 'function') {
       props.onFocus(e);
     }
-    // reset tab-index of all sections, so only the focused one is tabbable
-    Array.from(e.currentTarget.parentElement.children as HTMLCollectionOf<HTMLElement>).forEach((el) => {
-      if (el.dataset.componentName === 'ObjectPageSection') {
-        el.tabIndex = -1;
-      }
-    });
-
-    e.currentTarget.tabIndex = 0;
+    if (!hasOnlySingleSection) {
+      // reset tab-index of all sections, so only the focused one is tabbable
+      Array.from(e.currentTarget.parentElement.children as HTMLCollectionOf<HTMLElement>).forEach((el) => {
+        if (el.dataset.componentName === 'ObjectPageSection') {
+          el.tabIndex = -1;
+        }
+      });
+      e.currentTarget.tabIndex = 0;
+    }
     if (setTabIndexForFirstSubSectionIfFocused(e, e.currentTarget, hasSubSection)) {
       // if section has subsections, the first subsection should be next in the tab-chain
     } else if (e.target.dataset.componentName === 'ObjectPageSubSection') {
@@ -259,7 +260,7 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
         className,
       )}
       style={style}
-      tabIndex={objectPageMode === ObjectPageMode.Default ? -1 : 0}
+      tabIndex={hasOnlySingleSection ? undefined : objectPageMode === ObjectPageMode.Default ? -1 : 0}
       {...propsWithoutOmitted}
       aria-label={ariaLabel ?? (ariaLabelledBy == null ? titleText : undefined)}
       aria-labelledby={ariaLabelledBy}
diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx
index 08498429a8a..c415d2ef81c 100644
--- a/packages/main/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSubSection/index.tsx
@@ -10,6 +10,7 @@ import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
 import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
 import type { CommonProps } from '../../types/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { useObjectPageContext } from '../ObjectPage/context.js';
 import { navigateSections } from '../ObjectPage/ObjectPageUtils.js';
 import { classNames, styleData } from './ObjectPageSubSection.module.css.js';
 
@@ -78,6 +79,7 @@ const ObjectPageSubSection = forwardRef<HTMLDivElement, ObjectPageSubSectionProp
     ...rest
   } = props;
   const htmlId = `ObjectPageSubSection-${id}`;
+  const { hasOnlySingleSection } = useObjectPageContext();
 
   useStylesheet(styleData, ObjectPageSubSection.displayName);
 
@@ -99,7 +101,7 @@ const ObjectPageSubSection = forwardRef<HTMLDivElement, ObjectPageSubSectionProp
         if (typeof props.onBlur === 'function') {
           props.onBlur(e);
         }
-        if (e.target === e.currentTarget) {
+        if (!hasOnlySingleSection && e.target === e.currentTarget) {
           e.target.tabIndex = -1;
         }
       }}