From 77d3ddfddf8324dd8ded6276ff84c1444f479a93 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Thu, 5 Dec 2024 14:48:55 +0200 Subject: [PATCH] fix: ensure aria-selected attribute is removed from the item clone (#8275) --- packages/select/src/vaadin-select-base-mixin.js | 5 +++++ packages/select/test/keyboard.common.js | 2 +- packages/select/test/select.common.js | 4 +++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js index 1a9884d1fb9..9dd4f787579 100644 --- a/packages/select/src/vaadin-select-base-mixin.js +++ b/packages/select/src/vaadin-select-base-mixin.js @@ -461,6 +461,11 @@ export const SelectBaseMixin = (superClass) => */ __appendValueItemElement(itemElement, parent) { parent.appendChild(itemElement); + // Trigger observer that sets aria-selected attribute + // so that we can then synchronously remove it below. + if (itemElement.performUpdate) { + itemElement.performUpdate(); + } itemElement.removeAttribute('tabindex'); itemElement.removeAttribute('aria-selected'); itemElement.removeAttribute('role'); diff --git a/packages/select/test/keyboard.common.js b/packages/select/test/keyboard.common.js index 12686365e7d..87e7e05a594 100644 --- a/packages/select/test/keyboard.common.js +++ b/packages/select/test/keyboard.common.js @@ -151,7 +151,7 @@ describe('keyboard', () => { expect(clone.textContent).to.be.equal(item.textContent); }); - ['active', 'focused', 'focus-ring', 'role', 'tabindex'].forEach((attr) => { + ['active', 'focused', 'focus-ring', 'role', 'tabindex', 'aria-selected'].forEach((attr) => { it(`should remove ${attr} attribute from the item clone`, async () => { await sendKeys({ press: 'Tab' }); diff --git a/packages/select/test/select.common.js b/packages/select/test/select.common.js index 0aab4cffd80..7096f15c5fa 100644 --- a/packages/select/test/select.common.js +++ b/packages/select/test/select.common.js @@ -231,16 +231,18 @@ describe('vaadin-select', () => { }); describe('default', () => { - it('should select items when alphanumeric keys are pressed', () => { + it('should select items when alphanumeric keys are pressed', async () => { expect(menu.selected).to.be.equal(2); keyDownChar(valueButton, 'o'); keyDownChar(valueButton, 'p'); keyDownChar(valueButton, 't'); + await nextUpdate(menu); expect(menu.selected).to.be.equal(0); keyDownChar(valueButton, 'i'); keyDownChar(valueButton, 'o'); keyDownChar(valueButton, 'n'); keyDownChar(valueButton, '2'); + await nextUpdate(menu); expect(menu.selected).to.be.equal(1); }); });