fix(AnalyticalTable): improve accessibility (#7181)

Lukas742 · web-flow · commit 8d652b4c7297 · 2025-04-07T10:52:56.000+02:00
This PR i.a. improves accessibility for tree tables, but also adds general a11y improvements. __Note:__ To prevent flooding the console with warnings, translations for the "expand/collapse row" announcement will be added once they are available. Fixes #6515 Fixes #7147
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -1,5 +1,6 @@
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js';
+import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
@@ -236,18 +237,28 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
             data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
           >
             {isFiltered && (
-              <Icon design={IconDesign.NonInteractive} name={iconFilter} aria-hidden className={classNames.icon} />
+              <Icon
+                design={IconDesign.NonInteractive}
+                name={iconFilter}
+                className={classNames.icon}
+                mode={IconMode.Decorative}
+              />
             )}
             {column.isSorted && (
               <Icon
                 design={IconDesign.NonInteractive}
                 name={column.isSortedDesc ? iconSortDescending : iconSortAscending}
-                aria-hidden
                 className={classNames.icon}
+                mode={IconMode.Decorative}
               />
             )}
             {column.isGrouped && (
-              <Icon design={IconDesign.NonInteractive} name={iconGroup} aria-hidden className={classNames.icon} />
+              <Icon
+                design={IconDesign.NonInteractive}
+                name={iconGroup}
+                className={classNames.icon}
+                mode={IconMode.Decorative}
+              />
             )}
           </div>
         </div>
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -143,7 +143,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
                     key={`${visibleRowIndex}-${emptyRowCellProps.key}`}
                     data-empty-row-cell="true"
                     tabIndex={-1}
-                    aria-hidden
+                    aria-hidden="true"
                     style={{ ...emptyRowCellProps.style, cursor: 'unset', width: item.size }}
                   />
                 );
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx
@@ -123,6 +123,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
       }}
       data-component-name="AnalyticalTableBody"
       tabIndex={-1}
+      role="rowgroup"
     >
       {isMounted && children}
     </div>
diff --git a/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx b/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx
@@ -147,6 +147,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
 
   return (
     <div
+      aria-hidden="true"
       className={classNames.verticalResizerContainer}
       ref={verticalResizerRef}
       onMouseDown={handleResizeStart}
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
@@ -1,3 +1,4 @@
+import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
 import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
@@ -218,7 +219,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
               <Icon
                 name={iconFilter}
                 className={classNames.filterIcon}
-                aria-hidden
+                mode={IconMode.Decorative}
                 style={{
                   minWidth: filterStyles.iconDimensions,
                   minHeight: filterStyles.iconDimensions
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -4,7 +4,11 @@ import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arro
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import { CssSizeVariables, useCurrentTheme } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import { Button, Icon } from '../../../../webComponents/index.js';
+import type { FocusEvent } from 'react';
+import type { ButtonDomRef } from '../../../../webComponents/Button/index.js';
+import { Button } from '../../../../webComponents/Button/index.js';
+import { Icon } from '../../../../webComponents/Icon/index.js';
+import type { ColumnType, RowType, WCRPropertiesType } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
 const getPadding = (level) => {
@@ -22,7 +26,15 @@ const getPadding = (level) => {
   }
 };
 
-export const Expandable = (props) => {
+interface ExpandableProps {
+  cell: Record<string, any>;
+  row: RowType;
+  column: ColumnType;
+  visibleColumns: ColumnType[];
+  webComponentsReactProperties: WCRPropertiesType;
+}
+
+export const Expandable = (props: ExpandableProps) => {
   const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
   const {
     renderRowSubComponent,
@@ -55,24 +67,37 @@ export const Expandable = (props) => {
               title={row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText}
               style={{ ...rowProps.style, paddingInlineStart: paddingLeft }}
               className={classNames.container}
-              aria-label={row.isExpanded ? translatableTexts.collapseA11yText : translatableTexts.expandA11yText}
             >
               {shouldRenderButton ? (
                 <Button
                   tabIndex={-1}
                   icon={row.isExpanded ? iconNavDownArrow : iconNavRightArrow}
                   design={ButtonDesign.Transparent}
-                  onClick={rowProps.onClick}
                   className={classNames.button}
+                  onClick={rowProps.onClick}
+                  accessibilityAttributes={{ expanded: row.isExpanded, hasPopup: false, controls: undefined }}
+                  onFocus={(e: FocusEvent<ButtonDomRef>) => {
+                    e.target.accessibleName = row.isExpanded
+                      ? translatableTexts.collapseNodeA11yText
+                      : translatableTexts.expandNodeA11yText;
+                  }}
+                  onBlur={(e: FocusEvent<ButtonDomRef>) => {
+                    e.target.accessibleName = '';
+                  }}
                 />
               ) : (
                 <Icon
+                  aria-hidden="true"
                   tabIndex={-1}
                   onClick={rowProps.onClick}
                   mode={IconMode.Interactive}
                   name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow}
+                  aria-expanded={`${row.isExpanded}`}
                   data-component-name="AnalyticalTableExpandIcon"
                   className={classNames.expandableIcon}
+                  accessibleName={
+                    row.isExpanded ? translatableTexts.collapseNodeA11yText : translatableTexts.expandNodeA11yText
+                  }
                 />
               )}
             </span>
@@ -84,6 +109,14 @@ export const Expandable = (props) => {
                 classNames.nonExpandableCellSpacer,
                 shouldRenderButton && classNames.withExpandableButton
               )}
+              onFocus={(e: FocusEvent<ButtonDomRef>) => {
+                e.target.accessibleName = row.isExpanded
+                  ? translatableTexts.collapseNodeA11yText
+                  : translatableTexts.expandNodeA11yText;
+              }}
+              onBlur={(e: FocusEvent<ButtonDomRef>) => {
+                e.target.accessibleName = '';
+              }}
             />
           )}
         </>
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useResizeColumnsConfig.ts b/packages/main/src/components/AnalyticalTable/hooks/useResizeColumnsConfig.ts
@@ -1,9 +1,11 @@
+import type { MouseEvent } from 'react';
 import type { ReactTableHooks } from '../types/index.js';
 
 const useGetResizerProps = (props) => {
   return {
     ...props,
-    onMouseDown: (e) => {
+    'aria-hidden': 'true',
+    onMouseDown: (e: MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
       props.onMouseDown(e);
     }
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
@@ -1,13 +1,20 @@
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
+import { debounce, enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
+// debounce announce to prevent excessive successive announcements
+const debouncedAnnounce = debounce((announcement: string) => {
+  announce(announcement, 'Polite');
+}, 200);
+
 const getToggleRowExpandedProps = (
   rowProps,
   { row, instance, userProps }: { row: RowType; instance: TableInstance; userProps: Record<string, any> }
 ) => {
   const { manualGroupBy } = instance;
-  const { onRowExpandChange, isTreeTable, renderRowSubComponent, alwaysShowSubComponent } =
+  const { onRowExpandChange, isTreeTable, renderRowSubComponent, alwaysShowSubComponent, translatableTexts } =
     instance.webComponentsReactProperties;
+
   const onClick = (e, noPropagation = true) => {
     if (noPropagation) {
       e.stopPropagation();
@@ -30,6 +37,11 @@ const getToggleRowExpandedProps = (
       );
     }
     row.toggleRowExpanded();
+    // cannot use ROW_X_COLLAPSED/ROW_X_EXPANDED here,
+    // as retrieving the index of the row is not easily possible here and has performance implications
+    debouncedAnnounce(
+      !row.isExpanded ? translatableTexts.rowExpandedAnnouncementText : translatableTexts.rowCollapsedAnnouncementText
+    );
   };
   const onKeyDown = (e) => {
     if (e.code === 'F4') {
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -209,7 +209,12 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           filteredA11yText: i18nBundle.getText(FILTERED),
           groupedA11yText: i18nBundle.getText(GROUPED),
           selectAllA11yText: i18nBundle.getText(SELECT_ALL_PRESS_SPACE),
-          deselectAllA11yText: i18nBundle.getText(UNSELECT_ALL_PRESS_SPACE)
+          deselectAllA11yText: i18nBundle.getText(UNSELECT_ALL_PRESS_SPACE),
+          //todo: use translations once they are available
+          // rowExpandedAnnouncementText: i18nBundle.getText(ROW_EXPANDED),
+          // rowCollapsedAnnouncementText: i18nBundle.getText(ROW_COLLAPSED)
+          rowExpandedAnnouncementText: 'Row expanded',
+          rowCollapsedAnnouncementText: 'Row collapsed'
         },
         alternateRowColor,
         alwaysShowSubComponent,
@@ -734,7 +739,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/}
           {showOverlay && (
             <>
-              <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
+              <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden="true">
                 {invalidTableA11yText}
               </span>
               <div
@@ -750,7 +755,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             aria-labelledby={titleBarId}
             {...getTableProps()}
             tabIndex={loading || showOverlay ? -1 : 0}
-            role="grid"
+            role={isTreeTable ? 'treegrid' : 'grid'}
             aria-rowcount={rows.length}
             aria-colcount={visibleColumns.length}
             data-per-page={internalVisibleRowCount}
@@ -759,8 +764,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             ref={tableRef}
             className={tableClasses}
           >
-            <div className={classNames.tableHeaderBackgroundElement} />
-            <div className={classNames.tableBodyBackgroundElement} />
+            <div className={classNames.tableHeaderBackgroundElement} aria-hidden="true" />
+            <div className={classNames.tableBodyBackgroundElement} aria-hidden="true" />
             {headerGroups.map((headerGroup) => {
               let headerProps: Record<string, unknown> = {};
               if (headerGroup.getHeaderGroupProps) {
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -207,6 +207,8 @@ export interface WCRPropertiesType {
     groupedA11yText: string;
     selectAllA11yText: string;
     deselectAllA11yText: string;
+    rowExpandedAnnouncementText: string;
+    rowCollapsedAnnouncementText: string;
   };
   tagNamesWhichShouldNotSelectARow: Set<string>;
   tableRef: MutableRefObject<DivWithCustomScrollProp>;
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -246,6 +246,18 @@ EXPAND_PRESS_SPACE=To expand the row, press the spacebar.
 #XACT: Aria label text for expandable table cells in expanded state
 COLLAPSE_PRESS_SPACE=To collapse the row, press the spacebar.
 
+#XACT: general ARIA live announcement for expanded row
+ROW_EXPANDED=Row expanded
+
+#XACT: general ARIA live announcement for collapsed row
+ROW_COLLAPSED=Row collapsed
+
+#XACT: ARIA live announcement for expanded row number {0}
+ROW_X_EXPANDED=Row {0} expanded
+
+#XACT: ARIA live announcement for collapsed row number {0}
+ROW_X_COLLAPSED=Row {0} collapsed
+
 #XACT: Aria label text for selectable table cells in unselected state
 SELECT_PRESS_SPACE=To select the row, press the spacebar.
 

Original file line number	Diff line number	Diff line change
`@@ -123,6 +123,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)`
`123`	`123`	`}}`
`124`	`124`	`data-component-name="AnalyticalTableBody"`
`125`	`125`	`tabIndex={-1}`
	`126`	`+ role="rowgroup"`
`126`	`127`	`>`
`127`	`128`	`{isMounted && children}`
`128`	`129`	`</div>`