From feaf9f5d9f6e1ae1fc2805f057db102a68856748 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 7 Oct 2024 13:00:31 +0800
Subject: [PATCH 1/9] initial commit

---
 .../tests/filterBuilder/filterBuilderA11y.ts  | 94 +++++++++++++++++++
 .../filter_builder/m_filter_builder.ts        | 48 +++++++++-
 .../js/localization/messages/ar.json          |  9 ++
 .../js/localization/messages/ca.json          |  9 ++
 .../js/localization/messages/cs.json          |  9 ++
 .../js/localization/messages/de.json          |  9 ++
 .../js/localization/messages/el.json          |  9 ++
 .../js/localization/messages/en.json          |  9 ++
 .../js/localization/messages/es.json          |  9 ++
 .../js/localization/messages/fa.json          |  9 ++
 .../js/localization/messages/fi.json          |  9 ++
 .../js/localization/messages/fr.json          |  9 ++
 .../js/localization/messages/hu.json          |  9 ++
 .../js/localization/messages/it.json          |  9 ++
 .../js/localization/messages/ja.json          |  9 ++
 .../js/localization/messages/lt.json          |  9 ++
 .../js/localization/messages/lv.json          |  9 ++
 .../js/localization/messages/nb.json          |  9 ++
 .../js/localization/messages/nl.json          |  9 ++
 .../js/localization/messages/pl.json          |  9 ++
 .../js/localization/messages/pt.json          |  9 ++
 .../js/localization/messages/ro.json          |  9 ++
 .../js/localization/messages/ru.json          |  9 ++
 .../js/localization/messages/sl.json          |  9 ++
 .../js/localization/messages/sv.json          |  9 ++
 .../js/localization/messages/tr.json          |  9 ++
 .../js/localization/messages/vi.json          |  9 ++
 .../js/localization/messages/zh-tw.json       |  9 ++
 .../js/localization/messages/zh.json          |  9 ++
 .../testcafe-models/filterBuilder/index.ts    | 64 +++++++++++++
 30 files changed, 445 insertions(+), 4 deletions(-)
 create mode 100644 e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts

diff --git a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
new file mode 100644
index 000000000000..f34bf70cb247
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import { createWidget } from '../../helpers/createWidget';
+import url from '../../helpers/getPageUrl';
+import { fields, filter } from './data';
+
+fixture`Filter Builder Accessibility Tests`.page(
+  url(__dirname, '../container.html'),
+);
+
+const elements = [
+  {
+    name: 'Root Element',
+    role: 'tree',
+    label: 'Filter Builder',
+    selector: (filterBuilder) => filterBuilder.getRootElement(),
+  },
+  {
+    name: 'Leveled Grouping',
+    role: 'group',
+    label: 'Level 1',
+    selector: (filterBuilder) => filterBuilder.getGroupByLevel(1),
+  },
+  {
+    name: 'Group Item',
+    role: 'presentation',
+    label: 'Group Item',
+    selector: (filterBuilder) => filterBuilder.getGroupItem(),
+  },
+  {
+    name: 'Operation Button',
+    role: 'button',
+    label: 'Operation',
+    selector: (filterBuilder) => filterBuilder.getOperationButton(1),
+  },
+  {
+    name: 'Add Button',
+    role: 'button',
+    label: 'Add',
+    selector: (filterBuilder) => filterBuilder.getAddButton(1),
+  },
+  {
+    name: 'Remove Condition Button',
+    role: 'button',
+    label: 'Remove condition',
+    selector: (filterBuilder) => filterBuilder.getRemoveButton(0),
+  },
+  {
+    name: 'Remove Group Button',
+    role: 'button',
+    label: 'Remove group',
+    selector: (filterBuilder) => filterBuilder.getRemoveButton(1),
+  },
+  {
+    name: 'Item Field',
+    role: 'button',
+    label: 'Item Field',
+    selector: (filterBuilder) => filterBuilder.getItem('field', 2),
+  },
+  {
+    name: 'Item Operation',
+    role: 'button',
+    label: 'Item Operation',
+    selector: (filterBuilder) => filterBuilder.getItem('operation', 2),
+  },
+  {
+    name: 'Item Value',
+    role: 'button',
+    label: 'Item Value',
+    selector: (filterBuilder) => filterBuilder.getItem('value', 2),
+  },
+];
+
+elements.forEach(({
+  name, role, label, selector,
+}) => {
+  test(`Filter Builder - ${name} has correct ARIA attributes`, async (t) => {
+    const filterBuilder = new FilterBuilder('#parentContainer');
+    const elementSelector = selector(filterBuilder);
+    const labelValue = role === 'button' && await elementSelector.innerText ? 'title' : 'aria-label';
+
+    await t
+      .expect(elementSelector.getAttribute('role'))
+      .eql(role)
+      .expect(elementSelector.getAttribute(`${labelValue}`))
+      .eql(label);
+  }).before(async () => {
+    await createWidget('dxFilterBuilder', {
+      fields,
+      value: filter,
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
index 3217a3852fea..09b7e17d9f55 100644
--- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
+++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
@@ -256,10 +256,33 @@ class FilterBuilder extends Widget<any> {
     this.$element().addClass(FILTER_BUILDER_CLASS);
     // @ts-expect-error
     super._initMarkup();
+
+    this._addAriaAttributes(this.$element(), messageLocalization.format('dxFilterBuilder-filterAriaRootElement'), 'tree');
     this._createGroupElementByCriteria(this._model)
       .appendTo(this.$element());
   }
 
+  _addAriaAttributes($element, ariaLabel, role, hasPopup?) {
+    if (!$element || !$element.length) return;
+
+    const attributes = { role };
+
+    if (ariaLabel) {
+      if ($element.text().length > 0) {
+        // @ts-expect-error title attr
+        attributes.title = ariaLabel;
+      } else {
+        attributes['aria-label'] = ariaLabel;
+      }
+    }
+
+    if (hasPopup) {
+      attributes['aria-haspopup'] = hasPopup;
+    }
+
+    $element.attr(attributes);
+  }
+
   _createConditionElement(condition, parent) {
     return $('<div>')
       .addClass(FILTER_BUILDER_GROUP_CLASS)
@@ -288,15 +311,19 @@ class FilterBuilder extends Widget<any> {
     const $groupItem = $('<div>').addClass(FILTER_BUILDER_GROUP_ITEM_CLASS);
     const $groupContent = $('<div>').addClass(FILTER_BUILDER_GROUP_CONTENT_CLASS);
     const $group = $('<div>').addClass(FILTER_BUILDER_GROUP_CLASS).append($groupItem).append($groupContent);
+    const groupLevelAria = (messageLocalization.format as any)('dxFilterBuilder-filterAriaGroupLevel', groupLevel + 1);
 
     if (parent != null) {
       this._createRemoveButton(() => {
         removeItem(parent, criteria);
         $group.remove();
         this._updateFilter();
-      }).appendTo($groupItem);
+      }, 'group').appendTo($groupItem);
     }
 
+    this._addAriaAttributes($group, groupLevelAria, 'group');
+    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'presentation');
+
     this._createGroupOperationButton(criteria).appendTo($groupItem);
 
     this._createAddButton(() => {
@@ -345,6 +372,9 @@ class FilterBuilder extends Widget<any> {
           cssClass: FILTER_BUILDER_GROUP_OPERATIONS_CLASS,
         },
       });
+
+    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaOperationButton'), 'button', true);
+
     return $operationButton.addClass(FILTER_BUILDER_ITEM_TEXT_CLASS)
       .addClass(FILTER_BUILDER_GROUP_OPERATION_CLASS)
       .attr('tabindex', 0);
@@ -463,6 +493,7 @@ class FilterBuilder extends Widget<any> {
     }).addClass(FILTER_BUILDER_ITEM_TEXT_CLASS)
       .addClass(FILTER_BUILDER_ITEM_OPERATION_CLASS)
       .attr('tabindex', 0);
+    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaItemOperation'), 'button', true);
 
     return $operationButton;
   }
@@ -517,6 +548,8 @@ class FilterBuilder extends Widget<any> {
       .addClass(FILTER_BUILDER_ITEM_FIELD_CLASS)
       .attr('tabindex', 0);
 
+    this._addAriaAttributes($fieldButton, messageLocalization.format('dxFilterBuilder-filterAriaItemField'), 'button', true);
+
     return $fieldButton;
   }
 
@@ -534,7 +567,7 @@ class FilterBuilder extends Widget<any> {
         $item.remove();
       }
       this._updateFilter();
-    }).appendTo($item);
+    }, 'condition').appendTo($item);
     this._createFieldButtonWithMenu(fields, condition, field).appendTo($item);
     this._createOperationAndValueButtons(condition, field, $item);
     return $item;
@@ -554,12 +587,16 @@ class FilterBuilder extends Widget<any> {
     }));
   }
 
-  _createRemoveButton(handler) {
+  _createRemoveButton(handler, type?) {
     const $removeButton = $('<div>')
       .addClass(FILTER_BUILDER_IMAGE_CLASS)
       .addClass(FILTER_BUILDER_IMAGE_REMOVE_CLASS)
       .addClass(FILTER_BUILDER_ACTION_CLASS)
       .attr('tabindex', 0);
+    if (type) {
+      const removeMessage = (messageLocalization.format as any)('dxFilterBuilder-filterAriaRemoveButton', type);
+      this._addAriaAttributes($removeButton, removeMessage, 'button');
+    }
     this._subscribeOnClickAndEnterKey($removeButton, handler);
     return $removeButton;
   }
@@ -588,6 +625,9 @@ class FilterBuilder extends Widget<any> {
         },
       });
     }
+
+    this._addAriaAttributes($button, messageLocalization.format('dxFilterBuilder-filterAriaAddButton'), 'button', true);
+
     return $button.addClass(FILTER_BUILDER_IMAGE_CLASS)
       .addClass(FILTER_BUILDER_IMAGE_ADD_CLASS)
       .addClass(FILTER_BUILDER_ACTION_CLASS)
@@ -601,6 +641,7 @@ class FilterBuilder extends Widget<any> {
       .addClass(FILTER_BUILDER_ITEM_VALUE_TEXT_CLASS)
       .attr('tabindex', 0)
       .appendTo($container);
+    this._addAriaAttributes($text, messageLocalization.format('dxFilterBuilder-filterAriaItemValue'), 'button', true);
     const value = item[2];
 
     const customOperation = getCustomOperation(that._customOperations, item[1]);
@@ -768,7 +809,6 @@ class FilterBuilder extends Widget<any> {
     const $valueButton = $('<div>')
       .addClass(FILTER_BUILDER_ITEM_TEXT_CLASS)
       .addClass(FILTER_BUILDER_ITEM_VALUE_CLASS);
-
     this._createValueText(item, field, $valueButton);
     return $valueButton;
   }
diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
index 25f03d6cccf8..9d514609e75a 100644
--- a/packages/devextreme/js/localization/messages/ar.json
+++ b/packages/devextreme/js/localization/messages/ar.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "بين",
         "dxFilterBuilder-filterOperationAnyOf": "أي من",
         "dxFilterBuilder-filterOperationNoneOf": "ليس من",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "تغيير لون الخط",
         "dxHtmlEditor-dialogBackgroundCaption": "تغيير لون الخلفية",
diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
index 607dc809dc02..0d4f8c51b9fc 100644
--- a/packages/devextreme/js/localization/messages/ca.json
+++ b/packages/devextreme/js/localization/messages/ca.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "És entre",
         "dxFilterBuilder-filterOperationAnyOf": "És alguna de",
         "dxFilterBuilder-filterOperationNoneOf": "No és cap",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Canvia el color de la lletra",
         "dxHtmlEditor-dialogBackgroundCaption": "Canvieu el color de fons",
diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
index fa4bbcff1b95..56c6614760ab 100644
--- a/packages/devextreme/js/localization/messages/cs.json
+++ b/packages/devextreme/js/localization/messages/cs.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Mezi",
         "dxFilterBuilder-filterOperationAnyOf": "Libovolný z",
         "dxFilterBuilder-filterOperationNoneOf": "Žádný z",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Změna barvy písma",
         "dxHtmlEditor-dialogBackgroundCaption": "Změna barvy pozadí",
diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
index a9ada04b98f4..4f600118fa95 100644
--- a/packages/devextreme/js/localization/messages/de.json
+++ b/packages/devextreme/js/localization/messages/de.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Zwischen",
         "dxFilterBuilder-filterOperationAnyOf": "Ist enthalten in",
         "dxFilterBuilder-filterOperationNoneOf": "Ist nicht enthalten in",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Schriftfarbe ändern",
         "dxHtmlEditor-dialogBackgroundCaption": "Hintergrundfarbe ändern",
diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
index 680c048f8d90..a9cecb286234 100644
--- a/packages/devextreme/js/localization/messages/el.json
+++ b/packages/devextreme/js/localization/messages/el.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Είναι ανάμεσα",
         "dxFilterBuilder-filterOperationAnyOf": "Είναι κάποιο από αυτά",
         "dxFilterBuilder-filterOperationNoneOf": "Δεν είναι τίποτα από αυτά",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Αλλαγή χρώματος γραμματοσειράς",
         "dxHtmlEditor-dialogBackgroundCaption": "Αλλαγή χρώματος φόντου",
diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
index 43391d6418e5..fbf4dcf5095c 100644
--- a/packages/devextreme/js/localization/messages/en.json
+++ b/packages/devextreme/js/localization/messages/en.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Is between",
         "dxFilterBuilder-filterOperationAnyOf": "Is any of",
         "dxFilterBuilder-filterOperationNoneOf": "Is none of",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
index e4a3b2a06a5d..682385a463c5 100644
--- a/packages/devextreme/js/localization/messages/es.json
+++ b/packages/devextreme/js/localization/messages/es.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Alguno de",
         "dxFilterBuilder-filterOperationNoneOf": "Ningún de",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Cambiar el color de la fuente",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambiar el color de fondo",
diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
index c2a653aaa1bb..8a5f94edb6f0 100644
--- a/packages/devextreme/js/localization/messages/fa.json
+++ b/packages/devextreme/js/localization/messages/fa.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "بین",
         "dxFilterBuilder-filterOperationAnyOf": "شامل یکی از",
         "dxFilterBuilder-filterOperationNoneOf": "شامل هیچکدام از",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "تغییر رنگ قلم",
         "dxHtmlEditor-dialogBackgroundCaption": "تغییر رنگ پس زمینه",
diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
index 33f74ceac40f..ce6bd086c078 100644
--- a/packages/devextreme/js/localization/messages/fi.json
+++ b/packages/devextreme/js/localization/messages/fi.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Välillä",
         "dxFilterBuilder-filterOperationAnyOf": "Joku näistä",
         "dxFilterBuilder-filterOperationNoneOf": "Ei mikään näistä",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
index b37bea59f093..4164668d1469 100644
--- a/packages/devextreme/js/localization/messages/fr.json
+++ b/packages/devextreme/js/localization/messages/fr.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Est parmi",
         "dxFilterBuilder-filterOperationNoneOf": "N'est pas parmi",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Changer couleur police",
         "dxHtmlEditor-dialogBackgroundCaption": "Changer couleur fond",
diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
index c7d74d3c58b0..d9f5ed1036b8 100644
--- a/packages/devextreme/js/localization/messages/hu.json
+++ b/packages/devextreme/js/localization/messages/hu.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Között",
         "dxFilterBuilder-filterOperationAnyOf": "Valamelyik",
         "dxFilterBuilder-filterOperationNoneOf": "Egyik sem",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Betűszín választás",
         "dxHtmlEditor-dialogBackgroundCaption": "Háttérszín választás",
diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
index d5dd66f942ee..9ea520926e90 100644
--- a/packages/devextreme/js/localization/messages/it.json
+++ b/packages/devextreme/js/localization/messages/it.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Compreso",
         "dxFilterBuilder-filterOperationAnyOf": "Include",
         "dxFilterBuilder-filterOperationNoneOf": "Non include",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Cambia il colore del testo",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambia il colore di sfondo",
diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
index ece2ba683b2a..9908d7d6982f 100644
--- a/packages/devextreme/js/localization/messages/ja.json
+++ b/packages/devextreme/js/localization/messages/ja.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "～から～の間",
         "dxFilterBuilder-filterOperationAnyOf": "どちらかを含む",
         "dxFilterBuilder-filterOperationNoneOf": "すべて含まない",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "フォントの色を変更",
         "dxHtmlEditor-dialogBackgroundCaption": "背景色を変更",
diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
index 674272cbf1c5..a2189c84b379 100644
--- a/packages/devextreme/js/localization/messages/lt.json
+++ b/packages/devextreme/js/localization/messages/lt.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Intervale",
         "dxFilterBuilder-filterOperationAnyOf": "Kuris nors iš",
         "dxFilterBuilder-filterOperationNoneOf": "Nė vienas iš",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Pakeisti šrifto spalvą",
         "dxHtmlEditor-dialogBackgroundCaption": "Pakeisti fono spalvą",
diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
index dc77c798e269..88c21a63f33e 100644
--- a/packages/devextreme/js/localization/messages/lv.json
+++ b/packages/devextreme/js/localization/messages/lv.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Ir starp",
         "dxFilterBuilder-filterOperationAnyOf": "Ir viens no",
         "dxFilterBuilder-filterOperationNoneOf": "Nav neviens no",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Nomainīt Fonta Krāsu",
         "dxHtmlEditor-dialogBackgroundCaption": "Nomainīt Fona Krāsu",
diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
index 4fff740a80c1..3e59b2baba5c 100644
--- a/packages/devextreme/js/localization/messages/nb.json
+++ b/packages/devextreme/js/localization/messages/nb.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Er mellom",
         "dxFilterBuilder-filterOperationAnyOf": "Er noen av",
         "dxFilterBuilder-filterOperationNoneOf": "Er ingen av",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Skift fontfarge",
         "dxHtmlEditor-dialogBackgroundCaption": "Skift bakgrunnsfarge",
diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
index b1f567ff64bd..943f93566c2f 100644
--- a/packages/devextreme/js/localization/messages/nl.json
+++ b/packages/devextreme/js/localization/messages/nl.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Is tussen",
         "dxFilterBuilder-filterOperationAnyOf": "Is een van",
         "dxFilterBuilder-filterOperationNoneOf": "Is geen van",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Tekstkleur",
         "dxHtmlEditor-dialogBackgroundCaption": "Achtergrondkleur",
diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
index 46302751dfc1..c8dca2984b9e 100644
--- a/packages/devextreme/js/localization/messages/pl.json
+++ b/packages/devextreme/js/localization/messages/pl.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Pomiędzy",
         "dxFilterBuilder-filterOperationAnyOf": "Jest zawarty w",
         "dxFilterBuilder-filterOperationNoneOf": "Nie jest zawarty w",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Zmień kolor czcionki",
         "dxHtmlEditor-dialogBackgroundCaption": "Zmień kolor tła",
diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
index 5614182d032d..f30d9a8b8980 100644
--- a/packages/devextreme/js/localization/messages/pt.json
+++ b/packages/devextreme/js/localization/messages/pt.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Algum de",
         "dxFilterBuilder-filterOperationNoneOf": "Nenhum de",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Alterar cor da fonte",
         "dxHtmlEditor-dialogBackgroundCaption": "Alterar cor de plano de fundo",
diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
index 9a8fc8971b9b..ff8676202fe7 100644
--- a/packages/devextreme/js/localization/messages/ro.json
+++ b/packages/devextreme/js/localization/messages/ro.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Este între",
         "dxFilterBuilder-filterOperationAnyOf": "Este oricare dintre",
         "dxFilterBuilder-filterOperationNoneOf": "Nu este nici una dintre",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Schimbă culoarea fontului",
         "dxHtmlEditor-dialogBackgroundCaption": "Schimbă culoarea de fundal",
diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
index 45bdc2cb1b13..7e4854840525 100644
--- a/packages/devextreme/js/localization/messages/ru.json
+++ b/packages/devextreme/js/localization/messages/ru.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "В диапазоне",
         "dxFilterBuilder-filterOperationAnyOf": "Любой из",
         "dxFilterBuilder-filterOperationNoneOf": "Ни один из",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Изменить цвет текста",
         "dxHtmlEditor-dialogBackgroundCaption": "Изменить цвет фона",
diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
index 2b9fbe6d5f11..64dc875788e2 100644
--- a/packages/devextreme/js/localization/messages/sl.json
+++ b/packages/devextreme/js/localization/messages/sl.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Je med",
         "dxFilterBuilder-filterOperationAnyOf": "Je karkoli izmed",
         "dxFilterBuilder-filterOperationNoneOf": "Ni nič izmed",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Zamenjaj barvo pisave",
         "dxHtmlEditor-dialogBackgroundCaption": "Zamenjaj barvo ozadja",
diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
index c15f92060b15..df21ea9bf39f 100644
--- a/packages/devextreme/js/localization/messages/sv.json
+++ b/packages/devextreme/js/localization/messages/sv.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Mellan",
         "dxFilterBuilder-filterOperationAnyOf": "Någon av",
         "dxFilterBuilder-filterOperationNoneOf": "Ingen av",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
index efb859c2d609..76d9f806ee12 100644
--- a/packages/devextreme/js/localization/messages/tr.json
+++ b/packages/devextreme/js/localization/messages/tr.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Arasında",
         "dxFilterBuilder-filterOperationAnyOf": "Herhangi biri",
         "dxFilterBuilder-filterOperationNoneOf": "Hiçbiri",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Yazı Tipi Rengini Değiştir",
         "dxHtmlEditor-dialogBackgroundCaption": "Arka Plan Rengini Değiştir",
diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
index 4babd4ed8bc1..b9bf1cb22393 100644
--- a/packages/devextreme/js/localization/messages/vi.json
+++ b/packages/devextreme/js/localization/messages/vi.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Là giữa",
         "dxFilterBuilder-filterOperationAnyOf": "Là bất kỳ của",
         "dxFilterBuilder-filterOperationNoneOf": "Không không có của",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "Đổi màu phông chữ",
         "dxHtmlEditor-dialogBackgroundCaption": "Đổi màu nền",
diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
index a161ece8c721..8c00290741bb 100644
--- a/packages/devextreme/js/localization/messages/zh-tw.json
+++ b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "之間",
         "dxFilterBuilder-filterOperationAnyOf": "任何一個",
         "dxFilterBuilder-filterOperationNoneOf": "任何一個都不",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "更改字體顏色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景顏色",
diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
index 3050a1b5fe1e..d3492ad39c83 100644
--- a/packages/devextreme/js/localization/messages/zh.json
+++ b/packages/devextreme/js/localization/messages/zh.json
@@ -362,6 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "之间",
         "dxFilterBuilder-filterOperationAnyOf": "任何一个",
         "dxFilterBuilder-filterOperationNoneOf": "任何一个都不",
+        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
+        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaOperationButton": "Operation",
+        "dxFilterBuilder-filterAriaAddButton": "Add",
+        "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
+        "dxFilterBuilder-filterAriaItemField": "Item Field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item Value",
 
         "dxHtmlEditor-dialogColorCaption": "更改字体颜色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景颜色",
diff --git a/packages/testcafe-models/filterBuilder/index.ts b/packages/testcafe-models/filterBuilder/index.ts
index 6581f1f5bc92..b3a87c538d93 100644
--- a/packages/testcafe-models/filterBuilder/index.ts
+++ b/packages/testcafe-models/filterBuilder/index.ts
@@ -5,12 +5,18 @@ import Field from './field';
 
 type FieldType = 'item' | 'groupOperation' | 'itemOperation' | 'itemAction';
 const CLASS = {
+  root: 'dx-filterbuilder',
+  group: 'dx-filterbuilder-group',
+  groupItem: 'dx-filterbuilder-group-item',
+  addButton: 'dx-icon-plus',
+  removeButton: 'dx-icon-remove',
   item: 'dx-filterbuilder-item-field',
   popupContent: 'dx-popup-content',
   treeView: 'dx-treeview',
   treeViewLeaf: 'dx-treeview-node-is-leaf',
   groupOperation: 'dx-filterbuilder-group-operation',
   itemOperation: 'dx-filterbuilder-item-operation',
+  itemValue: 'dx-filterbuilder-item-value-text',
   itemAction: 'dx-filterbuilder-action',
 };
 
@@ -31,4 +37,62 @@ export default class FilterBuilder extends Widget {
     const fields = this.element.find(`.${cssClass}`);
     return new Field(fields.nth(index));
   }
+
+  getRootElement(): Selector {
+    return this.element.find(`.${CLASS.root}`);
+  }
+
+  getGroupByLevel(level): Selector {
+    return this.element.find(`.${CLASS.group}`).nth(level - 1);
+  }
+
+  getGroupItem(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.groupItem}`);
+    }
+    return this.element.find(`.${CLASS.groupItem}`);
+  }
+
+  getOperationButton(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.groupOperation}`);
+    }
+    return this.element.find(`.${CLASS.groupOperation}`);
+  }
+
+  getAddButton(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.addButton}`);
+    }
+    return this.element.find(`.${CLASS.addButton}`);
+  }
+
+  getRemoveButton(index?): Selector {
+    if(index) {
+      return this.element.find(`.${CLASS.removeButton}`).nth(index);
+    }
+    return this.element.find(`.${CLASS.removeButton}`);
+  }
+
+  getItem(item, index?) {
+    var className;
+    switch(item) {
+      case 'operation':
+        className = CLASS.itemOperation;
+        break;
+      case 'field': 
+        className = CLASS.item;
+        break;
+      case 'value': 
+        className = CLASS.itemValue;
+        break;
+      default:
+        throw new Error(`Unsupported class name: ${className}`);
+    }
+
+    if(index) {
+      return this.element.find(`.${className}`).nth(index);
+    }
+    return this.element.find(`.${className}`);
+  }
 }

From c1282aec9e6d0ce64b3e23a90060e0c3336622b1 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 7 Oct 2024 13:54:27 +0800
Subject: [PATCH 2/9] Update old qUnit markup test

---
 .../filterBuilderParts/markupTests.js         | 49 +++----------------
 1 file changed, 6 insertions(+), 43 deletions(-)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
index 7a6628a317a6..d661fdb7a836 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
@@ -13,10 +13,10 @@ QUnit.test('markup init', function(assert) {
     }
     const $etalon = $(
         '<div id="container" class="dx-filterbuilder dx-widget">'
-            + '<div class="dx-filterbuilder-group">'
-                + '<div class="dx-filterbuilder-group-item">'
-                    + '<div class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
-                    + '<div class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+            + '<div class="dx-filterbuilder-group" role="group" aria-label="Level 1">'
+                + '<div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item">'
+                    + '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
+                    + '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
                 + '</div>'
                 + '<div class="dx-filterbuilder-group-content"></div>'
             + '</div>'
@@ -54,25 +54,7 @@ QUnit.test('filter Content init by one condition', function(assert) {
         return;
     }
     const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group">'
-            + '<div class="dx-filterbuilder-group-item">'
-                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0"></div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
-                + '<div class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
-            + '</div>'
-            + '<div class="dx-filterbuilder-group-content">'
-                + '<div class="dx-filterbuilder-group">'
-                    + '<div class="dx-filterbuilder-group-item">'
-                        + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0"></div>'
-                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0">Company Name</div>'
-                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0">Equals</div>'
-                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                            + '<div class="dx-filterbuilder-item-value-text" tabindex="0">K&amp;S Music</div>'
-                        + '</div>'
-                    + '</div>'
-                + '</div>'
-            + '</div>'
-        + '</div>'
+        '<div class="dx-filterbuilder-group" role="group" aria-label="Level 2"><div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div><div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div><div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div></div><div class="dx-filterbuilder-group-content"><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div></div></div>'
     );
 
     const element = $('#container').dxFilterBuilder({
@@ -88,26 +70,7 @@ QUnit.test('filter Content init by several conditions', function(assert) {
         return;
     }
     const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group">'
-            + '<div class="dx-filterbuilder-group-item">'
-                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0"></div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0">Company Name</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0">Equals</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0">K&amp;S Music</div>'
-                + '</div>'
-            + '</div>'
-        + '</div>'
-        + '<div class="dx-filterbuilder-group">'
-            + '<div class="dx-filterbuilder-group-item">'
-                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0"></div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0">Zipcode</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0">Equals</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0">98027</div>'
-                + '</div>'
-            + '</div>'
-        + '</div>'
+        '<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
     );
 
     const element = $('#container').dxFilterBuilder({

From 7c2b585cdee9dfca8fbc4e9739a0df5b7ebb0b5d Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Thu, 10 Oct 2024 08:27:15 +0800
Subject: [PATCH 3/9] updated resolved

---
 .../tests/filterBuilder/filterBuilderA11y.ts  |  8 ++---
 .../filter_builder/m_filter_builder.ts        | 30 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
index f34bf70cb247..18f970303278 100644
--- a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
+++ b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
@@ -24,7 +24,7 @@ const elements = [
   },
   {
     name: 'Group Item',
-    role: 'presentation',
+    role: 'treeitem',
     label: 'Group Item',
     selector: (filterBuilder) => filterBuilder.getGroupItem(),
   },
@@ -54,13 +54,13 @@ const elements = [
   },
   {
     name: 'Item Field',
-    role: 'button',
+    role: 'combobox',
     label: 'Item Field',
     selector: (filterBuilder) => filterBuilder.getItem('field', 2),
   },
   {
     name: 'Item Operation',
-    role: 'button',
+    role: 'combobox',
     label: 'Item Operation',
     selector: (filterBuilder) => filterBuilder.getItem('operation', 2),
   },
@@ -78,7 +78,7 @@ elements.forEach(({
   test(`Filter Builder - ${name} has correct ARIA attributes`, async (t) => {
     const filterBuilder = new FilterBuilder('#parentContainer');
     const elementSelector = selector(filterBuilder);
-    const labelValue = role === 'button' && await elementSelector.innerText ? 'title' : 'aria-label';
+    const labelValue = ['button', 'combobox'].includes(role) && await elementSelector.innerText ? 'title' : 'aria-label';
 
     await t
       .expect(elementSelector.getAttribute('role'))
diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
index 09b7e17d9f55..4a721f198dcf 100644
--- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
+++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
@@ -1,6 +1,7 @@
 /* eslint-disable max-classes-per-file */
 import registerComponent from '@js/core/component_registrator';
 import domAdapter from '@js/core/dom_adapter';
+import Guid from '@js/core/guid';
 import $ from '@js/core/renderer';
 import { when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
@@ -262,7 +263,7 @@ class FilterBuilder extends Widget<any> {
       .appendTo(this.$element());
   }
 
-  _addAriaAttributes($element, ariaLabel, role, hasPopup?) {
+  _addAriaAttributes($element, ariaLabel, role, hasPopup?, hasExpanded?) {
     if (!$element || !$element.length) return;
 
     const attributes = { role };
@@ -276,8 +277,12 @@ class FilterBuilder extends Widget<any> {
       }
     }
 
-    if (hasPopup) {
-      attributes['aria-haspopup'] = hasPopup;
+    if (isDefined(hasPopup)) {
+      attributes['aria-haspopup'] = `${hasPopup}`;
+    }
+
+    if (isDefined(hasExpanded)) {
+      attributes['aria-expanded'] = `${hasExpanded}`;
     }
 
     $element.attr(attributes);
@@ -308,8 +313,9 @@ class FilterBuilder extends Widget<any> {
   }
 
   _createGroupElement(criteria, parent, groupLevel) {
+    const $guid = new Guid();
     const $groupItem = $('<div>').addClass(FILTER_BUILDER_GROUP_ITEM_CLASS);
-    const $groupContent = $('<div>').addClass(FILTER_BUILDER_GROUP_CONTENT_CLASS);
+    const $groupContent = $('<div>').addClass(FILTER_BUILDER_GROUP_CONTENT_CLASS).attr('id', `${$guid}`);
     const $group = $('<div>').addClass(FILTER_BUILDER_GROUP_CLASS).append($groupItem).append($groupContent);
     const groupLevelAria = (messageLocalization.format as any)('dxFilterBuilder-filterAriaGroupLevel', groupLevel + 1);
 
@@ -322,7 +328,9 @@ class FilterBuilder extends Widget<any> {
     }
 
     this._addAriaAttributes($group, groupLevelAria, 'group');
-    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'presentation');
+    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem');
+    this._addAriaAttributes($groupContent, '', 'group');
+    $groupItem.attr('aria-owns', `${$guid}`);
 
     this._createGroupOperationButton(criteria).appendTo($groupItem);
 
@@ -384,7 +392,7 @@ class FilterBuilder extends Widget<any> {
     const that = this;
     const removeMenu = function () {
       // @ts-expect-error
-      that.$element().find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS);
+      that.$element().find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS).attr('aria-expanded', 'false');
       // @ts-expect-error
       that.$element().find('.dx-overlay .dx-treeview').remove();
       // @ts-expect-error
@@ -407,7 +415,7 @@ class FilterBuilder extends Widget<any> {
       selectionMode: 'single',
       onItemClick: menuOnItemClickWrapper(options.menu.onItemClick),
       onHiding() {
-        $button.removeClass(ACTIVE_CLASS);
+        $button.removeClass(ACTIVE_CLASS).attr('aria-expanded', 'false');
       },
       position: {
         my: `${position} top`, at: `${position} bottom`, offset: '0 1', of: $button, collision: 'flip',
@@ -444,7 +452,7 @@ class FilterBuilder extends Widget<any> {
     this._subscribeOnClickAndEnterKey($button, () => {
       removeMenu();
       that._createPopupWithTreeView(options, that.$element());
-      $button.addClass(ACTIVE_CLASS);
+      $button.addClass(ACTIVE_CLASS).attr('aria-expanded', 'true');
     });
     return $button;
   }
@@ -493,7 +501,7 @@ class FilterBuilder extends Widget<any> {
     }).addClass(FILTER_BUILDER_ITEM_TEXT_CLASS)
       .addClass(FILTER_BUILDER_ITEM_OPERATION_CLASS)
       .attr('tabindex', 0);
-    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaItemOperation'), 'button', true);
+    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaItemOperation'), 'combobox', true, false);
 
     return $operationButton;
   }
@@ -548,7 +556,7 @@ class FilterBuilder extends Widget<any> {
       .addClass(FILTER_BUILDER_ITEM_FIELD_CLASS)
       .attr('tabindex', 0);
 
-    this._addAriaAttributes($fieldButton, messageLocalization.format('dxFilterBuilder-filterAriaItemField'), 'button', true);
+    this._addAriaAttributes($fieldButton, messageLocalization.format('dxFilterBuilder-filterAriaItemField'), 'combobox', true, false);
 
     return $fieldButton;
   }
@@ -558,6 +566,8 @@ class FilterBuilder extends Widget<any> {
     const fields = this._getNormalizedFields();
     const field = getField(condition[0], fields);
 
+    this._addAriaAttributes($item, '', 'treeitem');
+
     this._createRemoveButton(() => {
       removeItem(parent, condition);
       const isSingleChild = $item.parent().children().length === 1;

From 4b80ece139cda5276ccf5b7cfa1429db79433bfa Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Thu, 10 Oct 2024 10:35:28 +0800
Subject: [PATCH 4/9] added fixes

---
 .../filter_builder/m_filter_builder.ts        | 18 +++++----
 .../filterBuilderParts/markupTests.js         | 37 +++++++++++++++----
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
index 4a721f198dcf..a47c3a811db0 100644
--- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
+++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
@@ -263,7 +263,7 @@ class FilterBuilder extends Widget<any> {
       .appendTo(this.$element());
   }
 
-  _addAriaAttributes($element, ariaLabel, role, hasPopup?, hasExpanded?) {
+  _addAriaAttributes($element, ariaLabel, role, hasPopup?, hasExpanded?, ariaLevel?) {
     if (!$element || !$element.length) return;
 
     const attributes = { role };
@@ -285,13 +285,17 @@ class FilterBuilder extends Widget<any> {
       attributes['aria-expanded'] = `${hasExpanded}`;
     }
 
+    if (isDefined(ariaLevel)) {
+      attributes['aria-level'] = `${ariaLevel}`;
+    }
+
     $element.attr(attributes);
   }
 
-  _createConditionElement(condition, parent) {
+  _createConditionElement(condition, parent, groupLevel?) {
     return $('<div>')
       .addClass(FILTER_BUILDER_GROUP_CLASS)
-      .append(this._createConditionItem(condition, parent));
+      .append(this._createConditionItem(condition, parent, groupLevel));
   }
 
   _createGroupElementByCriteria(criteria, parent?, groupLevel = 0) {
@@ -305,7 +309,7 @@ class FilterBuilder extends Widget<any> {
         this._createGroupElementByCriteria(innerCriteria, criteria, groupLevel + 1)
           .appendTo($groupContent);
       } else if (isCondition(innerCriteria)) {
-        this._createConditionElement(innerCriteria, criteria)
+        this._createConditionElement(innerCriteria, criteria, `${groupLevel + 1}`)
           .appendTo($groupContent);
       }
     }
@@ -328,7 +332,7 @@ class FilterBuilder extends Widget<any> {
     }
 
     this._addAriaAttributes($group, groupLevelAria, 'group');
-    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem');
+    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevel + 1}`);
     this._addAriaAttributes($groupContent, '', 'group');
     $groupItem.attr('aria-owns', `${$guid}`);
 
@@ -561,12 +565,12 @@ class FilterBuilder extends Widget<any> {
     return $fieldButton;
   }
 
-  _createConditionItem(condition, parent) {
+  _createConditionItem(condition, parent, groupLevel?) {
     const $item = $('<div>').addClass(FILTER_BUILDER_GROUP_ITEM_CLASS);
     const fields = this._getNormalizedFields();
     const field = getField(condition[0], fields);
 
-    this._addAriaAttributes($item, '', 'treeitem');
+    this._addAriaAttributes($item, '', 'treeitem', null, null, groupLevel);
 
     this._createRemoveButton(() => {
       removeItem(parent, condition);
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
index d661fdb7a836..89dd14f6c3ba 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
@@ -11,19 +11,21 @@ QUnit.test('markup init', function(assert) {
         assert.ok(true, 'This test is not actual for mobile devices, dxclick add onclick=\'void(0)\' to every button in mobile');
         return;
     }
+    const element = $('#container').dxFilterBuilder();
+    const guid = element.find('.dx-filterbuilder-group-item').attr('aria-owns');
+
     const $etalon = $(
         '<div id="container" class="dx-filterbuilder dx-widget">'
             + '<div class="dx-filterbuilder-group" role="group" aria-label="Level 1">'
-                + '<div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item">'
+                + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="1" aria-owns="' + guid + '">'
                     + '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
                     + '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
                 + '</div>'
-                + '<div class="dx-filterbuilder-group-content"></div>'
+                + '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group"></div>'
             + '</div>'
         + '</div>'
     );
 
-    const element = $('#container').dxFilterBuilder();
     assert.equal(element.html(), $etalon.html());
 });
 
@@ -53,14 +55,35 @@ QUnit.test('filter Content init by one condition', function(assert) {
         assert.ok(true, 'This test is not actual for mobile devices, dxclick add onclick=\'void(0)\' to every button in mobile');
         return;
     }
-    const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group" role="group" aria-label="Level 2"><div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div><div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div><div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div></div><div class="dx-filterbuilder-group-content"><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div></div></div>'
-    );
 
     const element = $('#container').dxFilterBuilder({
         fields: fields,
         value: [[['CompanyName', '=', 'K&S Music'], 'Or'], 'And']
     });
+    const guid = element.find('.dx-filterbuilder-group[aria-label="Level 2"] .dx-filterbuilder-group-item').attr('aria-owns');
+
+    const $etalon = $('<div/>').html(
+        '<div class="dx-filterbuilder-group" role="group" aria-label="Level 2">'
+            + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="2" aria-owns="' + guid + '">'
+                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div>'
+                + '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
+                + '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+            + '</div>'
+            + '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group">'
+                + '<div class="dx-filterbuilder-group">'
+                    + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="2">'
+                        + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
+                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
+                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
+                            + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div>'
+                        + '</div>'
+                    + '</div>'
+                + '</div>'
+            + '</div>'
+        + '</div>'
+    );
+
     assert.equal(element.find('.' + FILTER_BUILDER_GROUP_CONTENT_CLASS).html(), $etalon.html());
 });
 
@@ -70,7 +93,7 @@ QUnit.test('filter Content init by several conditions', function(assert) {
         return;
     }
     const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
+        '<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
     );
 
     const element = $('#container').dxFilterBuilder({

From 50cae3d2677b210e6b66e9ad2be688d6cb116e55 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 15 Oct 2024 11:26:59 +0800
Subject: [PATCH 5/9] for review

---
 .../tests/filterBuilder/filterBuilderA11y.ts           | 10 ++--------
 .../js/__internal/filter_builder/m_filter_builder.ts   | 10 +++++-----
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
index 18f970303278..aab654828df9 100644
--- a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
+++ b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
@@ -16,12 +16,6 @@ const elements = [
     label: 'Filter Builder',
     selector: (filterBuilder) => filterBuilder.getRootElement(),
   },
-  {
-    name: 'Leveled Grouping',
-    role: 'group',
-    label: 'Level 1',
-    selector: (filterBuilder) => filterBuilder.getGroupByLevel(1),
-  },
   {
     name: 'Group Item',
     role: 'treeitem',
@@ -30,13 +24,13 @@ const elements = [
   },
   {
     name: 'Operation Button',
-    role: 'button',
+    role: 'combobox',
     label: 'Operation',
     selector: (filterBuilder) => filterBuilder.getOperationButton(1),
   },
   {
     name: 'Add Button',
-    role: 'button',
+    role: 'combobox',
     label: 'Add',
     selector: (filterBuilder) => filterBuilder.getAddButton(1),
   },
diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
index a47c3a811db0..4341d2e1427f 100644
--- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
+++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
@@ -331,8 +331,8 @@ class FilterBuilder extends Widget<any> {
       }, 'group').appendTo($groupItem);
     }
 
-    this._addAriaAttributes($group, groupLevelAria, 'group');
-    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevel + 1}`);
+    // this._addAriaAttributes($group, groupLevelAria, 'group');
+    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevelAria}`);
     this._addAriaAttributes($groupContent, '', 'group');
     $groupItem.attr('aria-owns', `${$guid}`);
 
@@ -347,7 +347,7 @@ class FilterBuilder extends Widget<any> {
       const field = this.option('fields')[0];
       const newCondition = createCondition(field, this._customOperations);
       addItem(newCondition, criteria);
-      this._createConditionElement(newCondition, criteria).appendTo($groupContent);
+      this._createConditionElement(newCondition, criteria, groupLevel + 1).appendTo($groupContent);
       this._updateFilter();
     }, groupLevel).appendTo($groupItem);
 
@@ -385,7 +385,7 @@ class FilterBuilder extends Widget<any> {
         },
       });
 
-    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaOperationButton'), 'button', true);
+    this._addAriaAttributes($operationButton, messageLocalization.format('dxFilterBuilder-filterAriaOperationButton'), 'combobox', true, false);
 
     return $operationButton.addClass(FILTER_BUILDER_ITEM_TEXT_CLASS)
       .addClass(FILTER_BUILDER_GROUP_OPERATION_CLASS)
@@ -640,7 +640,7 @@ class FilterBuilder extends Widget<any> {
       });
     }
 
-    this._addAriaAttributes($button, messageLocalization.format('dxFilterBuilder-filterAriaAddButton'), 'button', true);
+    this._addAriaAttributes($button, messageLocalization.format('dxFilterBuilder-filterAriaAddButton'), 'combobox', true, false);
 
     return $button.addClass(FILTER_BUILDER_IMAGE_CLASS)
       .addClass(FILTER_BUILDER_IMAGE_ADD_CLASS)

From 503057ed5ba3b7c6c2171c4b4a061d184b84122d Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 15 Oct 2024 14:39:03 +0800
Subject: [PATCH 6/9] fixes

---
 .../__internal/filter_builder/m_filter_builder.ts  |  4 +---
 .../filterBuilderParts/markupTests.js              | 14 +++++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
index 4341d2e1427f..217356db5932 100644
--- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
+++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
@@ -321,7 +321,6 @@ class FilterBuilder extends Widget<any> {
     const $groupItem = $('<div>').addClass(FILTER_BUILDER_GROUP_ITEM_CLASS);
     const $groupContent = $('<div>').addClass(FILTER_BUILDER_GROUP_CONTENT_CLASS).attr('id', `${$guid}`);
     const $group = $('<div>').addClass(FILTER_BUILDER_GROUP_CLASS).append($groupItem).append($groupContent);
-    const groupLevelAria = (messageLocalization.format as any)('dxFilterBuilder-filterAriaGroupLevel', groupLevel + 1);
 
     if (parent != null) {
       this._createRemoveButton(() => {
@@ -331,8 +330,7 @@ class FilterBuilder extends Widget<any> {
       }, 'group').appendTo($groupItem);
     }
 
-    // this._addAriaAttributes($group, groupLevelAria, 'group');
-    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevelAria}`);
+    this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevel + 1}`);
     this._addAriaAttributes($groupContent, '', 'group');
     $groupItem.attr('aria-owns', `${$guid}`);
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
index 89dd14f6c3ba..8576d6ae0388 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
@@ -16,10 +16,10 @@ QUnit.test('markup init', function(assert) {
 
     const $etalon = $(
         '<div id="container" class="dx-filterbuilder dx-widget">'
-            + '<div class="dx-filterbuilder-group" role="group" aria-label="Level 1">'
+            + '<div class="dx-filterbuilder-group">'
                 + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="1" aria-owns="' + guid + '">'
-                    + '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
-                    + '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+                    + '<div role="combobox" title="Operation" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
+                    + '<div role="combobox" aria-label="Add" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
                 + '</div>'
                 + '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group"></div>'
             + '</div>'
@@ -60,14 +60,14 @@ QUnit.test('filter Content init by one condition', function(assert) {
         fields: fields,
         value: [[['CompanyName', '=', 'K&S Music'], 'Or'], 'And']
     });
-    const guid = element.find('.dx-filterbuilder-group[aria-label="Level 2"] .dx-filterbuilder-group-item').attr('aria-owns');
+    const guid = element.find('.dx-filterbuilder-group-item[aria-level="2"]').attr('aria-owns');
 
     const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group" role="group" aria-label="Level 2">'
+        '<div class="dx-filterbuilder-group">'
             + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="2" aria-owns="' + guid + '">'
                 + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div>'
-                + '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
-                + '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+                + '<div role="combobox" title="Operation" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
+                + '<div role="combobox" aria-label="Add" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
             + '</div>'
             + '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group">'
                 + '<div class="dx-filterbuilder-group">'

From 25b902953920aa9ff122f32154cd1306536bbf9c Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Wed, 16 Oct 2024 12:10:59 +0800
Subject: [PATCH 7/9] add axe test

---
 .../tests/filterBuilder/filterBuilderA11y.ts  | 16 ++++++++++++++
 .../filterBuilderParts/markupTests.js         | 21 ++++++++++++++++++-
 .../testcafe-models/filterBuilder/index.ts    | 11 +++++++++-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
index aab654828df9..e799ed1c4fd5 100644
--- a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
+++ b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
@@ -4,6 +4,7 @@ import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
 import { createWidget } from '../../helpers/createWidget';
 import url from '../../helpers/getPageUrl';
 import { fields, filter } from './data';
+import { a11yCheck } from '../../helpers/accessibility/utils';
 
 fixture`Filter Builder Accessibility Tests`.page(
   url(__dirname, '../container.html'),
@@ -86,3 +87,18 @@ elements.forEach(({
     });
   });
 });
+
+test('Filter Builder - ARIA Attributes axe test', async (t) => {
+  const filterBuilder = new FilterBuilder('#container');
+
+  await t
+    .expect(filterBuilder.isReady())
+    .ok();
+
+  await a11yCheck(t, {}, '#container');
+}).before(async () => {
+  await createWidget('dxFilterBuilder', {
+    fields,
+    value: filter,
+  });
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
index 8576d6ae0388..98f2db07e811 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
@@ -93,7 +93,26 @@ QUnit.test('filter Content init by several conditions', function(assert) {
         return;
     }
     const $etalon = $('<div/>').html(
-        '<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
+        '<div class="dx-filterbuilder-group">'
+            + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1">'
+                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
+                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div>'
+                + '</div>'
+            + '</div>'
+        + '</div>'
+        + '<div class="dx-filterbuilder-group">'
+            + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1">'
+                + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Zipcode</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
+                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div>'
+                + '</div>'
+            + '</div>'
+        + '</div>'
     );
 
     const element = $('#container').dxFilterBuilder({
diff --git a/packages/testcafe-models/filterBuilder/index.ts b/packages/testcafe-models/filterBuilder/index.ts
index b3a87c538d93..67f1405258c7 100644
--- a/packages/testcafe-models/filterBuilder/index.ts
+++ b/packages/testcafe-models/filterBuilder/index.ts
@@ -1,4 +1,4 @@
-import { Selector } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import type { WidgetName } from '../types';
 import Widget from '../internal/widget';
 import Field from './field';
@@ -95,4 +95,13 @@ export default class FilterBuilder extends Widget {
     }
     return this.element.find(`.${className}`);
   }
+
+  isReady(): Promise<boolean> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as any).isReady(),
+      { dependencies: { getInstance } },
+    )();
+  }
 }

From ca15872e0c64c6e058503332edd6381e20bd2ce1 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Wed, 16 Oct 2024 15:53:46 +0800
Subject: [PATCH 8/9] remove title cases

---
 .../tests/filterBuilder/filterBuilderA11y.ts           | 10 +++++-----
 packages/devextreme/js/localization/messages/ar.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/ca.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/cs.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/de.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/el.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/en.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/es.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/fa.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/fi.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/fr.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/hu.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/it.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/ja.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/lt.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/lv.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/nb.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/nl.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/pl.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/pt.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/ro.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/ru.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/sl.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/sv.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/tr.json   | 10 +++++-----
 packages/devextreme/js/localization/messages/vi.json   | 10 +++++-----
 .../devextreme/js/localization/messages/zh-tw.json     | 10 +++++-----
 packages/devextreme/js/localization/messages/zh.json   | 10 +++++-----
 28 files changed, 140 insertions(+), 140 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
index e799ed1c4fd5..c79281afe629 100644
--- a/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
+++ b/e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderA11y.ts
@@ -14,13 +14,13 @@ const elements = [
   {
     name: 'Root Element',
     role: 'tree',
-    label: 'Filter Builder',
+    label: 'Filter builder',
     selector: (filterBuilder) => filterBuilder.getRootElement(),
   },
   {
     name: 'Group Item',
     role: 'treeitem',
-    label: 'Group Item',
+    label: 'Group item',
     selector: (filterBuilder) => filterBuilder.getGroupItem(),
   },
   {
@@ -50,19 +50,19 @@ const elements = [
   {
     name: 'Item Field',
     role: 'combobox',
-    label: 'Item Field',
+    label: 'Item field',
     selector: (filterBuilder) => filterBuilder.getItem('field', 2),
   },
   {
     name: 'Item Operation',
     role: 'combobox',
-    label: 'Item Operation',
+    label: 'Item operation',
     selector: (filterBuilder) => filterBuilder.getItem('operation', 2),
   },
   {
     name: 'Item Value',
     role: 'button',
-    label: 'Item Value',
+    label: 'Item value',
     selector: (filterBuilder) => filterBuilder.getItem('value', 2),
   },
 ];
diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
index 9d514609e75a..90d87c56aa2c 100644
--- a/packages/devextreme/js/localization/messages/ar.json
+++ b/packages/devextreme/js/localization/messages/ar.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "بين",
         "dxFilterBuilder-filterOperationAnyOf": "أي من",
         "dxFilterBuilder-filterOperationNoneOf": "ليس من",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "تغيير لون الخط",
         "dxHtmlEditor-dialogBackgroundCaption": "تغيير لون الخلفية",
diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
index 0d4f8c51b9fc..2d8c21617da8 100644
--- a/packages/devextreme/js/localization/messages/ca.json
+++ b/packages/devextreme/js/localization/messages/ca.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "És entre",
         "dxFilterBuilder-filterOperationAnyOf": "És alguna de",
         "dxFilterBuilder-filterOperationNoneOf": "No és cap",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Canvia el color de la lletra",
         "dxHtmlEditor-dialogBackgroundCaption": "Canvieu el color de fons",
diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
index 56c6614760ab..32f3abe1b963 100644
--- a/packages/devextreme/js/localization/messages/cs.json
+++ b/packages/devextreme/js/localization/messages/cs.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Mezi",
         "dxFilterBuilder-filterOperationAnyOf": "Libovolný z",
         "dxFilterBuilder-filterOperationNoneOf": "Žádný z",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Změna barvy písma",
         "dxHtmlEditor-dialogBackgroundCaption": "Změna barvy pozadí",
diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
index 4f600118fa95..935d45fc6831 100644
--- a/packages/devextreme/js/localization/messages/de.json
+++ b/packages/devextreme/js/localization/messages/de.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Zwischen",
         "dxFilterBuilder-filterOperationAnyOf": "Ist enthalten in",
         "dxFilterBuilder-filterOperationNoneOf": "Ist nicht enthalten in",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Schriftfarbe ändern",
         "dxHtmlEditor-dialogBackgroundCaption": "Hintergrundfarbe ändern",
diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
index a9cecb286234..3b229977bf45 100644
--- a/packages/devextreme/js/localization/messages/el.json
+++ b/packages/devextreme/js/localization/messages/el.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Είναι ανάμεσα",
         "dxFilterBuilder-filterOperationAnyOf": "Είναι κάποιο από αυτά",
         "dxFilterBuilder-filterOperationNoneOf": "Δεν είναι τίποτα από αυτά",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Αλλαγή χρώματος γραμματοσειράς",
         "dxHtmlEditor-dialogBackgroundCaption": "Αλλαγή χρώματος φόντου",
diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
index fbf4dcf5095c..fcbb7f86facb 100644
--- a/packages/devextreme/js/localization/messages/en.json
+++ b/packages/devextreme/js/localization/messages/en.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Is between",
         "dxFilterBuilder-filterOperationAnyOf": "Is any of",
         "dxFilterBuilder-filterOperationNoneOf": "Is none of",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
index 682385a463c5..30c59621210a 100644
--- a/packages/devextreme/js/localization/messages/es.json
+++ b/packages/devextreme/js/localization/messages/es.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Alguno de",
         "dxFilterBuilder-filterOperationNoneOf": "Ningún de",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Cambiar el color de la fuente",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambiar el color de fondo",
diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
index 8a5f94edb6f0..1a91f5ef551b 100644
--- a/packages/devextreme/js/localization/messages/fa.json
+++ b/packages/devextreme/js/localization/messages/fa.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "بین",
         "dxFilterBuilder-filterOperationAnyOf": "شامل یکی از",
         "dxFilterBuilder-filterOperationNoneOf": "شامل هیچکدام از",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "تغییر رنگ قلم",
         "dxHtmlEditor-dialogBackgroundCaption": "تغییر رنگ پس زمینه",
diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
index ce6bd086c078..0ec53c26cc72 100644
--- a/packages/devextreme/js/localization/messages/fi.json
+++ b/packages/devextreme/js/localization/messages/fi.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Välillä",
         "dxFilterBuilder-filterOperationAnyOf": "Joku näistä",
         "dxFilterBuilder-filterOperationNoneOf": "Ei mikään näistä",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
index 4164668d1469..4e0d66f19acf 100644
--- a/packages/devextreme/js/localization/messages/fr.json
+++ b/packages/devextreme/js/localization/messages/fr.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Est parmi",
         "dxFilterBuilder-filterOperationNoneOf": "N'est pas parmi",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Changer couleur police",
         "dxHtmlEditor-dialogBackgroundCaption": "Changer couleur fond",
diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
index d9f5ed1036b8..3cb7666c0c51 100644
--- a/packages/devextreme/js/localization/messages/hu.json
+++ b/packages/devextreme/js/localization/messages/hu.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Között",
         "dxFilterBuilder-filterOperationAnyOf": "Valamelyik",
         "dxFilterBuilder-filterOperationNoneOf": "Egyik sem",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Betűszín választás",
         "dxHtmlEditor-dialogBackgroundCaption": "Háttérszín választás",
diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
index 9ea520926e90..5ecc58fb4712 100644
--- a/packages/devextreme/js/localization/messages/it.json
+++ b/packages/devextreme/js/localization/messages/it.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Compreso",
         "dxFilterBuilder-filterOperationAnyOf": "Include",
         "dxFilterBuilder-filterOperationNoneOf": "Non include",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Cambia il colore del testo",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambia il colore di sfondo",
diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
index 9908d7d6982f..859ad1b95510 100644
--- a/packages/devextreme/js/localization/messages/ja.json
+++ b/packages/devextreme/js/localization/messages/ja.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "～から～の間",
         "dxFilterBuilder-filterOperationAnyOf": "どちらかを含む",
         "dxFilterBuilder-filterOperationNoneOf": "すべて含まない",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "フォントの色を変更",
         "dxHtmlEditor-dialogBackgroundCaption": "背景色を変更",
diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
index a2189c84b379..4f3209c20a43 100644
--- a/packages/devextreme/js/localization/messages/lt.json
+++ b/packages/devextreme/js/localization/messages/lt.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Intervale",
         "dxFilterBuilder-filterOperationAnyOf": "Kuris nors iš",
         "dxFilterBuilder-filterOperationNoneOf": "Nė vienas iš",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Pakeisti šrifto spalvą",
         "dxHtmlEditor-dialogBackgroundCaption": "Pakeisti fono spalvą",
diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
index 88c21a63f33e..ac498e533a50 100644
--- a/packages/devextreme/js/localization/messages/lv.json
+++ b/packages/devextreme/js/localization/messages/lv.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Ir starp",
         "dxFilterBuilder-filterOperationAnyOf": "Ir viens no",
         "dxFilterBuilder-filterOperationNoneOf": "Nav neviens no",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Nomainīt Fonta Krāsu",
         "dxHtmlEditor-dialogBackgroundCaption": "Nomainīt Fona Krāsu",
diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
index 3e59b2baba5c..97527cde1df3 100644
--- a/packages/devextreme/js/localization/messages/nb.json
+++ b/packages/devextreme/js/localization/messages/nb.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Er mellom",
         "dxFilterBuilder-filterOperationAnyOf": "Er noen av",
         "dxFilterBuilder-filterOperationNoneOf": "Er ingen av",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Skift fontfarge",
         "dxHtmlEditor-dialogBackgroundCaption": "Skift bakgrunnsfarge",
diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
index 943f93566c2f..808a17f4fe00 100644
--- a/packages/devextreme/js/localization/messages/nl.json
+++ b/packages/devextreme/js/localization/messages/nl.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Is tussen",
         "dxFilterBuilder-filterOperationAnyOf": "Is een van",
         "dxFilterBuilder-filterOperationNoneOf": "Is geen van",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Tekstkleur",
         "dxHtmlEditor-dialogBackgroundCaption": "Achtergrondkleur",
diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
index c8dca2984b9e..10ab036c92da 100644
--- a/packages/devextreme/js/localization/messages/pl.json
+++ b/packages/devextreme/js/localization/messages/pl.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Pomiędzy",
         "dxFilterBuilder-filterOperationAnyOf": "Jest zawarty w",
         "dxFilterBuilder-filterOperationNoneOf": "Nie jest zawarty w",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Zmień kolor czcionki",
         "dxHtmlEditor-dialogBackgroundCaption": "Zmień kolor tła",
diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
index f30d9a8b8980..7746c5d1e97d 100644
--- a/packages/devextreme/js/localization/messages/pt.json
+++ b/packages/devextreme/js/localization/messages/pt.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Entre",
         "dxFilterBuilder-filterOperationAnyOf": "Algum de",
         "dxFilterBuilder-filterOperationNoneOf": "Nenhum de",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Alterar cor da fonte",
         "dxHtmlEditor-dialogBackgroundCaption": "Alterar cor de plano de fundo",
diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
index ff8676202fe7..a03315052b14 100644
--- a/packages/devextreme/js/localization/messages/ro.json
+++ b/packages/devextreme/js/localization/messages/ro.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Este între",
         "dxFilterBuilder-filterOperationAnyOf": "Este oricare dintre",
         "dxFilterBuilder-filterOperationNoneOf": "Nu este nici una dintre",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Schimbă culoarea fontului",
         "dxHtmlEditor-dialogBackgroundCaption": "Schimbă culoarea de fundal",
diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
index 7e4854840525..dc3f602f0cdc 100644
--- a/packages/devextreme/js/localization/messages/ru.json
+++ b/packages/devextreme/js/localization/messages/ru.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "В диапазоне",
         "dxFilterBuilder-filterOperationAnyOf": "Любой из",
         "dxFilterBuilder-filterOperationNoneOf": "Ни один из",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Изменить цвет текста",
         "dxHtmlEditor-dialogBackgroundCaption": "Изменить цвет фона",
diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
index 64dc875788e2..30668764a3c0 100644
--- a/packages/devextreme/js/localization/messages/sl.json
+++ b/packages/devextreme/js/localization/messages/sl.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Je med",
         "dxFilterBuilder-filterOperationAnyOf": "Je karkoli izmed",
         "dxFilterBuilder-filterOperationNoneOf": "Ni nič izmed",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Zamenjaj barvo pisave",
         "dxHtmlEditor-dialogBackgroundCaption": "Zamenjaj barvo ozadja",
diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
index df21ea9bf39f..36f8a64995cc 100644
--- a/packages/devextreme/js/localization/messages/sv.json
+++ b/packages/devextreme/js/localization/messages/sv.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Mellan",
         "dxFilterBuilder-filterOperationAnyOf": "Någon av",
         "dxFilterBuilder-filterOperationNoneOf": "Ingen av",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
index 76d9f806ee12..8a3335636d1a 100644
--- a/packages/devextreme/js/localization/messages/tr.json
+++ b/packages/devextreme/js/localization/messages/tr.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Arasında",
         "dxFilterBuilder-filterOperationAnyOf": "Herhangi biri",
         "dxFilterBuilder-filterOperationNoneOf": "Hiçbiri",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Yazı Tipi Rengini Değiştir",
         "dxHtmlEditor-dialogBackgroundCaption": "Arka Plan Rengini Değiştir",
diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
index b9bf1cb22393..7bb34bc2a828 100644
--- a/packages/devextreme/js/localization/messages/vi.json
+++ b/packages/devextreme/js/localization/messages/vi.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "Là giữa",
         "dxFilterBuilder-filterOperationAnyOf": "Là bất kỳ của",
         "dxFilterBuilder-filterOperationNoneOf": "Không không có của",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "Đổi màu phông chữ",
         "dxHtmlEditor-dialogBackgroundCaption": "Đổi màu nền",
diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
index 8c00290741bb..1096166856aa 100644
--- a/packages/devextreme/js/localization/messages/zh-tw.json
+++ b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "之間",
         "dxFilterBuilder-filterOperationAnyOf": "任何一個",
         "dxFilterBuilder-filterOperationNoneOf": "任何一個都不",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "更改字體顏色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景顏色",
diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
index d3492ad39c83..19a665d37797 100644
--- a/packages/devextreme/js/localization/messages/zh.json
+++ b/packages/devextreme/js/localization/messages/zh.json
@@ -362,15 +362,15 @@
         "dxFilterBuilder-filterOperationBetween": "之间",
         "dxFilterBuilder-filterOperationAnyOf": "任何一个",
         "dxFilterBuilder-filterOperationNoneOf": "任何一个都不",
-        "dxFilterBuilder-filterAriaRootElement": "Filter Builder",
+        "dxFilterBuilder-filterAriaRootElement": "Filter builder",
         "dxFilterBuilder-filterAriaGroupLevel": "Level {0}",
-        "dxFilterBuilder-filterAriaGroupItem": "Group Item",
+        "dxFilterBuilder-filterAriaGroupItem": "Group item",
         "dxFilterBuilder-filterAriaOperationButton": "Operation",
         "dxFilterBuilder-filterAriaAddButton": "Add",
         "dxFilterBuilder-filterAriaRemoveButton": "Remove {0}",
-        "dxFilterBuilder-filterAriaItemField": "Item Field",
-        "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
-        "dxFilterBuilder-filterAriaItemValue": "Item Value",
+        "dxFilterBuilder-filterAriaItemField": "Item field",
+        "dxFilterBuilder-filterAriaItemOperation": "Item operation",
+        "dxFilterBuilder-filterAriaItemValue": "Item value",
 
         "dxHtmlEditor-dialogColorCaption": "更改字体颜色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景颜色",

From 37d65b43db7091bac28ac8d64f127a7bf861d747 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Wed, 16 Oct 2024 16:14:41 +0800
Subject: [PATCH 9/9] update markupTests

---
 .../filterBuilderParts/markupTests.js         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
index 98f2db07e811..d6768a71067f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
@@ -17,7 +17,7 @@ QUnit.test('markup init', function(assert) {
     const $etalon = $(
         '<div id="container" class="dx-filterbuilder dx-widget">'
             + '<div class="dx-filterbuilder-group">'
-                + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="1" aria-owns="' + guid + '">'
+                + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group item" aria-level="1" aria-owns="' + guid + '">'
                     + '<div role="combobox" title="Operation" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
                     + '<div role="combobox" aria-label="Add" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
                 + '</div>'
@@ -64,7 +64,7 @@ QUnit.test('filter Content init by one condition', function(assert) {
 
     const $etalon = $('<div/>').html(
         '<div class="dx-filterbuilder-group">'
-            + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="2" aria-owns="' + guid + '">'
+            + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group item" aria-level="2" aria-owns="' + guid + '">'
                 + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div>'
                 + '<div role="combobox" title="Operation" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
                 + '<div role="combobox" aria-label="Add" aria-haspopup="true" aria-expanded="false" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
@@ -73,10 +73,10 @@ QUnit.test('filter Content init by one condition', function(assert) {
                 + '<div class="dx-filterbuilder-group">'
                     + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="2">'
                         + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
-                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
-                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
+                        + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
                         + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                            + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div>'
+                            + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item value" aria-haspopup="true">K&amp;S Music</div>'
                         + '</div>'
                     + '</div>'
                 + '</div>'
@@ -96,20 +96,20 @@ QUnit.test('filter Content init by several conditions', function(assert) {
         '<div class="dx-filterbuilder-group">'
             + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1">'
                 + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
                 + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div>'
+                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item value" aria-haspopup="true">K&amp;S Music</div>'
                 + '</div>'
             + '</div>'
         + '</div>'
         + '<div class="dx-filterbuilder-group">'
             + '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1">'
                 + '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Zipcode</div>'
-                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item field" aria-haspopup="true" aria-expanded="false">Zipcode</div>'
+                + '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
                 + '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
-                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div>'
+                    + '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item value" aria-haspopup="true">98027</div>'
                 + '</div>'
             + '</div>'
         + '</div>'