From c471639aacdd50d29aacedb9b620bdd47214e7ac Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Wed, 18 Sep 2024 00:57:00 +0300 Subject: [PATCH 1/2] fix(ui5-multi-combobox): fix aria-describedby token count --- packages/main/src/MultiComboBox.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 1f9feba8874..c9f1e9a839e 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -497,7 +497,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement { _isOpenedByKeyboard?: boolean; _itemToFocus?: IMultiComboBoxItem; _itemsBeforeOpen: Array; - _tokenCount: number | undefined; selectedItems: Array; static i18nBundle: I18nBundle; @@ -707,7 +706,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement { } _tokenDelete(e: CustomEvent) { - this._tokenCount = this._tokenizer.tokens.length - e.detail.tokens.length; this._previouslySelectedItems = this._getSelectedItems(); const token: Token[] = e.detail.tokens; const deletingItems = this._getItems().filter(item => token.some(t => t.getAttribute("data-ui5-id") === item._id)); @@ -1894,8 +1892,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement { return; } - this._tokenCount = this._tokenCount !== undefined ? this._tokenCount : this._tokenizer.tokens.length; - return getTokensCountText(this._tokenCount); + return getTokensCountText(this.selectedValues.length); } get _tokensCountTextId() { From f20561342e875d9cfac3114873a44dd25768dc27 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Wed, 18 Sep 2024 18:27:41 +0300 Subject: [PATCH 2/2] fix(ui5-multi-combobox): fix aria-describedby token count --- packages/main/test/specs/MultiComboBox.spec.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index f8cccfc0bfb..d6e006156e7 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -1753,6 +1753,8 @@ describe("MultiComboBox general interaction", () => { const innerInput = await mcb.shadow$("input"); let invisibleText = await mcb.shadow$(".ui5-hidden-text"); const inivisbleTextId = await invisibleText.getProperty("id"); + const popover = await mcb.shadow$("ui5-responsive-popover"); + let firstItem = await popover.$("ui5-list").$("ui5-li"); let tokens = await mcb.shadow$$(".ui5-multi-combobox-token"); let resourceBundleText = null; @@ -1793,6 +1795,17 @@ describe("MultiComboBox general interaction", () => { assert.strictEqual(tokens.length, 0, "should not have tokens"); assert.ok(await ariaHiddenText.includes(resourceBundleText), "aria-describedby text is correct"); + + await innerInput.click(); + await innerInput.keys("i"); + await firstItem.click(); + + tokens = await mcb.shadow$$(".ui5-multi-combobox-token"); + ariaHiddenText = await invisibleText.getHTML(false); + + assert.strictEqual(tokens.length, 1, "Token should be added"); + assert.ok(await ariaHiddenText.includes("Contains 1 token"), "aria-describedby text is correct after adding token again"); + }); it("Should apply aria-label from the accessibleName property", async () => {