refactor useAnnounceEmptyCells

Author: Lukas742

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { ARIA_LABEL_EMPTY_CELL } from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js';
 import {
   debounce,
   enrichEventWithDetails,
@@ -204,13 +205,15 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
 
   const uniqueId = useId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  const i18nBundleWc = useI18nBundle('@ui5/webcomponents');
   const titleBarId = `titlebar-${uniqueId}`;
   const invalidTableTextId = `invalidTableText-${uniqueId}`;
 
   const cellSelectDescId = `cell-select-${uniqueId}`;
   const cellUnselectDescId = `cell-unselect-${uniqueId}`;
   const cellExpandDescId = `cell-expand-${uniqueId}`;
   const cellCollapseDescId = `cell-collapse-${uniqueId}`;
+  const cellEmptyDescId = `cell-empty-${uniqueId}`;
 
   const tableRef = useRef<DivWithCustomScrollProp>(null);
   const parentRef = useRef<DivWithCustomScrollProp>(null);
@@ -252,6 +255,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           cellUnselectDescId,
           cellExpandDescId,
           cellCollapseDescId,
+          cellEmptyDescId,
         },
         translatableTexts: {
           selectAllText: i18nBundle.getText(SELECT_ALL),
@@ -932,6 +936,10 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
       <span id={cellCollapseDescId} className={classNames.hiddenA11yText}>
         {i18nBundle.getText(COLLAPSE_PRESS_SPACE)}
       </span>
+      {/* useAnnounceEmptyCells */}
+      <span id={cellEmptyDescId} className={classNames.hiddenA11yText}>
+        {i18nBundleWc.getText(ARIA_LABEL_EMPTY_CELL)}
+      </span>
     </>
   );
 });

packages/main/src/components/AnalyticalTable/pluginHooks/useAnnounceEmptyCells.ts

@@ -1,25 +1,30 @@
-import { ARIA_LABEL_EMPTY_CELL } from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js';
-import { useI18nBundle } from '@ui5/webcomponents-react-base';
 import { useCallback } from 'react';
-import type { ReactTableHooks } from '../types/index.js';
+import type { CellType, ReactTableHooks, TableInstance } from '../types/index.js';
 
 /**
  * The `useAnnounceEmptyCells` plugin hook adds screen reader announcements for empty cells.
  *
  * **Note:** Some screen readers (depending on their configuration) automatically detect empty cells, potentially resulting in duplicate announcements of empty cells.
  */
 export const useAnnounceEmptyCells = (hooks: ReactTableHooks) => {
-  const i18nBundleWc = useI18nBundle('@ui5/webcomponents');
-  const emptyCellLabel = i18nBundleWc.getText(ARIA_LABEL_EMPTY_CELL);
-
   const setCellProps = useCallback(
-    (cellProps, { cell: { value } }) => {
+    (
+      cellProps,
+      {
+        cell: { value },
+        instance: {
+          webComponentsReactProperties: {
+            a11yElementIds: { cellEmptyDescId },
+          },
+        },
+      }: { cell: CellType; instance: TableInstance },
+    ) => {
       if (typeof value !== 'number' && !value) {
-        return [cellProps, { 'aria-label': `${cellProps['aria-label']} ${emptyCellLabel}` }];
+        return [cellProps, { 'aria-labelledby': `${cellProps['aria-labelledby']} ${cellEmptyDescId}` }];
       }
       return cellProps;
     },
-    [emptyCellLabel],
+    [],
   );
 
   hooks.getCellProps.push(setCellProps);

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

@@ -222,6 +222,7 @@ export interface WCRPropertiesType {
     cellUnselectDescId: string;
     cellExpandDescId: string;
     cellCollapseDescId: string;
+    cellEmptyDescId: string;
   };
   translatableTexts: {
     selectAllText: string;