diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js
index ca88d9faa184..b91c0643c191 100644
--- a/packages/devextreme/js/ui/tabs.js
+++ b/packages/devextreme/js/ui/tabs.js
@@ -170,7 +170,6 @@ const Tabs = CollectionWidget.inherit({
const { orientation, stylingMode } = this.option();
this.callBase();
- this.setAria('role', 'tablist');
this.$element().addClass(TABS_CLASS);
this._toggleOrientationClass(orientation);
this._toggleIconPositionClass();
@@ -383,6 +382,7 @@ const Tabs = CollectionWidget.inherit({
_renderWrapper: function() {
this._$wrapper = $('
').addClass(TABS_WRAPPER_CLASS);
+ this.setAria('role', 'tablist', this._$wrapper);
this.$element().append(this._$wrapper);
},
@@ -527,6 +527,10 @@ const Tabs = CollectionWidget.inherit({
this.callBase(e);
},
+ _refreshActiveDescendant: function() {
+ this.callBase(this._$wrapper);
+ },
+
_clean: function() {
this._deferredTemplates = [];
this._cleanScrolling();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
index a90fa33f4cc9..0e5dc62b7cd8 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
@@ -129,14 +129,16 @@ QUnit.module('Aria accessibility', {
QUnit.test(`3 items, repaintChangesOnly: ${repaintChangesOnly}, use: ${sourceName}`, function() {
helper.createWidget({ [`${sourceName}`]: this.items, repaintChangesOnly });
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([], { attributes: ['aria-selected'], role: 'tab' });
});
QUnit.test(`[item1], add new item2, repaintChangesOnly: ${repaintChangesOnly}, use: ${sourceName}`, function(assert) {
helper.createWidget({ [`${sourceName}`]: [{ text: 'Item_1' }], repaintChangesOnly });
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([], { attributes: ['aria-selected'], role: 'tab' });
if(!windowUtils.hasWindow()) {
@@ -147,26 +149,30 @@ QUnit.module('Aria accessibility', {
helper.widget.option(sourceName, [{ text: 'Item_1' }, { text: 'Item_2' }]);
assert.strictEqual(helper.getItems().length, 2, 'items count');
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([], { attributes: ['aria-selected'], role: 'tab' });
});
QUnit.test(`3 items, reorder item3 <--> item2, repaintChangesOnly: ${repaintChangesOnly}, use: ${sourceName}`, function(assert) {
helper.createWidget({ [`${sourceName}`]: this.items, repaintChangesOnly });
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([], { attributes: ['aria-selected'], role: 'tab' });
helper.widget.option(sourceName, [{ text: 'Item_1' }, { text: 'Item_3' }, { text: 'Item_2' }]);
assert.strictEqual(helper.getItems().length, 3, 'items count');
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([], { attributes: ['aria-selected'], role: 'tab' });
});
QUnit.test(`3 items, selectedIndex: 1, repaintChangesOnly: ${repaintChangesOnly}, use: ${sourceName}`, function() {
helper.createWidget({ [`${sourceName}`]: this.items, selectedIndex: 1, repaintChangesOnly });
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([1], { attributes: ['aria-selected'], role: 'tab' });
});
@@ -174,11 +180,13 @@ QUnit.module('Aria accessibility', {
helper.createWidget({ [`${sourceName}`]: this.items, selectedIndex: 1, repaintChangesOnly });
helper.widget.option('focusedElement', helper.getItems().eq(1));
- helper.checkAttributes(helper.$widget, { role: 'tablist', 'aria-activedescendant': helper.widget.getFocusedItemId(), tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist', 'aria-activedescendant': helper.widget.getFocusedItemId(), }, 'tabsWrapper');
helper.checkItemsAttributes([1], { focusedItemIndex: 1, attributes: ['aria-selected'], role: 'tab' });
helper.widget.option('focusedElement', null);
- helper.checkAttributes(helper.$widget, { role: 'tablist', tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget, { tabindex: '0' }, 'widget');
+ helper.checkAttributes(helper.$widget.find(`.${TABS_WRAPPER_CLASS}`), { role: 'tablist' }, 'tabsWrapper');
helper.checkItemsAttributes([1], { attributes: ['aria-selected'], role: 'tab' });
});
});