DataGrid - NVDA reads all status messages on page load when multiple components are rendered (T1288423) (#29890)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/accessibility/bugs.ts

@@ -9,6 +9,7 @@ fixture`Accessibility bugs`
 test('T1187314 - DataGrid displays an incorrect row count in "aria-label" if there is no data after filtering', async (t) => {
   const dataGrid = new DataGrid('#container');
 
+  await dataGrid.apiFilter(['id', '=', '1']);
   await t
     .expect(dataGrid.getContainer().getAttribute('aria-label'))
     .eql('Data grid with 0 rows and 2 columns');
@@ -19,7 +20,6 @@ test('T1187314 - DataGrid displays an incorrect row count in "aria-label" if the
     data: 'A',
   }],
   filterRow: { visible: true },
-  filterValue: ['id', '=', '1'],
   scrolling: { mode: 'infinite' },
 }));
 

e2e/testcafe-devextreme/tests/dataGrid/accessibility/status.ts

@@ -27,7 +27,7 @@ const DATA_SOURCE = [
 ];
 
 test('Accessibility: DataGrid general status should contains correct text', async (t) => {
-  const expectedStatusText = 'Data grid with 3 rows and 2 columns';
+  const expectedStatusText = '';
   const dataGrid = new DataGrid('#container');
 
   const statusText = await dataGrid.getGeneralStatusContainer().textContent;

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -1218,6 +1218,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
   public updateItems(change?, isDataChanged?) {
     change = change || {};
     const that = this;
+    change.isFirstRender = !that.changed.fired();
 
     if (that._repaintChangesOnly !== undefined) {
       change.repaintChangesOnly = change.repaintChangesOnly ?? that._repaintChangesOnly;

packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts

@@ -136,7 +136,7 @@ export class ResizingController extends modules.ViewController {
 
         if (needFireContentReady) {
           when(resizeDeferred).done(() => {
-            this._setAriaLabel();
+            this._setAriaLabel(e);
             this.fireContentReadyAction();
           });
         }
@@ -194,17 +194,29 @@ export class ResizingController extends modules.ViewController {
     return 'dxDataGrid-ariaDataGrid';
   }
 
-  private _setAriaLabel(): void {
-    const columnCount = this._columnsController?._columns?.filter(({ visible }) => !!visible).length ?? 0;
-    const totalItemsCount = Math.max(0, this._dataController.totalItemsCount());
-    const widgetAriaLabel = this._getWidgetAriaLabel();
-    const widgetStatusText = messageLocalization
+  private _setAriaLabel(e?: any): void {
+    let widgetStatusText = '';
+    let labelParts: string[] = [];
+
+    if (!e?.isFirstRender) {
+      const columnCount = this._columnsController?._columns?.filter(({ visible }) => !!visible).length ?? 0;
+      const totalItemsCount = Math.max(0, this._dataController.totalItemsCount());
+      const widgetAriaLabel = this._getWidgetAriaLabel();
+      widgetStatusText = messageLocalization
       // @ts-expect-error Badly typed format method
-      .format(widgetAriaLabel, totalItemsCount, columnCount);
-    // @ts-expect-error Badly typed dxElementWrapper
+        .format(widgetAriaLabel, totalItemsCount, columnCount);
+
+      // @ts-expect-error Treelist Variable
+      const expandableWidgetAriaLabel = messageLocalization.format(this._expandableWidgetAriaId);
+      labelParts = [widgetStatusText];
+      if (expandableWidgetAriaLabel) {
+        labelParts.push(expandableWidgetAriaLabel);
+      }
+    }
+    // @ts-expect-error
     const $ariaLabelElement = this.component.$element().children(`.${GRIDBASE_CONTAINER_CLASS}`);
 
-    this.component.setAria('label', widgetStatusText, $ariaLabelElement);
+    this.component.setAria('label', labelParts.join('. '), $ariaLabelElement);
     this._gridView.setWidgetA11yStatusText(widgetStatusText);
   }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js

@@ -3789,6 +3789,7 @@ QUnit.module('Virtual rendering', { beforeEach: setupVirtualRenderingModule, aft
             isLiveUpdate: true,
             repaintChangesOnly: true,
             needUpdateDimensions: true,
+            isFirstRender: false,
             changeTypes: [
                 'remove',
                 'remove',
@@ -4062,6 +4063,7 @@ QUnit.module('Virtual rendering', { beforeEach: setupVirtualRenderingModule, aft
         assert.deepEqual(this.changedArgs, [{
             changeType: 'refresh',
             isDataChanged: true,
+            isFirstRender: false,
             repaintChangesOnly: false,
             items: this.dataController.items(),
             needUpdateDimensions: true,
@@ -4088,6 +4090,7 @@ QUnit.module('Virtual rendering', { beforeEach: setupVirtualRenderingModule, aft
         assert.deepEqual(this.changedArgs, [{
             changeType: 'refresh',
             isDataChanged: true,
+            isFirstRender: false,
             needUpdateDimensions: true,
             repaintChangesOnly: false,
             items: this.dataController.items(),

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js

@@ -173,7 +173,8 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         assert.equal(filterRowWrapper.getTextEditorInput(1).attr('aria-describedby'), headersWrapper.getHeaderItem(0, 4).attr('id'));
 
         assert.equal(dataGridWrapper.getElement().find('.dx-datagrid').attr('role'), 'group', 'group role');
-        assert.equal(dataGridWrapper.getElement().find('.dx-datagrid').attr('aria-label'), 'Data grid with 2 rows and 4 columns', 'aria-label of the datagrid container');
+        // T1288423
+        assert.equal(dataGridWrapper.getElement().find('.dx-datagrid').attr('aria-label'), '', 'aria-label of the datagrid container');
         assert.equal(headersWrapper.getElement().attr('role'), 'presentation', 'Headers role');
         assert.equal(headersWrapper.getColumnsIndicators().attr('role'), 'presentation', 'Headers columns indicators role');
         assert.equal($('.dx-datagrid-scroll-container').attr('role'), 'presentation', 'Scroll container role');