feat: add accessibleName property to Grid

packages/grid/src/vaadin-grid-mixin.d.ts

@@ -199,6 +199,12 @@ export interface GridMixinClass<TItem>
    */
   allRowsVisible: boolean;
 
+  /**
+   * String used to label the grid to screen reader users.
+   * @attr {string} accessible-name
+   */
+  accessibleName: string;
+
   /**
    * Updates the `width` of all columns which have `autoWidth` set to `true`.
    */

packages/grid/src/vaadin-grid-mixin.js

@@ -144,6 +144,14 @@ export const GridMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * String used to label the grid to screen reader users.
+         * @attr {string} accessible-name
+         */
+        accessibleName: {
+          type: String,
+        },
+
         /** @private */
         __pendingRecalculateColumnWidths: {
           type: Boolean,

packages/grid/src/vaadin-grid.js

@@ -274,7 +274,7 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerE
         column-reordering-allowed$="[[columnReorderingAllowed]]"
         empty-state$="[[__emptyState]]"
       >
-        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
+        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0" aria-label="[[accessibleName]]">
           <caption id="sizer" part="row"></caption>
           <thead id="header" role="rowgroup"></thead>
           <tbody id="items" role="rowgroup"></tbody>

packages/grid/src/vaadin-lit-grid.js

@@ -5,6 +5,7 @@
  */
 import './vaadin-lit-grid-column.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { isIOS, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -42,7 +43,13 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)
         column-reordering-allowed="${this.columnReorderingAllowed}"
         ?empty-state="${this.__emptyState}"
       >
-        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
+        <table
+          id="table"
+          role="treegrid"
+          aria-multiselectable="true"
+          tabindex="0"
+          aria-label="${ifDefined(this.accessibleName)}"
+        >
           <caption id="sizer" part="row"></caption>
           <thead id="header" role="rowgroup"></thead>
           <tbody id="items" role="rowgroup"></tbody>

packages/grid/test/accessibility.common.js

@@ -359,4 +359,33 @@ describe('accessibility', () => {
       });
     });
   });
+
+  describe('accessibleName', () => {
+    it('should not define aria-label on the table when accessibleName is not set', async () => {
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-label')).to.be.null;
+    });
+
+    it('should define aria-label on the table when accessibleName is set', async () => {
+      grid.accessibleName = 'Grid accessible name';
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-label')).to.equal('Grid accessible name');
+    });
+
+    it('should update aria-label on the table when accessibleName is updated', async () => {
+      grid.accessibleName = 'Grid accessible name';
+      await nextFrame();
+      grid.accessibleName = 'Updated accessible name';
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-label')).to.equal('Updated accessible name');
+    });
+
+    it('should remove aria-label on the table when accessibleName is removed', async () => {
+      grid.accessibleName = 'Grid accessible name';
+      await nextFrame();
+      grid.accessibleName = null;
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-label')).to.be.null;
+    });
+  });
 });