').attr('aria-label', label).appendTo($headerPanel);
+ const $toolbar = $('
').appendTo($headerPanel);
+
+ this.setAria('label', label, $toolbar);
this._toolbar = this._createComponent($toolbar, Toolbar, this._toolbarOptions);
} else {
this._toolbar.option(this._toolbarOptions!);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_modules.ts b/packages/devextreme/js/__internal/grids/grid_core/m_modules.ts
index 98b7a1b77786..5fa9f6f4a6dc 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/m_modules.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/m_modules.ts
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
/* eslint-disable max-classes-per-file */
-/* eslint-disable @typescript-eslint/method-signature-style */
+
import messageLocalization from '@js/common/core/localization/message';
import type { Component } from '@js/core/component';
import type { dxElementWrapper } from '@js/core/renderer';
@@ -9,7 +9,7 @@ import Callbacks from '@js/core/utils/callbacks';
// @ts-expect-error
import { grep } from '@js/core/utils/common';
import { each } from '@js/core/utils/iterator';
-import { isFunction } from '@js/core/utils/type';
+import { isDefined, isFunction } from '@js/core/utils/type';
import { hasWindow } from '@js/core/utils/window';
import errors from '@js/ui/widget/ui.errors';
@@ -145,14 +145,23 @@ export class ModuleItem {
return this._actions[actionName];
}
- public setAria(name, value, $target) {
+ public setAria(
+ name: string,
+ value: string | number | boolean | undefined,
+ $target: dxElementWrapper,
+ ) {
+ if (!isDefined(value)) {
+ return;
+ }
+
const target = $target.get(0);
const prefix = name !== 'role' && name !== 'id' ? 'aria-' : '';
+ const normalizedValue = String(value).replace(/\s+/g, ' ').trim();
- if (target.setAttribute) {
- target.setAttribute(prefix + name, value);
+ if (target?.setAttribute) {
+ target.setAttribute(prefix + name, normalizedValue);
} else {
- $target.attr(prefix + name, value);
+ $target.attr(prefix + name, normalizedValue);
}
}
@@ -485,9 +494,8 @@ export function processModules(
rootViewTypes,
);
- // eslint-disable-next-line no-param-reassign
componentInstance._controllers = createModuleItems(controllerTypes);
- // eslint-disable-next-line no-param-reassign
+
componentInstance._views = createModuleItems(viewTypes);
}
diff --git a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
index 7a906d37c537..aa6982bf02cd 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
@@ -396,7 +396,7 @@ const rowsView = (Base: ModuleType) => class RowsViewMasterDetailExten
const isEditForm = row.isEditing;
if (!isEditForm) {
- $detailCell.attr('aria-roledescription', messageLocalization.format('dxDataGrid-masterDetail'));
+ this.setAria('roledescription', messageLocalization.format('dxDataGrid-masterDetail'), $detailCell);
}
return $detailCell;
diff --git a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
index da67a32f4c54..503d34b73238 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
@@ -899,7 +899,7 @@ export const rowsViewSelectionExtenderMixin = (Base: ModuleType) => cl
$row
.toggleClass(ROW_SELECTION_CLASS, isSelected === undefined ? false : isSelected)
.find(`.${SELECT_CHECKBOX_CLASS}`).dxCheckBox('option', 'value', isSelected);
- that.setAria('selected', isSelected, $row);
+ that.setAria('selected', String(isSelected), $row);
}
}
});
@@ -949,7 +949,7 @@ export const rowsViewSelectionExtenderMixin = (Base: ModuleType) => cl
const selectionMode = this.option(SELECTION_MODE);
if (selectionMode !== 'none') {
- this.setAria('selected', isSelected, $row);
+ this.setAria('selected', String(isSelected), $row);
}
}
diff --git a/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts b/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
index 6c8dc69fdaeb..5c81455478b3 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
@@ -1390,8 +1390,9 @@ export const validatingEditorFactoryExtender = (Base: ModuleType)
if (shouldSetValidationAriaAttributes) {
const $focusElement = this._getCurrentFocusElement($focus);
- $focusElement.attr('aria-labelledby', inputDescriptionValues.join(' '));
- $focusElement.attr('aria-invalid', true);
+
+ this.setAria('labelledby', inputDescriptionValues.join(' '), $focusElement);
+ this.setAria('invalid', true, $focusElement);
}
}
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js
index e6d65c183617..65725d04292f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js
@@ -532,9 +532,9 @@ QUnit.module('Grid view', {
],
totalItem: {
summaryCells: [
- { summaryType: 'count', value: 100 },
- { summaryType: 'min', value: 0 },
- { summaryType: 'max', value: 120001 }
+ [{ summaryType: 'count', value: 100 }],
+ [{ summaryType: 'min', value: 0 }],
+ [{ summaryType: 'max', value: 120001 }]
]
}
})
@@ -592,7 +592,7 @@ QUnit.module('Grid view', {
],
totalItem: {
summaryCells: [
- { summaryType: 'count', value: 100 }
+ [{ summaryType: 'count', value: 100 }]
]
}
})
@@ -1626,9 +1626,9 @@ QUnit.module('Synchronize columns', {
items: [{ values: [''] }],
totalItem: {
summaryCells: [
- { summaryType: 'count', value: 100 },
- { summaryType: 'min', value: 0 },
- { summaryType: 'max', value: 120001 }
+ [{ summaryType: 'count', value: 100 }],
+ [{ summaryType: 'min', value: 0 }],
+ [{ summaryType: 'max', value: 120001 }]
]
}
})
@@ -1663,9 +1663,9 @@ QUnit.module('Synchronize columns', {
items: [{ values: [''] }],
totalItem: {
summaryCells: [
- { summaryType: 'count', value: 100 },
- { summaryType: 'min', value: 0 },
- { summaryType: 'max', value: 120001 }
+ [{ summaryType: 'count', value: 100 }],
+ [{ summaryType: 'min', value: 0 }],
+ [{ summaryType: 'max', value: 120001 }]
]
}
})
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/summaryModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/summaryModule.tests.js
index 43f021b42c20..0302d464cc70 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/summaryModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/summaryModule.tests.js
@@ -8,6 +8,7 @@ import { addShadowDomStyles } from 'core/utils/shadow_dom';
import * as summaryModule from '__internal/grids/data_grid/summary/m_summary';
import gridCoreUtils from '__internal/grids/grid_core/m_utils';
+import { noop } from 'core/utils/common';
QUnit.testStart(function() {
const markup =
@@ -448,7 +449,7 @@ QUnit.module('Summary footer', {
}],
column: { alignment: 'left' },
summaryTexts: summaryTexts
- });
+ }, noop);
// assert
assert.equal($cellElements[0].find('.dx-datagrid-summary-item').text(), 119, 'column is not command');
@@ -462,7 +463,7 @@ QUnit.module('Summary footer', {
}],
column: { command: 'expand', alignment: 'left' },
summaryTexts: summaryTexts
- });
+ }, noop);
// assert
assert.equal($cellElements[1].html(), '', 'command column');