fix(table): Add aria-rowcount to virtualized tables (#4156)

* fix: aria-rowcount on table * fix: add explanatory comment * fix: cleanup logic and explanatory comment * chore: code review clean up --------- Co-authored-by: davidx <[email protected]> Co-authored-by: Westbrook Johnson <[email protected]>
adobe · Mar 20, 2024 · b4136ab · b4136ab
1 parent c450a09
commit b4136ab
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/table/src/Table.ts b/packages/table/src/Table.ts
@@ -471,6 +471,8 @@ export class Table extends SizedMixin(SpectrumElement, {
     protected override updated(): void {
         if (this.items.length) {
             this.renderVirtualizedItems();
+        } else {
+            this.removeAttribute('aria-rowcount');
         }
     }
 
@@ -507,6 +509,11 @@ export class Table extends SizedMixin(SpectrumElement, {
                 }
             );
         }
+
+        // Ensures screenreaders can announce the true size of the table
+        // despite virtualization only rendering a subset of rows.
+        this.setAttribute('aria-rowcount', `${this.items.length}`);
+
         const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {
             items: this.items,
             renderItem: this.renderItem,

diff --git a/packages/table/stories/table-virtualized.stories.ts b/packages/table/stories/table-virtualized.stories.ts
@@ -97,7 +97,6 @@ class VirtualTable extends SpectrumElement {
     protected override render(): TemplateResult {
         return html`
             <sp-table
-                aria-rowcount="50"
                 .items=${this.items}
                 .renderItem=${renderItem}
                 size="m"