Treeview and List: Add localization for item checkBoxes aria-label va…

…lue 'Check State' (T1247518) (#28098)
DevExpress · Sep 25, 2024 · 663a1e6 · 663a1e6
1 parent 4517867
commit 663a1e6
Show file tree

Hide file tree

Showing 33 changed files with 73 additions and 9 deletions.
diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts
@@ -3,6 +3,7 @@ import { extend } from '@js/core/utils/extend';
 import { name as clickEventName } from '@js/events/click';
 import eventsEngine from '@js/events/core/events_engine';
 import { addNamespace } from '@js/events/utils/index';
+import messageLocalization from '@js/localization/message';
 import CheckBox from '@js/ui/check_box';
 import RadioButton from '@js/ui/radio_group/radio_button';
 import errors from '@js/ui/widget/ui.errors';
@@ -55,7 +56,7 @@ registerDecorator(
       // eslint-disable-next-line no-new
       new this._controlWidget($control, extend(this._commonOptions(), {
         value: this._isSelected($itemElement),
-        elementAttr: { 'aria-label': 'Check State' },
+        elementAttr: { 'aria-label': messageLocalization.format('CheckState') },
         focusStateEnabled: false,
         hoverStateEnabled: false,
         onValueChanged: function (e) {

diff --git a/packages/devextreme/js/__internal/ui/tree_view/m_tree_view.base.ts b/packages/devextreme/js/__internal/ui/tree_view/m_tree_view.base.ts
@@ -1260,7 +1260,7 @@ const TreeViewBase = (HierarchicalCollectionWidget as any).inherit({
       value: node.internalFields.selected,
       onValueChanged: this._changeCheckboxValue.bind(this),
       focusStateEnabled: false,
-      elementAttr: { 'aria-label': 'Check State' },
+      elementAttr: { 'aria-label': messageLocalization.format('CheckState') },
       disabled: this._disabledGetter(node),
     });
   },

diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
@@ -3,6 +3,7 @@
         "Yes": "نعم",
         "No": "لا",
         "Cancel": "الغاء",
+        "CheckState": "Check state",
         "Close": "إغلاق",
         "Clear": "تنضيف",
         "Done": "تم",

diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
@@ -3,6 +3,7 @@
         "Yes": "Sí",
         "No": "No",
         "Cancel": "Cancel·lar",
+        "CheckState": "Check state",
         "Close": "Tanca",
         "Clear": "Clar",
         "Done": "Fer",

diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
@@ -3,6 +3,7 @@
         "Yes": "Ano",
         "No": "Ne",
         "Cancel": "Zrušit",
+        "CheckState": "Check state",
         "Close": "Zavřít",
         "Clear": "Smazat",
         "Done": "Hotovo",

diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
@@ -3,6 +3,7 @@
         "Yes": "Ja",
         "No": "Nein",
         "Cancel": "Abbrechen",
+        "CheckState": "Check state",
         "Close": "Schließen",
         "Clear": "Löschen",
         "Done": "Fertig",

diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
@@ -3,6 +3,7 @@
         "Yes": "Ναί",
         "No": "Όχι",
         "Cancel": "Ακύρωση",
+        "CheckState": "Check state",
         "Close": "Κλείσιμο",
         "Clear": "Εκκαθάριση",
         "Done": "Καταχώρηση",

diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
@@ -3,6 +3,7 @@
         "Yes": "Yes",
         "No": "No",
         "Cancel": "Cancel",
+        "CheckState": "Check state",
         "Close": "Close",
         "Clear": "Clear",
         "Done": "Done",

diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
@@ -3,6 +3,7 @@
         "Yes": "Sí",
         "No": "No",
         "Cancel": "Cancelar",
+        "CheckState": "Check state",
         "Close": "Cerca",
         "Clear": "Limpiar",
         "Done": "Hecho",

diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
@@ -3,6 +3,7 @@
         "Yes": "بلی",
         "No": "خیر",
         "Cancel": "لغو",
+        "CheckState": "Check state",
         "Close": "Close",
         "Clear": "حذف",
         "Done": "تایید",

diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
@@ -3,6 +3,7 @@
         "Yes": "Kyllä",
         "No": "Ei",
         "Cancel": "Peruuta",
+        "CheckState": "Check state",
         "Close": "Sulkea",
         "Clear": "Tyhjennä",
         "Done": "Valmis",

diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
@@ -3,6 +3,7 @@
         "Yes": "Oui",
         "No": "Non",
         "Cancel": "Annuler",
+        "CheckState": "Check state",
         "Close": "Fermer",
         "Clear": "Vider",
         "Done": "Terminé",

diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
@@ -3,6 +3,7 @@
         "Yes": "Igen",
         "No": "Nem",
         "Cancel": "Mégse",
+        "CheckState": "Check state",
         "Close": "Bezárás",
         "Clear": "Törlés",
         "Done": "Kész",

diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
@@ -3,6 +3,7 @@
         "Yes": "Sì",
         "No": "No",
         "Cancel": "Annulla",
+        "CheckState": "Check state",
         "Close": "Chiudi",
         "Clear": "Cancella",
         "Done": "Fatto",

diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
@@ -3,6 +3,7 @@
         "Yes": "はい",
         "No": "いいえ",
         "Cancel": "キャンセル",
+        "CheckState": "Check state",
         "Close": "閉じる",
         "Clear": "クリア",
         "Done": "完了",

diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
@@ -3,6 +3,7 @@
         "Yes": "Taip",
         "No": "Ne",
         "Cancel": "Atšaukti",
+        "CheckState": "Check state",
         "Close": "Close",
         "Clear": "Išvalyti",
         "Done": "Atlikta",

diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
@@ -3,6 +3,7 @@
         "Yes": "Jā",
         "No": "Nē",
         "Cancel": "Atcelt",
+        "CheckState": "Check state",
         "Close": "Aizvērt",
         "Clear": "Notīrīt",
         "Done": "Gatavs",

diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
@@ -3,6 +3,7 @@
         "Yes": "Ja",
         "No": "Nei",
         "Cancel": "Avbryt",
+        "CheckState": "Check state",
         "Close": "Lukke",
         "Clear": "Slett",
         "Done": "Fullført",

diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
@@ -3,6 +3,7 @@
         "Yes": "Ja",
         "No": "Nee",
         "Cancel": "Annuleren",
+        "CheckState": "Check state",
         "Close": "Sluiten",
         "Clear": "Wissen",
         "Done": "Klaar",

diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
@@ -3,6 +3,7 @@
         "Yes": "Tak",
         "No": "Nie",
         "Cancel": "Anuluj",
+        "CheckState": "Check state",
         "Close": "Zamknij",
         "Clear": "Usuń",
         "Done": "Gotowe",

diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
@@ -3,6 +3,7 @@
         "Yes": "Sim",
         "No": "Não",
         "Cancel": "Cancelar",
+        "CheckState": "Check state",
         "Close": "Fechar",
         "Clear": "Limpar",
         "Done": "Concluído",

diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
@@ -3,6 +3,7 @@
         "Yes": "Da",
         "No": "Nu",
         "Cancel": "Anulare",
+        "CheckState": "Check state",
         "Close": "Închide",
         "Clear": "Curăță",
         "Done": "Gata",

diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
@@ -3,6 +3,7 @@
         "Yes": "Да",
         "No": "Нет",
         "Cancel": "Отмена",
+        "CheckState": "Check state",
         "Close": "Закрыть",
         "Clear": "Очистить",
         "Done": "Готово",

diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
@@ -3,6 +3,7 @@
         "Yes": "Da",
         "No": "Ne",
         "Cancel": "Prekliči",
+        "CheckState": "Check state",
         "Close": "Zapri",
         "Clear": "Pobriši",
         "Done": "Končano",

diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
@@ -3,6 +3,7 @@
         "Yes": "Ja",
         "No": "Nej",
         "Cancel": "Avbryt",
+        "CheckState": "Check state",
         "Close": "Stäng",
         "Clear": "Rensa",
         "Done": "Klar",

diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
@@ -3,6 +3,7 @@
         "Yes": "Evet",
         "No": "Hayır",
         "Cancel": "İptal",
+        "CheckState": "Check state",
         "Close": "Kapat",
         "Clear": "Temizle",
         "Done": "Tamam",

diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
@@ -3,6 +3,7 @@
         "Yes": "Có",
         "No": "Không",
         "Cancel": "Hủy",
+        "CheckState": "Check state",
         "Close": "Đóng",
         "Clear": "Làm sạch",
         "Done": "Hoàn tất",

diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -3,6 +3,7 @@
         "Yes": "是",
         "No": "否",
         "Cancel": "取消",
+        "CheckState": "Check state",
         "Close": "關閉",
         "Clear": "清除",
         "Done": "完成",

diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
@@ -3,6 +3,7 @@
         "Yes": "是",
         "No": "否",
         "Cancel": "取消",
+        "CheckState": "Check state",
         "Close": "關閉",
         "Clear": "清除",
         "Done": "完成",

diff --git a/packages/devextreme/testing/helpers/ariaAccessibilityTestHelper.js b/packages/devextreme/testing/helpers/ariaAccessibilityTestHelper.js
@@ -77,7 +77,7 @@ class ariaAccessibilityTestHelper {
         const expectedAttributes = {
             role: 'checkbox',
             'aria-checked': $checkBox.hasClass('dx-checkbox-indeterminate') ? 'mixed' : defaultValue,
-            'aria-label': 'Check State',
+            'aria-label': 'Check state',
         };
 
         if(attributes && attributes.includes('aria-disabled')) {

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/list.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/list.markup.tests.js
@@ -3,6 +3,7 @@ import { isRenderer } from 'core/utils/type';
 import config from 'core/config';
 import devices from 'core/devices';
 import List from 'ui/list';
+import localization from 'localization';
 import ariaAccessibilityTestHelper from '../../helpers/ariaAccessibilityTestHelper.js';
 
 import 'generic_light.css!';
@@ -432,6 +433,8 @@ const TOGGLE_DELETE_SWITCH_CLASS = 'dx-list-toggle-delete-switch';
 const TOGGLE_DELETE_SWITCH_ICON_CLASS = 'dx-icon-toggle-delete';
 const SELECT_CHECKBOX_CONTAINER_CLASS = 'dx-list-select-checkbox-container';
 const SELECT_CHECKBOX_CLASS = 'dx-list-select-checkbox';
+const SELECT_ALL_CHECKBOX_CLASS = 'dx-list-select-all-checkbox';
+const SELECT_ALL_CLASS = 'dx-list-select-all';
 const SELECT_RADIO_BUTTON_CONTAINER_CLASS = 'dx-list-select-radiobutton-container';
 const SELECT_RADIO_BUTTON_CLASS = 'dx-list-select-radiobutton';
 const REORDER_HANDLE_CONTAINER_CLASS = 'dx-list-reorder-handle-container';
@@ -531,6 +534,24 @@ QUnit.module('decorators markup', {}, () => {
         assert.equal($checkbox.length, 1, 'checkbox rendered');
     });
 
+    QUnit.test('item checkbox aria-label attribute should be equal to custom localized text (T1247518)', function(assert) {
+        const localizedCheckStateText = 'custom-select-all';
+        localization.loadMessages({ 'en': { 'CheckState': localizedCheckStateText } });
+
+        const $list = $($('#list').dxList({
+            dataSource: [
+                { id: 1, text: 'Item 1' },
+                { id: 2, text: 'Item 2' },
+                { id: 3, text: 'Item 3' },
+            ],
+            showSelectionControls: true,
+            selectionMode: 'all',
+        }));
+        const $itemCheckBox = $list.find(`.${SELECT_CHECKBOX_CLASS}`).eq(0);
+
+        assert.strictEqual($itemCheckBox.attr('aria-label'), localizedCheckStateText, 'item checkbox aria-label is equal to localized text');
+    });
+
     QUnit.test('list item markup should be correct, reordering decorator', function(assert) {
         const $list = $($('#templated-list').dxList({
             items: ['0'],

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
@@ -4184,7 +4184,7 @@ QUnit.test('SelectAll checkbox should have aria-label="Select All" attribute', f
     assert.strictEqual($selectAllCheckBox.attr('aria-label'), 'Select All');
 });
 
-QUnit.test('checkbox should have aria-label="Check State" attribute', function(assert) {
+QUnit.test('checkbox should have aria-label="Check state" attribute', function(assert) {
     $('#list').dxList({
         items: ['text 1', 'text 2'],
         selectionMode: 'multiple',
@@ -4193,10 +4193,10 @@ QUnit.test('checkbox should have aria-label="Check State" attribute', function(a
 
     const $checkboxes = $(`.${LIST_SELECT_CHECKBOX_CLASS}`);
 
-    assert.strictEqual($checkboxes.attr('aria-label'), 'Check State');
+    assert.strictEqual($checkboxes.attr('aria-label'), 'Check state');
 });
 
-QUnit.test('radio buttons should have aria-label="Check State" attribute', function(assert) {
+QUnit.test('radio buttons should have aria-label="Check state" attribute', function(assert) {
     $('#list').dxList({
         items: ['text 1', 'text 2'],
         selectionMode: 'single',
@@ -4205,7 +4205,7 @@ QUnit.test('radio buttons should have aria-label="Check State" attribute', funct
 
     const $radioButtons = $(`.${LIST_SELECT_RADIOBUTTON_CLASS}`);
 
-    assert.strictEqual($radioButtons.attr('aria-label'), 'Check State');
+    assert.strictEqual($radioButtons.attr('aria-label'), 'Check state');
 });
 
 let helper;

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.checkboxes.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.checkboxes.tests.js
@@ -3,6 +3,7 @@ import TreeViewTestWrapper from '../../helpers/TreeViewTestHelper.js';
 import { Deferred } from 'core/utils/deferred';
 import CustomStore from 'data/custom_store';
 import { DATA, data2 } from './treeViewParts/testData.js';
+import localization from 'localization';
 import 'ui/tree_view';
 
 import 'generic_light.css!';
@@ -307,15 +308,29 @@ QUnit.test('selectAll checkbox should have aria-label="Select All" attribute', f
     assert.strictEqual($selectAllCheckbox.attr('aria-label'), 'Select All');
 });
 
-QUnit.test('checkbox should have aria-label="Check State" attribute', function(assert) {
+QUnit.test('checkbox should have aria-label="Check state" attribute', function(assert) {
     initTree({
         items: [ { text: 'item' } ],
         showCheckBoxesMode: 'normal'
     });
 
     const $checkbox = $(`.${CHECKBOX_CLASS}`);
 
-    assert.strictEqual($checkbox.attr('aria-label'), 'Check State');
+    assert.strictEqual($checkbox.attr('aria-label'), 'Check state');
+});
+
+QUnit.test('checkbox should have a correct aria-label value based on localization (T1247518)', function(assert) {
+    const localizedCheckStateText = 'custom-select-all';
+    localization.loadMessages({ 'en': { 'CheckState': localizedCheckStateText } });
+
+    initTree({
+        items: [ { text: 'item' } ],
+        showCheckBoxesMode: 'normal'
+    });
+
+    const $checkbox = $(`.${CHECKBOX_CLASS}`);
+
+    assert.strictEqual($checkbox.attr('aria-label'), localizedCheckStateText, 'checkbox aria-label has correct localized value');
 });
 
 QUnit.test('SelectAll checkBox should select all values on enter key when no items selected', function(assert) {