From 036e48619caa9226d71ba2a0a3d1d02a3da65b36 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Wed, 25 Sep 2024 13:46:47 +0800 Subject: [PATCH] Treeview and List: Add localization for item checkBoxes aria-label value 'Check State' (T1247518) (#28099) --- .../list/m_list.edit.decorator.selection.ts | 2 +- .../ui/tree_view/m_tree_view.base.ts | 2 +- .../js/localization/messages/ar.json | 1 + .../js/localization/messages/ca.json | 1 + .../js/localization/messages/cs.json | 1 + .../js/localization/messages/de.json | 1 + .../js/localization/messages/el.json | 1 + .../js/localization/messages/en.json | 1 + .../js/localization/messages/es.json | 1 + .../js/localization/messages/fa.json | 1 + .../js/localization/messages/fi.json | 1 + .../js/localization/messages/fr.json | 1 + .../js/localization/messages/hu.json | 1 + .../js/localization/messages/it.json | 1 + .../js/localization/messages/ja.json | 1 + .../js/localization/messages/lt.json | 1 + .../js/localization/messages/lv.json | 1 + .../js/localization/messages/nb.json | 1 + .../js/localization/messages/nl.json | 1 + .../js/localization/messages/pl.json | 1 + .../js/localization/messages/pt.json | 1 + .../js/localization/messages/ro.json | 1 + .../js/localization/messages/ru.json | 1 + .../js/localization/messages/sl.json | 1 + .../js/localization/messages/sv.json | 1 + .../js/localization/messages/tr.json | 1 + .../js/localization/messages/vi.json | 1 + .../js/localization/messages/zh-tw.json | 1 + .../js/localization/messages/zh.json | 1 + .../helpers/ariaAccessibilityTestHelper.js | 2 +- .../list.markup.tests.js | 18 ++++++++++++++++++ .../listParts/commonTests.js | 8 ++++---- .../treeView.checkboxes.tests.js | 19 +++++++++++++++++-- 33 files changed, 69 insertions(+), 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 index bdd8b45c334a..b3460a5577c8 100644 --- 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 @@ -56,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 index 01373f3af482..07f3aed9a7c0 100644 --- 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 index 6f38253053fb..0dddc8bea27e 100644 --- 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 index c44675c7526c..71ad0bd46266 100644 --- 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 index 8deace67e916..d884fc6d6045 100644 --- 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 index 4c7a56a7f0b4..aae65b445d11 100644 --- 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 index 5c0c7840173b..1f1903e72cf1 100644 --- 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 index 7ca27a47dd8d..591e3dca7710 100644 --- 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 index 035c3dfbc724..47e1e20baee8 100644 --- 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 index ec41b69af938..66d29f29205a 100644 --- 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 index 2863f52698f9..d00aff8e1863 100644 --- 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 index 8314f1b9b499..ee2bb94a41e5 100644 --- 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 index 3d5fdb683c93..a6b0fd737c3f 100644 --- 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 index be2d8f337aa2..70fc3b5c09b9 100644 --- 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 index 35298ece91f4..ab2632f9c4b8 100644 --- 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 index b0dedf528bac..82aa589d6793 100644 --- 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 index d3ab4d2664b2..d0d324c9dc18 100644 --- 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 index 30336fd6526e..8ee7e5b386c8 100644 --- 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 index 7c27941d3673..e17fe6e05f11 100644 --- 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 index f4f79e614a84..8b917dede0f6 100644 --- 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 index 94b21ad40998..054d70689c01 100644 --- 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 index fbc2d79c6699..b2870a9503eb 100644 --- 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 index f3daae2fea47..af11acfc49eb 100644 --- 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 index c439085e0c35..9d99b7393a1f 100644 --- 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 index fe5e25c191d5..46418248deb9 100644 --- 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 index 3fb51cc16a45..32f6f41e71c6 100644 --- 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 index 151a8df09057..882c23554106 100644 --- 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 index 3a31c2ab0efa..d28a876d31ee 100644 --- 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 index 1dd5f29b2cf4..5038005bd6a2 100644 --- 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 index 8539b631f049..9a1dc3f0b533 100644 --- 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 index a2bd43cd2d27..48005fc8f8de 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/list.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/list.markup.tests.js @@ -557,6 +557,24 @@ QUnit.module('decorators markup', {}, () => { assert.strictEqual($multipleContainer.attr('aria-label'), `${localizedSelectAllText}, Not checked`, 'unchecked checkbox aria-label should be equal to localized text'); }); + 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 index 4d1f61bafca0..d1f719a7eef3 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js @@ -4386,7 +4386,7 @@ QUnit.module('Accessibility', () => { assert.strictEqual($selectAll.attr('aria-label'), 'Select All, Not checked'); }); - 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', @@ -4395,10 +4395,10 @@ QUnit.module('Accessibility', () => { 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', @@ -4407,7 +4407,7 @@ QUnit.module('Accessibility', () => { const $radioButtons = $(`.${LIST_SELECT_RADIOBUTTON_CLASS}`); - assert.strictEqual($radioButtons.attr('aria-label'), 'Check State'); + assert.strictEqual($radioButtons.attr('aria-label'), 'Check state'); }); [true, false].forEach(allowItemDeleting => { 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 index 32784e586a4c..f556caac8c24 100644 --- 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,7 +308,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) { initTree({ items: [ { text: 'item' } ], showCheckBoxesMode: 'normal' @@ -315,7 +316,21 @@ QUnit.test('checkbox should have aria-label="Check State" attribute', function(a 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) {