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

Author: web-padawan

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');

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' });
 

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);
         });
       });