Merge branch 'main' into chore/release-please-migration

Author: Lukas742

package.json

@@ -52,8 +52,8 @@
     "@ui5/webcomponents-compat": "2.22.0",
     "@ui5/webcomponents-fiori": "2.22.0",
     "@ui5/webcomponents-icons": "2.22.0",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "remark-gfm": "4.0.1",
     "storybook": "10.4.1",
     "tocbot": "4.36.8"

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -3253,6 +3253,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(`[id="${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 }>({});

packages/main/src/components/AnalyticalTable/docs/AnalyticalTable.mdx

@@ -549,6 +549,22 @@ function ContextMenuExample() {
 
 </details>
 
+## Accessibility
+
+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.
+
+**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}/>
+
 ## 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.

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,
 };

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,
@@ -794,15 +796,16 @@ 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}
               />
             </>
           )}
           <div
-            aria-labelledby={titleBarId}
+            aria-label={accessibleName}
+            aria-labelledby={accessibleNameRef ?? (header && !accessibleName ? titleBarId : undefined)}
             {...getTableProps()}
             tabIndex={loading || showOverlay ? -1 : 0}
             role={isTreeTable ? 'treegrid' : 'grid'}

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) {

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -766,9 +766,21 @@ 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;
+  /**
+   * 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
    */

packages/mcp-server/package.json

@@ -53,6 +53,6 @@
     "@ui5/webcomponents-react": "workspace:~",
     "ava": "8.0.1",
     "react-docgen-typescript": "2.4.0",
-    "tsx": "4.22.3"
+    "tsx": "4.22.4"
   }
 }

yarn.lock

@@ -5987,7 +5987,7 @@ __metadata:
     "@ui5/webcomponents-react": "workspace:~"
     ava: "npm:8.0.1"
     react-docgen-typescript: "npm:2.4.0"
-    tsx: "npm:4.22.3"
+    tsx: "npm:4.22.4"
     zod: "npm:4.4.3"
   bin:
     ui5-wcr-mcp: ./dist/index.js
@@ -19534,14 +19534,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.2.6, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
-  version: 19.2.6
-  resolution: "react-dom@npm:19.2.6"
+"react-dom@npm:19.2.7, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.2.7
+  resolution: "react-dom@npm:19.2.7"
   dependencies:
     scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^19.2.6
-  checksum: 10c0/dbf2aef67857c03a612bc9316a4562e5066f43fa04bf28f7f0734963fc1350da2c9f8eb973930655453281079f30cc8222bab383dbec4b5097084e2c081e3334
+    react: ^19.2.7
+  checksum: 10c0/970ff600f6e80d47d39e2f226f12f226173b3cba3382efc97c5f0cd663de9af38c7a4c11c213fb936094faeac83060d660247accaa96b752180d5b951b9cfecb
   languageName: node
   linkType: hard
 
@@ -19595,10 +19595,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:19.2.6, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
-  version: 19.2.6
-  resolution: "react@npm:19.2.6"
-  checksum: 10c0/66afde33b9a9ee87b1e1cae39d8e7e040d1262e719524fd70660c4d4ce79929c532ac19fc3df5a911edaf02768fdf2c49de4ede1ba99bc6aad72796e0e26e798
+"react@npm:19.2.7, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.2.7
+  resolution: "react@npm:19.2.7"
+  checksum: 10c0/0bd0e2f1bbd4ba97561c6597bf8a5fec05e6476fe61e165c1065598d16668efc6715205599c94d3ddd49d36cb0f21cbf1b9bcc18ee840b805ce222c3e8d558ac
   languageName: node
   linkType: hard
 
@@ -22007,9 +22007,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsx@npm:4.22.3":
-  version: 4.22.3
-  resolution: "tsx@npm:4.22.3"
+"tsx@npm:4.22.4":
+  version: 4.22.4
+  resolution: "tsx@npm:4.22.4"
   dependencies:
     esbuild: "npm:~0.28.0"
     fsevents: "npm:~2.3.3"
@@ -22018,7 +22018,7 @@ __metadata:
       optional: true
   bin:
     tsx: dist/cli.mjs
-  checksum: 10c0/09a5a7d354ff75e5af6285217d709ec80a46c2ee19e0d9b5c5d00eab81047c3ea6b2a5498a2c5255f3960d6e7acd1a1eee34b9433dc56fb32907ca3b38271f41
+  checksum: 10c0/3df31eb4929ff501b40b122163705b201ea57a492581e14312ae95d21eb015b33ded46a3fd564f9c89a0e8083186987fc4f10dd38182c4ad6241605974f6c927
   languageName: node
   linkType: hard
 
@@ -22344,8 +22344,8 @@ __metadata:
     postcss-modules: "npm:6.0.1"
     prettier: "npm:3.8.3"
     publint: "npm:0.3.21"
-    react: "npm:19.2.6"
-    react-dom: "npm:19.2.6"
+    react: "npm:19.2.7"
+    react-dom: "npm:19.2.7"
     remark-gfm: "npm:4.0.1"
     rimraf: "npm:6.1.3"
     storybook: "npm:10.4.1"