fix(AnalyticalTable): improve accessibility

Author: Lukas742

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

@@ -66,7 +66,7 @@ const kitchenSinkArgs: AnalyticalTablePropTypes = {
     },
     {
       Header: () => <span>Friend Age</span>,
-      headerLabel: 'Friend Age',
+      headerLabel: 'Custom Header Label',
       accessor: 'friend.age',
       autoResizable: true,
       hAlign: TextAlign.End,
@@ -130,7 +130,7 @@ const kitchenSinkArgs: AnalyticalTablePropTypes = {
         return `${cell.cellLabel} press TAB to focus active elements inside this cell`;
       },
     },
-  ],
+  ].slice(0, 2),
   filterable: true,
   alternateRowColor: true,
   columnOrder: ['friend.name', 'friend.age', 'name'],
@@ -195,6 +195,7 @@ const meta = {
     visibleRows: 5,
     // sb actions has a huge impact on performance here.
     onTableScroll: undefined,
+    header: 'TableTitle',
   },
   argTypes: {
     data: { control: { disable: true } },

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

@@ -200,6 +200,8 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
           borderInlineStart: dragOver ? `3px solid ${ThemingParameters.sapSelectedColor}` : undefined,
         }}
         aria-haspopup={hasPopover ? 'menu' : undefined}
+        aria-expanded={hasPopover ? (popoverOpen ? 'true' : 'false') : undefined}
+        aria-controls={hasPopover ? `${id}-popover` : undefined}
         role={role}
         draggable={isDraggable}
         onDragEnter={onDragEnter}
@@ -278,6 +280,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
           // render the popover and add the props to the table instance
           column.render(RenderColumnTypes.Popover, {
             popoverProps: {
+              id: `${id}-popover`,
               openerRef: columnHeaderRef,
               setOpen: setPopoverOpen,
             },

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

@@ -11,11 +11,18 @@ export const Cell = (props: CellInstance) => {
   if (isGrouped) {
     cellContent += ` (${row.subRows.length})`;
   }
+
   return (
     <span
       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
+      aria-hidden="true"
     >
       {cellContent}
     </span>

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

@@ -34,7 +34,7 @@ import type { TableInstanceWithPopoverProps } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
 export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
-  const { setOpen, openerRef } = instance.popoverProps;
+  const { setOpen, openerRef, id } = instance.popoverProps;
   const { column, state, webComponentsReactProperties } = instance;
   const { isRtl, groupBy } = state;
   const { onGroup, onSort, classes: classNames } = webComponentsReactProperties;
@@ -174,10 +174,11 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
         ref.current.open = true;
       });
     }
-  }, []);
+  }, [openerRef]);
 
   return (
     <Popover
+      id={id}
       hideArrow
       horizontalAlign={horizontalAlign}
       placement={PopoverPlacement.Bottom}

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

@@ -5,18 +5,26 @@ import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 interface UpdatedCellProptypes {
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-  'aria-expanded'?: string | boolean;
+  'aria-expanded'?: string;
   'aria-label'?: string;
   'aria-colindex'?: number;
+  'aria-describedby'?: string;
   role?: string;
 }
 
 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, translatableTexts, selectionMode, selectionBehavior } =
+  const { alwaysShowSubComponent, renderRowSubComponent, selectionMode, selectionBehavior, a11yElementIds, uniqueId } =
     instance.webComponentsReactProperties;
-  const updatedCellProps: UpdatedCellProptypes = { 'aria-colindex': columnIndex + 1, role: 'gridcell' }; // aria index is 1 based, not 0
+  const updatedCellProps: UpdatedCellProptypes = {
+    // aria index is 1 based, not 0
+    'aria-colindex': columnIndex + 1,
+    role: 'gridcell',
+    // header label
+    'aria-describedby': `${uniqueId}${column.id}`,
+    'aria-label': '',
+  };
 
   const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
   const rowIsExpandable = row.canExpand || (RowSubComponent && !alwaysShowSubComponent);
@@ -30,24 +38,17 @@ const setCellProps = (cellProps, { cell, instance }: { cell: TableInstance['cell
 
   const isFirstUserCol = userCols[0]?.id === column.id || userCols[0]?.accessor === column.accessor;
   updatedCellProps['data-is-first-column'] = isFirstUserCol;
-  updatedCellProps['aria-label'] = column.headerLabel || (typeof column.Header === 'string' ? column.Header : '');
-  updatedCellProps['aria-label'] &&= `${updatedCellProps['aria-label']} `;
   updatedCellProps['aria-label'] += value || value === 0 ? `${value} ` : '';
 
   if ((isFirstUserCol && rowIsExpandable) || (row.isGrouped && row.canExpand)) {
     updatedCellProps.onKeyDown = row.getToggleRowExpandedProps?.()?.onKeyDown;
-    let ariaLabel = '';
-    if (row.isGrouped) {
-      ariaLabel += translatableTexts.groupedA11yText + ',';
-    }
     if (row.isExpanded) {
       updatedCellProps['aria-expanded'] = 'true';
-      ariaLabel += ` ${translatableTexts.collapseA11yText}`;
+      updatedCellProps['aria-describedby'] += ' ' + a11yElementIds.cellCollapseDescId;
     } else {
       updatedCellProps['aria-expanded'] = 'false';
-      ariaLabel += ` ${translatableTexts.expandA11yText}`;
+      updatedCellProps['aria-describedby'] += ' ' + a11yElementIds.cellExpandDescId;
     }
-    updatedCellProps['aria-label'] += ariaLabel;
   } else if (
     (selectionMode !== AnalyticalTableSelectionMode.None &&
       selectionBehavior !== AnalyticalTableSelectionBehavior.RowSelector &&
@@ -56,16 +57,18 @@ const setCellProps = (cellProps, { cell, instance }: { cell: TableInstance['cell
   ) {
     if (row.isSelected) {
       updatedCellProps['aria-selected'] = 'true';
-      updatedCellProps['aria-label'] += ` ${translatableTexts.unselectA11yText}`;
+      updatedCellProps['aria-describedby'] = ' ' + a11yElementIds.cellUnselectDescId;
     } else {
       updatedCellProps['aria-selected'] = 'false';
-      updatedCellProps['aria-label'] += ` ${translatableTexts.selectA11yText}`;
+      updatedCellProps['aria-describedby'] = ' ' + a11yElementIds.cellSelectDescId;
     }
   }
   const { cellLabel } = cell.column;
   if (typeof cellLabel === 'function') {
-    cell.cellLabel = updatedCellProps['aria-label'];
+    cell.cellLabel = '';
     updatedCellProps['aria-label'] = cellLabel({ cell, instance });
+  } else {
+    updatedCellProps['aria-label'] ||= undefined;
   }
   return [cellProps, updatedCellProps];
 };
@@ -108,6 +111,20 @@ const setHeaderProps = (
       : translatableTexts.selectAllA11yText;
   }
 
+  if (column.id === '__ui5wcr__internal_selection_column') {
+    updatedProps['aria-label'] += translatableTexts.selectionHeaderCellText;
+  }
+
+  if (column.id === '__ui5wcr__internal_highlight_column') {
+    updatedProps['aria-label'] += translatableTexts.highlightHeaderCellText;
+  }
+
+  if (column.id === '__ui5wcr__internal_navigation_column') {
+    updatedProps['aria-label'] += translatableTexts.navigationHeaderCellText;
+  }
+
+  updatedProps['aria-label'] ||= undefined;
+
   return [headerProps, { isFiltered, ...updatedProps }];
 };