Skip to content

Commit

Permalink
Tabs: move role attr from root to wrapper to fix Axe error (#25737)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zedwag
Zedwag authored Oct 5, 2023
1 parent b40991a commit 2f8434d
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 9 deletions.
6 changes: 5 additions & 1 deletion packages/devextreme/js/ui/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -383,6 +382,7 @@ const Tabs = CollectionWidget.inherit({

_renderWrapper: function() {
this._$wrapper = $('<div>').addClass(TABS_WRAPPER_CLASS);
this.setAria('role', 'tablist', this._$wrapper);
this.$element().append(this._$wrapper);
},

Expand Down Expand Up @@ -527,6 +527,10 @@ const Tabs = CollectionWidget.inherit({
this.callBase(e);
},

_refreshActiveDescendant: function() {
this.callBase(this._$wrapper);
},

_clean: function() {
this._deferredTemplates = [];
this._cleanScrolling();
Expand Down
24 changes: 16 additions & 8 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand All @@ -147,38 +149,44 @@ 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' });
});

QUnit.test(`3 items, selectedIndex: 1, set focusedElement: items[1] -> clean focusedElement, repaintChangesOnly: ${repaintChangesOnly}, use: ${sourceName}`, function() {
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' });
});
});
Expand Down

0 comments on commit 2f8434d

Please sign in to comment.