fix(ui5-multi-combobox): fix aria-describedby token count (#9792)

* fix(ui5-multi-combobox): adjust the failing aria-describedby test the test is fixed to focus out the tested ui5-multi-combobox in order for the aria-describedby attribute to be updated
SAP · Sep 13, 2024 · 2e0aa03 · 2e0aa03
1 parent bf1ede7
commit 2e0aa03
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -497,6 +497,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	_isOpenedByKeyboard?: boolean;
 	_itemToFocus?: IMultiComboBoxItem;
 	_itemsBeforeOpen: Array<MultiComboboxItemWithSelection>;
+	_tokenCount: number | undefined;
 	selectedItems: Array<IMultiComboBoxItem>;
 	static i18nBundle: I18nBundle;
 
@@ -706,6 +707,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_tokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>) {
+		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));
@@ -1891,7 +1893,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		if (!this._tokenizer) {
 			return;
 		}
-		return getTokensCountText(this._tokenizer.tokens.length);
+
+		this._tokenCount = this._tokenCount !== undefined ? this._tokenCount : this._tokenizer.tokens.length;
+		return getTokensCountText(this._tokenCount);
 	}
 
 	get _tokensCountTextId() {

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1745,7 +1745,7 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(await innerInput.getAttribute("aria-describedby"), ariaDescribedBy, "aria-describedby has a reference for the value state and the tokens count");
 		});
 
-		it.skip("aria-describedby value according to the tokens count", async () => {
+		it("aria-describedby value according to the tokens count", async () => {
 			const mcb = await browser.$("#mcb-compact");
 
 			await mcb.scrollIntoView();
@@ -1780,7 +1780,6 @@ describe("MultiComboBox general interaction", () => {
 			assert.ok(await ariaHiddenText.includes(resourceBundleText), "aria-describedby text is correct");
 
 			await innerInput.keys("Backspace");
-			await innerInput.keys("Tab");
 
 			tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
 			invisibleText = await mcb.shadow$(".ui5-hidden-text");