fix(AnalyticalTable): announce select-all cell for screen readers (#6408)

Fixes #6209

Author: Lukas742

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(

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;
@@ -82,6 +82,7 @@ const setHeaderProps = (
 
   const updatedProps = {};
   updatedProps['aria-label'] = column.headerLabel ??= '';
+
   if (updatedProps['aria-label']) {
     updatedProps['aria-label'] += ' ';
   }
@@ -100,6 +101,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 }];
 };
 

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

@@ -17,22 +17,25 @@ const customCheckBoxStyling = {
 const Header = (instance: TableInstance) => {
   const {
     getToggleAllRowsSelectedProps,
-    webComponentsReactProperties: { selectionMode }
+    webComponentsReactProperties: { selectionMode, translatableTexts, classes }
   } = instance;
 
   if (selectionMode === AnalyticalTableSelectionMode.Single) {
     return null;
   }
   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>
+    </>
   );
 };
 

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}

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>;

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