diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 5a9927bda59..4523f1f261e 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/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();
- 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',
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index bb2d66e4e26..59790afc338 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/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}
>
{
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) => {
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index b17a809e0c4..ad6bacdccf4 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/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