chore: Remove selectionGroupLabel from table's selection controls (#3492)

Co-authored-by: Johannes Weber <[email protected]>

Author: johannes-weber

src/s3-resource-selector/s3-modal/__tests__/buckets-table.test.tsx

@@ -32,7 +32,7 @@ function findRefreshButton(wrapper: TableWrapper) {
 
 test('Renders correct aria-labels', async () => {
   const wrapper = await renderTable(<BucketsTable {...defaultProps} />);
-  expect(wrapper.findRowSelectionArea(1)!.getElement()).toHaveAttribute('aria-label', 'Buckets select bucket-laborum');
+  expect(wrapper.findRowSelectionArea(1)!.getElement()).toHaveAttribute('aria-label', 'select bucket-laborum');
   expect(wrapper.findTextFilter()!.findInput().findNativeInput().getElement()).toHaveAttribute(
     'aria-label',
     'Find Buckets'

src/s3-resource-selector/s3-modal/__tests__/objects-table.test.tsx

@@ -134,10 +134,7 @@ test('uses I18nProvider for folder and file icons', async () => {
 
 test('Renders selection labels', async () => {
   const wrapper = await renderTable(<ObjectsTable {...defaultProps} />);
-  expect(wrapper.findRowSelectionArea(1)!.getElement()).toHaveAttribute(
-    'aria-label',
-    'Objects select simulation-nano-2019'
-  );
+  expect(wrapper.findRowSelectionArea(1)!.getElement()).toHaveAttribute('aria-label', 'select simulation-nano-2019');
 });
 
 test('allows selecting an object', async () => {

src/s3-resource-selector/s3-modal/__tests__/versions-table.test.tsx

@@ -65,7 +65,7 @@ test('Renders selection labels', async () => {
   const wrapper = await renderTable(<VersionsTable {...defaultProps} />);
   expect(wrapper.findRowSelectionArea(1)!.getElement()).toHaveAttribute(
     'aria-label',
-    'Versions select 6036589969ec3d9b2db8faa7'
+    'select 6036589969ec3d9b2db8faa7'
   );
 });
 

src/table/__tests__/selection.test.tsx

@@ -83,10 +83,7 @@ describe('Selection controls` labelling', () => {
 
   test('puts selectionGroupLabel and allItemsSelectionLabel on selectAll checkbox', () => {
     tableWrapper = renderTable({ selectionType: 'multi', selectedItems: [items[0]], ariaLabels }).wrapper;
-    expect(tableWrapper.findSelectAllTrigger()?.getElement()).toHaveAttribute(
-      'aria-label',
-      'group label 1 item selected'
-    );
+    expect(tableWrapper.findSelectAllTrigger()?.getElement()).toHaveAttribute('aria-label', '1 item selected');
   });
 
   test('puts selectionGroupLabel on single selection column header', () => {
@@ -108,15 +105,26 @@ describe('Selection controls` labelling', () => {
       tableWrapper = renderTable({ selectionType, ariaLabels, selectedItems: [items[1]] }).wrapper;
       expect(tableWrapper.findRowSelectionArea(1)?.getElement()).toHaveAttribute(
         'aria-label',
-        'group label Apples is not selected'
-      );
-      expect(tableWrapper.findRowSelectionArea(2)?.getElement()).toHaveAttribute(
-        'aria-label',
-        'group label Oranges is selected'
+        'Apples is not selected'
       );
+      expect(tableWrapper.findRowSelectionArea(2)?.getElement()).toHaveAttribute('aria-label', 'Oranges is selected');
       expect(tableWrapper.findRowSelectionArea(3)?.getElement()).toHaveAttribute(
         'aria-label',
-        'group label Bananas is not selected'
+        'Bananas is not selected'
+      );
+    });
+
+    test('does not put selectionGroupLabel on row selection control', () => {
+      tableWrapper = renderTable({ selectionType, ariaLabels, selectedItems: [items[1]] }).wrapper;
+
+      expect(tableWrapper.findRowSelectionArea(1)!.getElement().getAttribute('aria-label')).toEqual(
+        expect.not.stringContaining('group label')
+      );
+      expect(tableWrapper.findRowSelectionArea(2)!.getElement().getAttribute('aria-label')).toEqual(
+        expect.not.stringContaining('group label')
+      );
+      expect(tableWrapper.findRowSelectionArea(3)!.getElement().getAttribute('aria-label')).toEqual(
+        expect.not.stringContaining('group label')
       );
     });
   });

src/table/internal.tsx

@@ -303,7 +303,11 @@ const InternalTable = React.forwardRef(
       selectionType,
       isItemDisabled,
       onSelectionChange,
-      ariaLabels,
+      ariaLabels: {
+        ...ariaLabels,
+        // `selectionGroupLabel` should not be part of the selection control, it is already part of the selection column header.
+        selectionGroupLabel: undefined,
+      },
       loading,
       setLastUserAction,
     });