From 800ab81e095cb2fa0fa53770a47b52df9705ba6a Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
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 (
-    <CheckBox
-      {...checkBoxProps}
-      style={customCheckBoxStyling}
-      tabIndex={-1}
-      onChange={undefined}
-      checked={checkBoxProps.indeterminate ? true : checkBoxProps.checked}
-      aria-hidden="true"
-    />
+    <>
+      <CheckBox
+        {...checkBoxProps}
+        style={customCheckBoxStyling}
+        tabIndex={-1}
+        onChange={undefined}
+        checked={checkBoxProps.indeterminate ? true : checkBoxProps.checked}
+        aria-hidden="true"
+      />
+      <span className={classes.hiddenA11yText}>{translatableTexts.selectAllText}</span>
+    </>
   );
 };
 
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 21ca02d9af1..c3167df736a 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -44,7 +44,9 @@ import {
   NO_DATA_FILTERED,
   SELECT_ALL,
   SELECT_PRESS_SPACE,
-  UNSELECT_PRESS_SPACE
+  UNSELECT_PRESS_SPACE,
+  SELECT_ALL_PRESS_SPACE,
+  UNSELECT_ALL_PRESS_SPACE
 } from '../../i18n/i18n-defaults.js';
 import { BusyIndicator } from '../../webComponents/BusyIndicator/index.js';
 import { Text } from '../../webComponents/Text/index.js';
@@ -202,7 +204,9 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           expandNodeA11yText: i18nBundle.getText(EXPAND_NODE),
           collapseNodeA11yText: i18nBundle.getText(COLLAPSE_NODE),
           filteredA11yText: i18nBundle.getText(FILTERED),
-          groupedA11yText: i18nBundle.getText(GROUPED)
+          groupedA11yText: i18nBundle.getText(GROUPED),
+          selectAllA11yText: i18nBundle.getText(SELECT_ALL_PRESS_SPACE),
+          deselectAllA11yText: i18nBundle.getText(UNSELECT_ALL_PRESS_SPACE)
         },
         tagNamesWhichShouldNotSelectARow,
         tableRef,
@@ -740,6 +744,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             aria-rowcount={rows.length}
             aria-colcount={visibleColumns.length}
             data-per-page={internalVisibleRowCount}
+            aria-multiselectable={selectionMode === AnalyticalTableSelectionMode.Multiple}
             data-component-name="AnalyticalTableContainer"
             ref={tableRef}
             className={tableClasses}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index d2d1459fba5..d651b88f5ff 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -252,6 +252,12 @@ 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 deselect the row, press the spacebar
 
+#XACT: Aria label for unselected select-all checkbox cell inside a table
+SELECT_ALL_PRESS_SPACE=To select all rows, press the spacebar.
+
+#XACT: Aria label for selected select-all checkbox cell inside a table
+UNSELECT_ALL_PRESS_SPACE=To deselect all rows, press the spacebar.
+
 #XACT: Aria label text for an invalid table with overlay
 INVALID_TABLE=Invalid Table
 

From e8c475a2fea88d98ccccc1f075726b926306a573 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 25 Sep 2024 16:04:32 +0200
Subject: [PATCH 2/3] update `translatableTexts` types

---
 packages/main/src/components/AnalyticalTable/types/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 43b062d4287..be399559d6f 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -172,6 +172,8 @@ export interface WCRPropertiesType {
     collapseNodeA11yText: string;
     filteredA11yText: string;
     groupedA11yText: string;
+    selectAllA11yText: string;
+    deselectAllA11yText: string;
   };
   tagNamesWhichShouldNotSelectARow: Set<string>;
   tableRef: MutableRefObject<DivWithCustomScrollProp>;

From 74cb1e3ff713f97e5ba56f61c6f42b08d2ac43f6 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 25 Sep 2024 16:50:29 +0200
Subject: [PATCH 3/3] concat `aria-label`s

---
 packages/main/src/components/AnalyticalTable/hooks/useA11y.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
index f36a9a21355..4b521881bb4 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useA11y.ts
@@ -82,6 +82,7 @@ const setHeaderProps = (
 
   const updatedProps = {};
   updatedProps['aria-label'] = column.headerLabel ??= '';
+
   if (updatedProps['aria-label']) {
     updatedProps['aria-label'] += ' ';
   }
@@ -101,7 +102,7 @@ const setHeaderProps = (
   }
 
   if (selectionMode === AnalyticalTableSelectionMode.Multiple && column.id === '__ui5wcr__internal_selection_column') {
-    updatedProps['aria-label'] = instance.isAllRowsSelected
+    updatedProps['aria-label'] += instance.isAllRowsSelected
       ? translatableTexts.deselectAllA11yText
       : translatableTexts.selectAllA11yText;
   }