fix(AnalyticalTable): add tooltip to header selection-cell (#5081)

Author: Lukas742

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

@@ -1,4 +1,3 @@
-import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { AnalyticalTablePropTypes } from '../..';
@@ -14,6 +13,7 @@ import {
 import { AnalyticalTableSelectionMode, AnalyticalTableVisibleRowCountMode, ValueState } from '../../enums/index.js';
 import { useManualRowSelect } from './pluginHooks/useManualRowSelect';
 import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
+import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 const generateMoreData = (count) => {
   return new Array(count).fill('').map((item, index) => ({
@@ -1990,8 +1990,12 @@ describe('AnalyticalTable', () => {
       );
     };
     cy.mount(<TestComp />);
-    cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click();
+    cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]')
+      .as('selAll')
+      .should('have.attr', 'title', 'Select All')
+      .click();
     cy.get('@selectSpy').should('have.been.calledOnce');
+    cy.get('@selAll').should('have.attr', 'title', 'Deselect All');
     cy.findByTestId('payload').should(
       'have.text',
       '{"selectedRowIds":{"0":true,"1":true,"2":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"}],"allRowsSelected":true}'
@@ -2002,13 +2006,13 @@ describe('AnalyticalTable', () => {
       'have.text',
       '{"selectedRowIds":{"0":true,"1":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"3"}],"allRowsSelected":false}'
     );
-    cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click();
+    cy.get('@selAll').should('have.attr', 'title', 'Select All').click();
     cy.get('@selectSpy').should('have.been.calledThrice');
     cy.findByTestId('payload').should(
       'have.text',
       '{"selectedRowIds":{"0":true,"1":true,"2":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"}],"allRowsSelected":true}'
     );
-    cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click();
+    cy.get('@selAll').click();
     cy.get('@selectSpy').should('have.callCount', 4);
     cy.findByTestId('payload').should(
       'have.text',

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

@@ -51,6 +51,7 @@ export interface ColumnHeaderProps {
   column: ColumnType;
   role: string;
   isFiltered?: boolean;
+  title?: string;
   ['aria-sort']?: AriaAttributes['aria-sort'];
   ['aria-label']?: AriaAttributes['aria-label'];
 }
@@ -142,6 +143,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     portalContainer,
     scaleXFactor,
     isFiltered,
+    title,
     'aria-label': ariaLabel,
     'aria-sort': ariaSort,
     showVerticalEndBorder
@@ -260,6 +262,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
         onKeyUp={handleHeaderCellKeyUp}
         aria-label={ariaLabel}
         aria-sort={ariaSort}
+        title={title}
       >
         <div className={classes.header} data-h-align={column.hAlign}>
           <Text

packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

@@ -59,7 +59,11 @@ function getNextSelectedRowIds(rowsById) {
 const headerProps = (props, { instance }) => {
   const {
     flatRows,
-    webComponentsReactProperties: { onRowSelect, selectionMode },
+    webComponentsReactProperties: {
+      onRowSelect,
+      selectionMode,
+      translatableTexts: { selectAllText, deselectAllText }
+    },
     toggleAllRowsSelected,
     isAllRowsSelected,
     rowsById,
@@ -96,8 +100,7 @@ const headerProps = (props, { instance }) => {
         onClick(e);
       }
     };
-
-    return [props, { onClick, onKeyDown, style }];
+    return [props, { onClick, onKeyDown, style, title: isAllRowsSelected ? deselectAllText : selectAllText }];
   }
   return props;
 };
@@ -171,11 +174,11 @@ const getCellProps = (props, { cell }) => {
 
 const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
   const { classes } = webComponentsReactProperties;
-  return [props, { className: classes.checkBox }];
+  return [props, { className: classes.checkBox, title: undefined }];
 };
 const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
   const { classes } = webComponentsReactProperties;
-  return [props, { className: classes.checkBox }];
+  return [props, { className: classes.checkBox, title: undefined }];
 };
 
 export const useRowSelectionColumn = (hooks) => {

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

@@ -53,7 +53,9 @@ import {
   GROUPED,
   INVALID_TABLE,
   SELECT_PRESS_SPACE,
-  UNSELECT_PRESS_SPACE
+  UNSELECT_PRESS_SPACE,
+  SELECT_ALL,
+  DESELECT_ALL
 } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -733,6 +735,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
       sortTypes: sortTypesFallback,
       webComponentsReactProperties: {
         translatableTexts: {
+          selectAllText: i18nBundle.getText(SELECT_ALL),
+          deselectAllText: i18nBundle.getText(DESELECT_ALL),
           expandA11yText: i18nBundle.getText(EXPAND_PRESS_SPACE),
           collapseA11yText: i18nBundle.getText(COLLAPSE_PRESS_SPACE),
           selectA11yText: i18nBundle.getText(SELECT_PRESS_SPACE),

packages/main/src/i18n/messagebundle.properties

@@ -244,7 +244,7 @@ COLLAPSE_PRESS_SPACE=To collapse the row, press the spacebar
 SELECT_PRESS_SPACE=To select the row, press the spacebar
 
 #XACT: Aria label text for selectable table cells in selected state
-UNSELECT_PRESS_SPACE=To unselect the row, press the spacebar
+UNSELECT_PRESS_SPACE=To deselect the row, press the spacebar
 
 #XACT: Aria label text for an invalid table with overlay
 INVALID_TABLE=Invalid Table
@@ -281,3 +281,9 @@ INDICATION_COLOR=Indication Color
 
 #XACT: Invisible text for ObjectStatus empty value
 EMPTY_VALUE=Empty Value
+
+#XACT: Tooltip for unselected "Select All" checkbox of table
+SELECT_ALL=Select All
+
+#XACT: Tooltip for selected "Select All" checkbox of table
+DESELECT_ALL=Deselect All