T1328637 - List - Select All checkbox aria-label does not reflect the selectAllText value (DevExpress#33579)

Author: dmlvr

packages/devextreme/js/__internal/ui/list/list.edit.decorator.selection.ts

@@ -162,20 +162,20 @@ class EditDecoratorSelection extends EditDecorator {
       .addClass(SELECT_DECORATOR_SELECT_ALL_CHECKBOX_CLASS)
       .appendTo(this._$selectAll);
 
+    const { selectAllText = messageLocalization.format('dxList-selectAll') } = this._list.option();
+
     this._selectAllCheckBox = this._list._createComponent(
       selectAllCheckBoxElement,
       CheckBox,
       {
-        elementAttr: { 'aria-label': messageLocalization.format('dxList-selectAll') },
+        elementAttr: { 'aria-label': selectAllText },
         focusStateEnabled: false,
         hoverStateEnabled: false,
       },
     );
 
     this._selectAllCheckBox.registerKeyHandler('downArrow', downArrowHandler);
 
-    const { selectAllText = '' } = this._list.option();
-
     $('<div>').addClass(SELECT_DECORATOR_SELECT_ALL_LABEL_CLASS)
       .text(selectAllText)
       .appendTo(this._$selectAll);
@@ -213,13 +213,14 @@ class EditDecoratorSelection extends EditDecorator {
     }
 
     const { value } = this._selectAllCheckBox?.option() ?? {};
+    const { selectAllText = messageLocalization.format('dxList-selectAll') } = this._list.option();
 
     const indeterminate = value === undefined;
     const checkedState = value ? 'checked' : 'notChecked';
 
     const stateVariableName = indeterminate ? 'indeterminate' : checkedState;
 
-    const label = `${messageLocalization.format('dxList-selectAll')}, ${messageLocalization.format(`dxList-selectAll-${stateVariableName}`)}`;
+    const label = `${selectAllText}, ${messageLocalization.format(`dxList-selectAll-${stateVariableName}`)}`;
     // @ts-expect-error ts-error
     this._$selectAll.attr({ 'aria-label': label });
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js

@@ -5297,4 +5297,49 @@ QUnit.module('Accessibility', () => {
         $groupHeader.trigger('dxclick');
         assert.strictEqual($groupHeader.attr('aria-expanded'), 'true', 'aria-expanded is changed');
     });
+
+    QUnit.test('SelectAll checkbox aria-label should reflect selectAllText option on init (T1328637)', function(assert) {
+        $('#list').dxList({
+            selectionMode: 'all',
+            showSelectionControls: true,
+            selectAllText: 'custom-select-all',
+        });
+
+        const $selectAllCheckBox = $(`.${LIST_SELECT_ALL_CHECKBOX_CLASS}`);
+
+        assert.strictEqual($selectAllCheckBox.attr('aria-label'), 'custom-select-all',
+            'checkbox aria-label uses selectAllText');
+    });
+
+    QUnit.test('Select all container aria-label should reflect selectAllText option on init (T1328637)', function(assert) {
+        $('#list').dxList({
+            selectionMode: 'all',
+            showSelectionControls: true,
+            selectAllText: 'custom-select-all',
+        });
+
+        const $selectAll = $(`.${LIST_SELECT_ALL_CLASS}`);
+
+        assert.strictEqual($selectAll.attr('aria-label'), 'custom-select-all, Not checked',
+            'container aria-label uses selectAllText');
+    });
+
+    QUnit.test('Select all aria-labels should update when selectAllText changes at runtime (T1328637)', function(assert) {
+        const instance = $('#list').dxList({
+            items: ['text 1'],
+            selectionMode: 'all',
+            showSelectionControls: true,
+        }).dxList('instance');
+
+        instance.option('selectAllText', 'custom-select-all');
+
+        const $selectAll = $(`.${LIST_SELECT_ALL_CLASS}`);
+        const $selectAllCheckBox = $(`.${LIST_SELECT_ALL_CHECKBOX_CLASS}`);
+
+        assert.strictEqual($selectAll.attr('aria-label'), 'custom-select-all, Not checked',
+            'container aria-label updated after runtime change');
+        assert.strictEqual($selectAllCheckBox.attr('aria-label'), 'custom-select-all',
+            'checkbox aria-label updated after runtime change');
+    });
+
 });