fix(table): update row selection aria

adobe · Oct 24, 2023 · 6c8c706 · 6c8c706
1 parent bbcea4a
commit 6c8c706
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/table/src/TableRow.ts b/packages/table/src/TableRow.ts
@@ -78,6 +78,16 @@ export class TableRow extends SpectrumElement {
 
     protected async manageSelected(): Promise<void> {
         await this.updateComplete;
+        // Manage differently when parent table does not have `role="grid"`.
+        // See: https://github.com/adobe/spectrum-web-components/issues/3397 and https://github.com/adobe/spectrum-web-components/issues/3395
+        if (this.selectable) {
+            this.setAttribute(
+                'aria-selected',
+                this.selected ? 'true' : 'false'
+            );
+        } else {
+            this.removeAttribute('aria-selected');
+        }
         const [checkboxCell] = this.checkboxCells;
         if (!checkboxCell) return;
         checkboxCell.checked = this.selected;

diff --git a/packages/table/test/table-selects.test.ts b/packages/table/test/table-selects.test.ts
@@ -120,6 +120,7 @@ describe('Table Selects', () => {
 
         expect(rowTwoCheckbox.checked).to.be.false;
         expect(rowTwo.selected).to.be.false;
+        expect(rowTwo.getAttribute('aria-selected')).to.equal('false');
         expect(el.selected.length).to.equal(0);
     });
     it('ignores unexpected `change` events', async () => {
@@ -172,6 +173,8 @@ describe('Table Selects', () => {
             'sp-table-checkbox-cell'
         ) as TableCheckboxCell;
 
+        expect(rowTwo.getAttribute('aria-selected')).to.equal('false');
+
         const rowThree = el.querySelector('.row3') as TableRow;
         const rowThreeCheckbox = rowThree.querySelector(
             'sp-table-checkbox-cell'
@@ -182,6 +185,7 @@ describe('Table Selects', () => {
 
         expect(rowTwoCheckbox.checked).to.be.true;
         expect(el.selected).to.deep.equal(['row2']);
+        expect(rowTwo.getAttribute('aria-selected')).to.equal('true');
 
         rowThreeCheckbox.checkbox.click();
         await elementUpdated(el);