From 800ab81e095cb2fa0fa53770a47b52df9705ba6a Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 25 Sep 2024 15:58:46 +0200 Subject: [PATCH 1/3] fix(AnalyticalTable): announce select-all cell for screen readers --- .../AnalyticalTable/AnalyticalTable.cy.tsx | 6 ++++++ .../AnalyticalTable/hooks/useA11y.ts | 8 ++++++- .../hooks/useRowSelectionColumn.tsx | 21 +++++++++++-------- .../src/components/AnalyticalTable/index.tsx | 9 ++++++-- .../main/src/i18n/messagebundle.properties | 6 ++++++ 5 files changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index 4d76a5fab07..a4b3e3bf3b6 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -2455,7 +2455,13 @@ describe('AnalyticalTable', () => { cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]') .as('selAll') .should('have.attr', 'title', 'Select All') + .and('have.attr', 'aria-label', 'To select all rows, press the spacebar.') .click(); + + cy.get('@selAll').should('have.text', 'Select All'); + cy.get('@selAll').contains('Select All').should('not.be.visible'); + cy.get('@selAll').should('have.attr', 'aria-label', 'To deselect all rows, press the spacebar.'); + cy.get('@selectSpy').should('have.been.calledOnce'); cy.get('@selAll').should('have.attr', 'title', 'Deselect All'); cy.findByTestId('payload').should( diff --git a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts index 9754074d8c4..f36a9a21355 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts @@ -73,7 +73,7 @@ const setHeaderProps = ( headerProps, { column, instance }: { column: TableInstance['column']; instance: TableInstance } ) => { - const { translatableTexts } = instance.webComponentsReactProperties; + const { translatableTexts, selectionMode } = instance.webComponentsReactProperties; if (!column) { return headerProps; @@ -100,6 +100,12 @@ const setHeaderProps = ( } } + if (selectionMode === AnalyticalTableSelectionMode.Multiple && column.id === '__ui5wcr__internal_selection_column') { + updatedProps['aria-label'] = instance.isAllRowsSelected + ? translatableTexts.deselectAllA11yText + : translatableTexts.selectAllA11yText; + } + return [headerProps, { isFiltered, ...updatedProps }]; }; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx index 5e40b52d5b4..83e28db7cfa 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx +++ b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx @@ -17,7 +17,7 @@ const customCheckBoxStyling = { const Header = (instance: TableInstance) => { const { getToggleAllRowsSelectedProps, - webComponentsReactProperties: { selectionMode } + webComponentsReactProperties: { selectionMode, translatableTexts, classes } } = instance; if (selectionMode === AnalyticalTableSelectionMode.Single) { @@ -25,14 +25,17 @@ const Header = (instance: TableInstance) => { } const checkBoxProps = getToggleAllRowsSelectedProps(); return ( -