fix: mark root element focused in interaction mode

Author: tomivirkki

packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js

@@ -112,7 +112,10 @@ export const SelectionMixin = (superClass) =>
       el.toggleAttribute('selected', this.__isSelected(item));
       const isFocusable = this.__isNavigating() && this.__focusIndex === index;
       el.tabIndex = isFocusable ? 0 : -1;
-      el.toggleAttribute('focused', isFocusable && el.contains(this.__getActiveElement()));
+      el.toggleAttribute(
+        'focused',
+        this.__isSelectable() && this.__focusIndex === index && el.contains(this.__getActiveElement()),
+      );
 
       el.role = this.__isSelectable() ? 'option' : 'listitem';
       el.ariaSelected = this.__isSelectable() ? String(this.__isSelected(item)) : null;

packages/virtual-list/test/virtual-list-selection.common.ts

@@ -521,6 +521,13 @@ describe('selection', () => {
         expect(list.hasAttribute('interacting')).to.be.true;
       });
 
+      it('should have the root element in focused state', async () => {
+        beforeButton.focus();
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ press: 'Enter' });
+        expect(getRenderedItem(0)!.hasAttribute('focused')).to.be.true;
+      });
+
       it('should focus tab to the next focusable child', async () => {
         beforeButton.focus();
         await sendKeys({ press: 'Tab' });