fix: ensure aria-selected attribute is removed from the item clone (#…

…8275)
vaadin · Dec 5, 2024 · 77d3ddf · 77d3ddf
1 parent d43919d
commit 77d3ddf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
         });
       });