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' }); }); });