add ios workaround

Author: Lukas742

packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx

@@ -18,11 +18,7 @@ export const Cell = (props: CellInstance) => {
       title={cellContent}
       className={webComponentsReactProperties.classes.tableText}
       data-column-id-cell-text={column.id}
-      //todo: VoiceOver announces blank because of `aria-hidden` although `aria-label` is set on the `gridcell` element - this is a known bug and there's no workaround
-      // options:
-      // - remove it and accept duplicate announcements
-      // - keep it and accept blank announcements
-      // - remove it and don't add the aria-label on the focused cell, which will lead to the `cellContent` being announced last
+      // VoiceOver announces blank because of `aria-hidden` although `aria-labelledby` is set on the `gridcell` element - this is a known bug and there's no workaround
       aria-hidden="true"
     >
       {cellContent}

packages/main/src/components/AnalyticalTable/hooks/useA11y.ts

@@ -16,14 +16,22 @@ interface UpdatedCellProptypes {
 const setCellProps = (cellProps, { cell, instance }: { cell: TableInstance['cell']; instance: TableInstance }) => {
   const { column, row, value } = cell;
   const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id);
-  const { alwaysShowSubComponent, renderRowSubComponent, selectionMode, selectionBehavior, a11yElementIds, uniqueId } =
-    instance.webComponentsReactProperties;
+  const {
+    alwaysShowSubComponent,
+    renderRowSubComponent,
+    selectionMode,
+    selectionBehavior,
+    a11yElementIds,
+    uniqueId,
+    canUseVoiceOver,
+  } = instance.webComponentsReactProperties;
+
   const updatedCellProps: UpdatedCellProptypes = {
     // aria index is 1 based, not 0
     'aria-colindex': columnIndex + 1,
     role: 'gridcell',
     // header label
-    'aria-labelledby': `${uniqueId}${column.id} ${uniqueId}${column.id}${row.id}`,
+    'aria-labelledby': `${uniqueId}${column.id}${row.id}` + (canUseVoiceOver ? ` ${uniqueId}${column.id}` : ''),
   };
 
   const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;

packages/main/src/components/AnalyticalTable/hooks/useCanUseVoiceOver.ts

@@ -0,0 +1,15 @@
+import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
+import { useEffect, useState } from 'react';
+
+/**
+ * SSR ready check for macOS or iOS (Apple VoiceOver support).
+ */
+export function useCanUseVoiceOver() {
+  const [canUseVoiceOver, setCanUseVoiceOver] = useState(false);
+
+  useEffect(() => {
+    setCanUseVoiceOver(isIOS() || isMac());
+  }, []);
+
+  return canUseVoiceOver;
+}

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

@@ -63,6 +63,7 @@ import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder.j
 import { DefaultNoDataComponent } from './defaults/NoDataComponent/index.js';
 import { useA11y } from './hooks/useA11y.js';
 import { useAutoResize } from './hooks/useAutoResize.js';
+import { useCanUseVoiceOver } from './hooks/useCanUseVoiceOver.js';
 import { useColumnsDeps } from './hooks/useColumnsDeps.js';
 import { useColumnDragAndDrop } from './hooks/useDragAndDrop.js';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths.js';
@@ -195,6 +196,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
   const isInitialized = useRef(false);
   const fontsReady = useFontsReady();
   const isFirefox = useIsFirefox();
+  const canUseVoiceOver = useCanUseVoiceOver();
 
   const alwaysShowSubComponent =
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.Visible ||
@@ -268,6 +270,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         },
         alternateRowColor,
         alwaysShowSubComponent,
+        canUseVoiceOver,
         classes: classNames,
         fontsReady,
         highlightField,

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

@@ -212,7 +212,9 @@ export interface TableInstance {
 }
 
 export interface WCRPropertiesType {
+  canUseVoiceOver: boolean;
   fontsReady: boolean;
+  isFirefox: boolean;
   selectionMode: AnalyticalTablePropTypes['selectionMode'];
   onRowSelect?: AnalyticalTablePropTypes['onRowSelect'];
   a11yElementIds: {