From c8b024ce5b3dc4198999901ee3481cae2648c18f Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 17 Oct 2025 13:20:32 +0200
Subject: [PATCH 1/2] fix(AnalyticalTable): improve a11y for expand-group
 button

---
 .../AnalyticalTable.module.css                | 13 ++++++++++
 .../AnalyticalTable/defaults/Column/Cell.tsx  |  2 ++
 .../defaults/Column/Grouped.tsx               | 26 +++++++++----------
 .../defaults/Column/RepeatedValue.tsx         |  2 ++
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index 835e90ed22c..c853e2318b1 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -208,6 +208,19 @@
   }
 }
 
+.expandGroupButton {
+  all: unset;
+  display: inline;
+}
+
+.expandGroupIcon {
+  color: var(--sapContent_IconColor);
+  height: 0.75rem;
+  width: 0.75rem;
+  padding: 0.625rem;
+  display: block;
+}
+
 .tableText {
   display: inline-block;
   font-size: var(--sapFontSize);
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
index 2e3d5206c39..006da6ff629 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx
@@ -21,3 +21,5 @@ export const Cell = (props: CellInstance) => {
     </span>
   );
 };
+
+Cell.displayName = 'CellContent';
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
index c6ec701d4c1..215ce2aa6d1 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx
@@ -1,36 +1,36 @@
 import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
+import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { TextAlign } from '../../../../enums/TextAlign.js';
 import { Icon } from '../../../../webComponents/Icon/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
-const tableGroupExpandCollapseIcon = {
-  color: 'var(--sapContent_IconColor)',
-  height: '0.75rem',
-  width: '0.75rem',
-  padding: '0.625rem',
-  display: 'block',
-};
-
 export const Grouped = (props) => {
   const { cell, row, webComponentsReactProperties } = props;
-  const { translatableTexts } = webComponentsReactProperties;
+  const { translatableTexts, classes } = webComponentsReactProperties;
 
   const style: CSSProperties = {};
   if (cell.column.hAlign && (cell.column.hAlign !== TextAlign.Left || cell.column.hAlign !== TextAlign.Begin)) {
     style.marginRight = 'auto';
   }
 
+  const { column: _0, ...attr } = row.getToggleRowExpandedProps({ style, column: cell.column });
+
   return (
     <>
-      <span
-        {...row.getToggleRowExpandedProps({ style, column: cell.column })}
+      <button
+        {...attr}
+        className={clsx(attr.className, classes.expandGroupButton)}
         title={row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText}
+        aria-label={row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText}
+        tabIndex={-1}
       >
-        <Icon name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow} style={tableGroupExpandCollapseIcon} />
-      </span>
+        <Icon name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow} className={classes.expandGroupIcon} />
+      </button>
       {cell.render(RenderColumnTypes.Cell)}
     </>
   );
 };
+
+Grouped.displayName = 'GroupedCellContent';
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
index 8d7e77dcfc3..507afb0e021 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
@@ -1 +1,3 @@
 export const RepeatedValue = () => null;
+
+RepeatedValue.displayName = 'DummyRepeatedValueCellContent';

From 2292e673cd0aeac7064d50a223ea9c0d92357d2c Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 20 Oct 2025 15:42:09 +0200
Subject: [PATCH 2/2] Update RepeatedValue.tsx

---
 .../AnalyticalTable/defaults/Column/RepeatedValue.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
index 507afb0e021..845fb4310f7 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/RepeatedValue.tsx
@@ -1,3 +1,3 @@
 export const RepeatedValue = () => null;
 
-RepeatedValue.displayName = 'DummyRepeatedValueCellContent';
+RepeatedValue.displayName = 'RepeatedValueCellContent';