diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 149818517a78..85c4710f5cca 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -265,11 +265,11 @@ class TabContainer extends UI5Element { onBeforeRendering() { // Set external properties to items - this.items.forEach((item, index) => { + this.items.filter(item => !item.isSeparator).forEach((item, index, arr) => { item._isInline = this.tabLayout === TabLayout.Inline; item._mixedMode = this.mixedMode; item._posinset = index + 1; - item._setsize = this.items.length; + item._setsize = arr.length; item._getTabContainerHeaderItemCallback = _ => { return this.getDomRef().querySelector(`#${item._id}`); }; diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 1ab9bb641943..47d5f1716d18 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -91,4 +91,15 @@ describe("TabContainer general interaction", () => { assert.ok(tabHeight < tabScrollHeight, "Tab Content is scrollable"); assert.ok(tcHeight >= tcScrollHeight, "TabContainer is not scrollable scrollable"); }); + + it("tests aria attrs", () => { + const tabContainer = browser.$("#tabContainer1"); + const tab4 = tabContainer.shadow$(".ui5-tab-strip-item:nth-child(4)"); + + // assert: The TabContainer has 8 children, 7 tabs and 1 separator (at position 2) + // and the separator should be skipped in terms of aria-posinset and aria-setsize, + // so for child number 4 ("Monitors") we expect the following attributes aria-posinset="3" and aria-setsize="7". + assert.strictEqual(tab4.getAttribute("aria-posinset"), "3", "The aria-posinset is correct."); + assert.strictEqual(tab4.getAttribute("aria-setsize"), "7", "The aria-setsize is correct."); + }); });