Table: make checkbox aria-labels stay the same regardless of checkbox state (#2596)

Author: shleewhite

.changeset/lovely-goats-work.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Table` - fixed the aria-labels for select row and select all checkboxes so they do not change based on the state of the checkbox.

packages/components/src/components/hds/table/th-selectable.ts

@@ -57,13 +57,8 @@ export default class HdsTableThSelectable extends Component<HdsTableThSelectable
   }
 
   get ariaLabel(): string {
-    const { selectionAriaLabelSuffix } = this.args;
-    const prefix = this.isSelected ? 'Deselect' : 'Select';
-    if (selectionAriaLabelSuffix) {
-      return `${prefix} ${selectionAriaLabelSuffix}`;
-    } else {
-      return prefix;
-    }
+    const { selectionAriaLabelSuffix = 'row' } = this.args;
+    return `Select ${selectionAriaLabelSuffix}`;
   }
 
   get ariaSort(): HdsTableThSortOrderLabels | undefined {

showcase/tests/integration/components/hds/table/index-test.js

@@ -606,7 +606,36 @@ module('Integration | Component | hds/table/index', function (hooks) {
 
   // aria-labels
 
-  test('it renders the expected `aria-label` values for "select all" and rows (based on provided suffix)', async function (assert) {
+  test('it renders the expected `aria-label` values for "select all" and rows by default', async function (assert) {
+    setSelectableTableData(this);
+    await render(hbs`
+      <Hds::Table
+        @isSelectable={{true}}
+        @model={{this.model}}
+        @columns={{this.columns}}
+        id="data-test-selectable-table"
+      >
+        <:body as |B|>
+          <B.Tr @selectionKey={{B.data.id}}>
+            <B.Td>{{B.data.artist}}</B.Td>
+            <B.Td>{{B.data.album}}</B.Td>
+            <B.Td>{{B.data.year}}</B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+    `);
+
+    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
+    assert.dom(rowCheckboxesSelector).hasAria('label', 'Select row');
+
+    await click(selectAllCheckboxSelector);
+    await click(rowCheckboxesSelector);
+
+    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
+    assert.dom(rowCheckboxesSelector).hasAria('label', 'Select row');
+  });
+
+  test('it renders the expected `aria-label` for rows with `@selectionAriaLabelSuffix`', async function (assert) {
     setSelectableTableData(this);
     await render(hbs`
       <Hds::Table
@@ -627,31 +656,11 @@ module('Integration | Component | hds/table/index', function (hooks) {
         </:body>
       </Hds::Table>
     `);
-    const rowCheckboxes = this.element.querySelectorAll(rowCheckboxesSelector);
-    const firstRowCheckbox = rowCheckboxes[0];
-    const secondRowCheckbox = rowCheckboxes[1];
 
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
     assert.dom(rowCheckboxesSelector).hasAria('label', 'Select custom suffix');
-    await click(firstRowCheckbox);
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
-    assert.dom(firstRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    assert.dom(secondRowCheckbox).hasAria('label', 'Select custom suffix');
-    await click(selectAllCheckboxSelector);
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Deselect all rows');
-    assert.dom(firstRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    assert.dom(secondRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    await click(secondRowCheckbox);
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
-    assert.dom(firstRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    assert.dom(secondRowCheckbox).hasAria('label', 'Select custom suffix');
-    await click(secondRowCheckbox);
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Deselect all rows');
-    assert.dom(firstRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    assert.dom(secondRowCheckbox).hasAria('label', 'Deselect custom suffix');
-    await click(selectAllCheckboxSelector);
-    assert.dom(selectAllCheckboxSelector).hasAria('label', 'Select all rows');
-    assert.dom(firstRowCheckbox).hasAria('label', 'Select custom suffix');
-    assert.dom(secondRowCheckbox).hasAria('label', 'Select custom suffix');
+
+    await click(rowCheckboxesSelector);
+
+    assert.dom(rowCheckboxesSelector).hasAria('label', 'Select custom suffix');
   });
 });

showcase/tests/integration/components/hds/table/tr-test.js

@@ -49,10 +49,6 @@ module('Integration | Component | hds/table/tr', function (hooks) {
       hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" />`
     );
     assert.dom(checkboxSelector).hasAria('label', 'Select row 123');
-    await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @isSelected={{true}} @selectionAriaLabelSuffix="row 123" />`
-    );
-    assert.dom(checkboxSelector).hasAria('label', 'Deselect row 123');
   });
 
   test('the `th` element has the correct `scope` attribute value provided via `@selectionScope`', async function (assert) {