From 343dd2cb52d9342d74285032d2046734364f2d84 Mon Sep 17 00:00:00 2001 From: Andrei_Ser Date: Tue, 6 Oct 2026 16:28:10 +0400 Subject: [PATCH 1/4] aria label filter editor --- .../UsingGlobalize/Angular/app/app.component.html | 3 ++- .../demos/Demos/Localization/UsingGlobalize/React/App.tsx | 3 +++ .../Demos/Localization/UsingGlobalize/ReactJs/App.js | 3 +++ apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue | 8 +++++++- .../Demos/Localization/UsingGlobalize/jQuery/index.js | 3 +++ 5 files changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html index 26f65dfe2564..815880776be1 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html +++ b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html @@ -24,7 +24,8 @@ format="currency" [editorOptions]="{ format: 'currency', - showClearButton: true + showClearButton: true, + inputAttr: { 'aria-label': 'Filter cell' } }" > diff --git a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx b/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx index e2eff476ca86..815f2bb6c7e8 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx +++ b/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx @@ -25,6 +25,9 @@ const editPopupOptions = { const amountEditorOptions = { format: 'currency', showClearButton: true, + inputAttr: { + 'aria-label': 'Filter cell', + }, }; const selectBoxInputAttr = { id: 'selectInput' }; diff --git a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js index a12bb22397d2..8a9f2a64b08d 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js +++ b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js @@ -20,6 +20,9 @@ const editPopupOptions = { const amountEditorOptions = { format: 'currency', showClearButton: true, + inputAttr: { + 'aria-label': 'Filter cell', + }, }; const selectBoxInputAttr = { id: 'selectInput' }; Globalize.load(deCldrData, ruCldrData, supplementalCldrData); diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue index 54401acad567..0576d170eef3 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue +++ b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue @@ -80,7 +80,13 @@ const locales: { Name: string, Value: Locale }[] = service.getLocales(); const payments: Record[] = service.getPayments(); const locale: Locale = getLocale(); const editPopupOptions = { width: 700, height: 345 }; -const amountEditorOptions = { format: 'currency', showClearButton: true }; +const amountEditorOptions = { + format: 'currency', + showClearButton: true, + inputAttr: { + 'aria-label': 'Filter cell', + }, +}; const selectBoxInputAttr = { id: 'selectInput' }; const formatMessage = ref((msg: string) => msg); diff --git a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js index 6ac5bb3734be..12a634306dfa 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js +++ b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js @@ -54,6 +54,9 @@ $(() => { editorOptions: { format: 'currency', showClearButton: true, + inputAttr: { + 'aria-label': 'Filter cell', + }, }, }, { dataField: 'PaymentDate', From 82f660552d37791f612c552bf758b5d9daa8f73d Mon Sep 17 00:00:00 2001 From: Andrei_Ser Date: Tue, 6 Oct 2026 16:40:35 +0400 Subject: [PATCH 2/4] del redundant rules --- apps/demos/testing/common.test.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts index 192deec511ad..b911f22461f7 100644 --- a/apps/demos/testing/common.test.ts +++ b/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'], From 37f45bd24bc44ab0e3c94e325fecdf5ac3a3f960 Mon Sep 17 00:00:00 2001 From: Andrei_Ser Date: Tue, 6 Oct 2026 18:24:02 +0400 Subject: [PATCH 3/4] filter-row specific attr --- .../UsingGlobalize/Angular/app/app.component.html | 8 +++++--- .../UsingGlobalize/Angular/app/app.component.ts | 7 +++++++ .../Demos/Localization/UsingGlobalize/React/App.tsx | 13 +++++++++---- .../Localization/UsingGlobalize/ReactJs/App.js | 9 ++++++--- .../Demos/Localization/UsingGlobalize/Vue/App.vue | 12 ++++++++---- .../Localization/UsingGlobalize/jQuery/index.js | 8 +++++--- 6 files changed, 40 insertions(+), 17 deletions(-) diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html index 815880776be1..5df939181593 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html +++ b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html @@ -1,5 +1,8 @@
- + diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts index 9cb7c3fcb505..3db3ddeab16b 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts +++ b/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(); diff --git a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx b/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx index 815f2bb6c7e8..80a0fa7b1a99 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx +++ b/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'; @@ -25,9 +27,11 @@ const editPopupOptions = { const amountEditorOptions = { format: 'currency', showClearButton: true, - inputAttr: { - 'aria-label': 'Filter cell', - }, +}; +const onEditorPreparing = (e: DataGridTypes.EditorPreparingEvent) => { + if (e.dataField === 'Amount' && e.parentType === 'filterRow') { + e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' }; + } }; const selectBoxInputAttr = { id: 'selectInput' }; @@ -57,6 +61,7 @@ const App = () => { { + if (e.dataField === 'Amount' && e.parentType === 'filterRow') { + e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' }; + } }; const selectBoxInputAttr = { id: 'selectInput' }; Globalize.load(deCldrData, ruCldrData, supplementalCldrData); @@ -47,6 +49,7 @@ const App = () => { 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'; @@ -83,9 +84,6 @@ const editPopupOptions = { width: 700, height: 345 }; const amountEditorOptions = { format: 'currency', showClearButton: true, - inputAttr: { - 'aria-label': 'Filter cell', - }, }; const selectBoxInputAttr = { id: 'selectInput' }; const formatMessage = ref((msg: string) => msg); @@ -115,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(); diff --git a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js index 12a634306dfa..6d3ae40a1eec 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js +++ b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/index.js @@ -54,9 +54,6 @@ $(() => { editorOptions: { format: 'currency', showClearButton: true, - inputAttr: { - 'aria-label': 'Filter cell', - }, }, }, { dataField: 'PaymentDate', @@ -75,6 +72,11 @@ $(() => { height: 345, }, }, + onEditorPreparing: (e) => { + if (e.dataField === 'Amount' && e.parentType === 'filterRow') { + e.editorOptions.inputAttr = { 'aria-label': 'Filter cell' }; + } + }, }; const selectBoxOptions = { From a7591371932368eb6d4f956efc8af5e9d93cab4c Mon Sep 17 00:00:00 2001 From: Andrei_Ser Date: Tue, 6 Oct 2026 18:31:59 +0400 Subject: [PATCH 4/4] del globalize accessibility exception --- apps/demos/testing/common.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts index b911f22461f7..c09fc520401a 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -106,8 +106,6 @@ const getIgnoredRules = (testName) => { 'Gantt-Overview': ['aria-required-parent', 'aria-valid-attr-value'], 'Gantt-StripLines': ['aria-required-parent', 'aria-valid-attr-value'], 'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'], - - 'Localization-UsingGlobalize': ['label'], }; return [