Globalize demo - fix accessibility labels

apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html

@@ -1,5 +1,8 @@
 <div id="data-grid-demo">
-  <dx-data-grid [dataSource]="payments">
+  <dx-data-grid
+    [dataSource]="payments"
+    (onEditorPreparing)="onEditorPreparing($event)"
+  >
     <dxi-data-grid-column
       dataField="PaymentId"
       [caption]="formatMessage('Number')"

apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { DxSelectBoxModule, DxDataGridModule } from 'devextreme-angular';
+import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
 
 import 'devextreme/common/core/localization/globalize/number';
 import 'devextreme/common/core/localization/globalize/date';
@@ -64,6 +65,12 @@ export class AppComponent {
     Globalize.loadMessages(this.service.getDictionary());
   }
 
+  onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) {
+    if (e.dataField === 'Amount' && e.parentType === 'filterRow') {
+      e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' };
+    }
+  }
+
   changeLocale(data) {
     this.setLocale(data.value);
     parent.document.location.reload();

apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid';
+import DataGrid, {
+  Column, Editing, FilterRow, type DataGridTypes,
+} from 'devextreme-react/data-grid';
 import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
 
 import 'devextreme/common/core/localization/globalize/number';
@@ -26,6 +28,11 @@ const amountEditorOptions = {
   format: 'currency',
   showClearButton: true,
 };
+const onEditorPreparing = (e: DataGridTypes.EditorPreparingEvent) => {
+  if (e.dataField === 'Amount' && e.parentType === 'filterRow') {
+    e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' };
+  }
+};
 const selectBoxInputAttr = { id: 'selectInput' };
 
 Globalize.load(
@@ -54,6 +61,7 @@ const App = () => {
       <DataGrid
         dataSource={payments}
         keyExpr="PaymentId"
+        onEditorPreparing={onEditorPreparing}
       >
         <Editing
           mode="popup"

apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js

@@ -21,6 +21,11 @@ const amountEditorOptions = {
   format: 'currency',
   showClearButton: true,
 };
+const onEditorPreparing = (e) => {
+  if (e.dataField === 'Amount' && e.parentType === 'filterRow') {
+    e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' };
+  }
+};
 const selectBoxInputAttr = { id: 'selectInput' };
 Globalize.load(deCldrData, ruCldrData, supplementalCldrData);
 Globalize.loadMessages(deMessages);
@@ -44,6 +49,7 @@ const App = () => {
       <DataGrid
         dataSource={payments}
         keyExpr="PaymentId"
+        onEditorPreparing={onEditorPreparing}
       >
         <Editing
           mode="popup"

apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue

@@ -3,6 +3,7 @@
     <DxDataGrid
       :data-source="payments"
       key-expr="PaymentId"
+      @editor-preparing="onEditorPreparing"
     >
       <DxEditing
         :allow-updating="true"
@@ -60,7 +61,7 @@
 <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue';
 import {
-  DxDataGrid, DxColumn, DxEditing, DxFilterRow,
+  DxDataGrid, DxColumn, DxEditing, DxFilterRow, type DxDataGridTypes,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import 'devextreme/common/core/localization/globalize/number';
@@ -80,7 +81,10 @@ const locales: { Name: string, Value: Locale }[] = service.getLocales();
 const payments: Record<string, string | number>[] = service.getPayments();
 const locale: Locale = getLocale();
 const editPopupOptions = { width: 700, height: 345 };
-const amountEditorOptions = { format: 'currency', showClearButton: true };
+const amountEditorOptions = {
+  format: 'currency',
+  showClearButton: true,
+};
 const selectBoxInputAttr = { id: 'selectInput' };
 const formatMessage = ref((msg: string) => msg);
 
@@ -109,6 +113,12 @@ function initGlobalize() {
   formatMessage.value = Globalize.formatMessage.bind(Globalize);
 }
 
+function onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) {
+  if (e.dataField === 'Amount' && e.parentType === 'filterRow') {
+    e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' };
+  }
+}
+
 function changeLocale({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   setLocale(value);
   document.location.reload();

apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js

@@ -72,6 +72,11 @@ $(() => {
         height: 345,
       },
     },
+    onEditorPreparing: (e) => {
+      if (e.dataField === 'Amount' && e.parentType === 'filterRow') {
+        e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' };
+      }
+    },
   };
 
   const selectBoxOptions = {

apps/demos/testing/common.test.ts

@@ -75,9 +75,6 @@ const getIgnoredRules = (testName) => {
   }
 
   const specificRules = {
-    'DataGrid-EditStateManagement': ['aria-required-parent'],
-    'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'],
-
     'Diagram-Adaptability': ['aria-dialog-name', 'label'],
     'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'],
     'Diagram-Containers': ['aria-dialog-name', 'label'],