From b9751fb958523254f5c6bdfe682f059ee3eb5cbd Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 13 May 2026 10:55:52 +0200
Subject: [PATCH 1/3] feat(AnalyticalTable): add `accessibleName` &
 `accessibleNameRef` props

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 29 +++++++++++
 .../AnalyticalTable/docs/AnalyticalTable.mdx  | 13 +++++
 .../docs/AnalyticalTable.stories.tsx          | 48 +++++++++++++++++++
 .../src/components/AnalyticalTable/index.tsx  |  7 ++-
 .../react-table/publicUtils.tsx               |  2 +-
 .../components/AnalyticalTable/types/index.ts | 12 +++++
 6 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index cf311dfbf55..4963f194da0 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -3159,6 +3159,35 @@ describe('AnalyticalTable', () => {
     );
   });
 
+  it('a11y: accessibleName and accessibleNameRef', () => {
+    // no aria-labelledby
+    cy.mount(<AnalyticalTable columns={columns} data={data} />);
+    cy.get('[data-component-name="AnalyticalTableContainer"]').should('not.have.attr', 'aria-labelledby');
+    cy.get('[data-component-name="AnalyticalTableContainer"]').should('not.have.attr', 'aria-label');
+
+    // with header: aria-labelledby points to the title bar
+    cy.mount(<AnalyticalTable columns={columns} data={data} header="Items Table" />);
+    cy.get('[data-component-name="AnalyticalTableContainer"]')
+      .should('have.attr', 'aria-labelledby')
+      .then((labelledby) => {
+        cy.get(`#${labelledby}`).should('exist');
+      });
+
+    // accessibleName: aria-label on the grid and removes the header connection
+    cy.mount(<AnalyticalTable columns={columns} data={data} header="Items Table" accessibleName="Financing Details" />);
+    cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.attr', 'aria-label', 'Financing Details');
+    cy.get('[data-component-name="AnalyticalTableContainer"]').should('not.have.attr', 'aria-labelledby');
+
+    // accessibleNameRef: overrides the header connection
+    cy.mount(
+      <>
+        <span id="custom-label">Custom Table Label</span>
+        <AnalyticalTable columns={columns} data={data} header="Items Table" accessibleNameRef="custom-label" />
+      </>,
+    );
+    cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.attr', 'aria-labelledby', 'custom-label');
+  });
+
   it("Expandable: don't scroll when expanded/collapsed", () => {
     const TestComp = () => {
       const tableInstanceRef = useRef<{ toggleRowExpanded?: (e: string) => void }>({});
diff --git a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
index d35fb3be91a..e3740f588f9 100644
--- a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
+++ b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
@@ -549,6 +549,19 @@ function ContextMenuExample() {
 
 </details>
 
+## Accessibility
+
+This example demonstrates the recommended accessibility configuration for the `AnalyticalTable`:
+
+- **`accessibleName`**: Sets a concise `aria-label` on the table grid, giving screen readers a meaningful table name.
+- **`accessibleNameRef`**: References the ID of an external labelling element via `aria-labelledby`. When either `accessibleName` or `accessibleNameRef` is set, the automatic connection to the `header` prop is removed.
+- **`headerLabel`** (column option): Provides a screen-reader-accessible label for column headers that have no textual content.
+- **`cellLabel`** (column option): Returns a descriptive `aria-label` for cells whose visual content is not self-explanatory.
+
+The example also includes the [useAnnounceEmptyCells](?path=/docs/data-display-analyticaltable-plugin-hooks--docs#announce-empty-cells) plugin hook, which adds explicit empty-cell announcements for screen readers that do not detect them on their own. As this could lead to duplicate screen reader announcement, use with caution.
+
+<Canvas of={ComponentStories.Accessibility}/>
+
 ## Kitchen Sink
 
 A comprehensive example combining many AnalyticalTable features: sorting, filtering, grouping, custom cells, row and navigation highlighting, infinite scrolling, column reordering, vertical alignment, `scaleWidthModeOptions` for custom renderers, `retainColumnWidth`, `sortDescFirst`, and more.
diff --git a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.stories.tsx
index c81a5b48860..a482057c57a 100644
--- a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.stories.tsx
@@ -38,6 +38,7 @@ import { FlexBox } from '../../FlexBox/index.js';
 import { ObjectStatus } from '../../ObjectStatus/index.js';
 import type { AnalyticalTableColumnDefinition, AnalyticalTablePropTypes } from '../index.js';
 import { AnalyticalTable } from '../index.js';
+import { useAnnounceEmptyCells } from '../pluginHooks/AnalyticalTableHooks.js';
 
 const kitchenSinkArgs: AnalyticalTablePropTypes = {
   data: dataLarge,
@@ -680,6 +681,53 @@ export const ContextMenu: Story = {
   },
 };
 
+export const Accessibility: Story = {
+  render() {
+    const tableHooks = useMemo(() => [useAnnounceEmptyCells], []);
+    const columns = useMemo<AnalyticalTableColumnDefinition[]>(
+      () => [
+        {
+          Header: 'Name',
+          accessor: 'name',
+        },
+        {
+          Header: 'Age',
+          accessor: 'age',
+          hAlign: 'End',
+        },
+        {
+          Header: '',
+          headerLabel: 'Actions',
+          id: 'actions',
+          disableFilters: true,
+          disableSortBy: true,
+          disableGroupBy: true,
+          disableDragAndDrop: true,
+          Cell: () => (
+            <FlexBox>
+              <Button icon={editIcon} accessibleName="Edit" tooltip="Edit" />
+              <Button icon={deleteIcon} accessibleName="Delete" tooltip="Delete" />
+            </FlexBox>
+          ),
+          cellLabel: () => 'Actions: Edit, Delete',
+        },
+      ],
+      [],
+    );
+    const data = useMemo(() => [{ name: undefined, age: 80 }, ...dataLarge.slice(0, 4)], []);
+    return (
+      <AnalyticalTable
+        columns={columns}
+        data={data}
+        header="Friends"
+        accessibleName="Friends Table"
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
+        tableHooks={tableHooks}
+      />
+    );
+  },
+};
+
 export const KitchenSink: Story = {
   args: kitchenSinkArgs,
 };
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index f75df1b5d54..be2362db4fb 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -134,6 +134,8 @@ const measureElement = (el: HTMLElement) => {
  */
 const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTypes>((props, ref) => {
   const {
+    accessibleName,
+    accessibleNameRef,
     adjustTableHeightOnPopIn,
     alternateRowColor,
     alwaysShowBusyIndicator,
@@ -780,7 +782,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               </span>
               <div
                 tabIndex={0}
-                aria-labelledby={`${titleBarId} ${invalidTableTextId}`}
+                aria-labelledby={`${accessibleNameRef ?? titleBarId} ${invalidTableTextId}`}
                 role="region"
                 data-component-name="AnalyticalTableOverlay"
                 className={classNames.overlay}
@@ -788,7 +790,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             </>
           )}
           <div
-            aria-labelledby={titleBarId}
+            aria-label={accessibleName}
+            aria-labelledby={accessibleNameRef ?? (header && !accessibleName ? titleBarId : undefined)}
             {...getTableProps()}
             tabIndex={loading || showOverlay ? -1 : 0}
             role={isTreeTable ? 'treegrid' : 'grid'}
diff --git a/packages/main/src/components/AnalyticalTable/react-table/publicUtils.tsx b/packages/main/src/components/AnalyticalTable/react-table/publicUtils.tsx
index 049d7905e8d..f5685b35462 100644
--- a/packages/main/src/components/AnalyticalTable/react-table/publicUtils.tsx
+++ b/packages/main/src/components/AnalyticalTable/react-table/publicUtils.tsx
@@ -27,7 +27,7 @@ function mergeProps(...propList: Record<string, any>[]): Record<string, any> {
     };
 
     if (style) {
-      props.style = props.style ? { ...(props.style || {}), ...(style || {}) } : style;
+      props.style = props.style ? { ...props.style, ...style } : style;
     }
 
     if (className) {
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index a15a0e0d32c..4eb88eac5b6 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -769,6 +769,18 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * __Note:__ If not set, it will be hidden.
    */
   header?: ReactNode;
+  /**
+   * Defines the accessible name of the table.
+   *
+   * __Note:__ If set, the `aria-labelledby` derived from the `header` prop will not be applied to the table grid.
+   */
+  accessibleName?: string;
+  /**
+   * Defines the IDs of the elements that label the table.
+   *
+   * __Note:__ If set, the `aria-labelledby` derived from the `header` prop will not be applied to the table grid.
+   */
+  accessibleNameRef?: string;
   /**
    * Extension section of the Table. If not set, no extension area will be rendered
    */

From 3ad4be9116bf6056781b96744fc8ed8e86c78c0f Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 13 May 2026 11:28:11 +0200
Subject: [PATCH 2/3] fix React18 test

---
 .../main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 4963f194da0..846710d2413 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -3170,7 +3170,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-component-name="AnalyticalTableContainer"]')
       .should('have.attr', 'aria-labelledby')
       .then((labelledby) => {
-        cy.get(`#${labelledby}`).should('exist');
+        cy.get(`[id="${labelledby}"]`).should('exist');
       });
 
     // accessibleName: aria-label on the grid and removes the header connection

From 603be81bbf16a33432b6dbb293b59c56d2190790 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 13 May 2026 12:02:25 +0200
Subject: [PATCH 3/3] docs

---
 .../components/AnalyticalTable/docs/AnalyticalTable.mdx    | 7 +++++--
 .../main/src/components/AnalyticalTable/types/index.ts     | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
index e3740f588f9..a8b6fc1299f 100644
--- a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
+++ b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx
@@ -551,14 +551,17 @@ function ContextMenuExample() {
 
 ## Accessibility
 
-This example demonstrates the recommended accessibility configuration for the `AnalyticalTable`:
+This example demonstrates possible accessibility configuration for the `AnalyticalTable`:
 
 - **`accessibleName`**: Sets a concise `aria-label` on the table grid, giving screen readers a meaningful table name.
 - **`accessibleNameRef`**: References the ID of an external labelling element via `aria-labelledby`. When either `accessibleName` or `accessibleNameRef` is set, the automatic connection to the `header` prop is removed.
 - **`headerLabel`** (column option): Provides a screen-reader-accessible label for column headers that have no textual content.
 - **`cellLabel`** (column option): Returns a descriptive `aria-label` for cells whose visual content is not self-explanatory.
 
-The example also includes the [useAnnounceEmptyCells](?path=/docs/data-display-analyticaltable-plugin-hooks--docs#announce-empty-cells) plugin hook, which adds explicit empty-cell announcements for screen readers that do not detect them on their own. As this could lead to duplicate screen reader announcement, use with caution.
+**Note:**
+
+- The example also includes the [useAnnounceEmptyCells](?path=/docs/data-display-analyticaltable-plugin-hooks--docs#announce-empty-cells) plugin hook, which adds explicit empty-cell announcements for screen readers that do not detect them on their own. As this could lead to duplicate screen reader announcement, use with caution.
+- When the `header` prop is set, its text is automatically used as the table's accessible name. To provide a different accessible name, use `accessibleName` or `accessibleNameRef` instead.
 
 <Canvas of={ComponentStories.Accessibility}/>
 
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 4eb88eac5b6..d644f64abde 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -766,7 +766,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * Component or text rendered in the header section of the `AnalyticalTable`.
    *
-   * __Note:__ If not set, it will be hidden.
+   * __Note:__ If not set, the header section is not rendered. When set, its text is automatically used as the table's accessible name. To provide a different accessible name, use `accessibleName` or `accessibleNameRef` instead.
    */
   header?: ReactNode;
   /**