fix: mark root element focused in interaction mode

vaadin · Dec 10, 2024 · 7eef011 · 7eef011
1 parent 0f0b253
commit 7eef011
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js b/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;

diff --git a/packages/virtual-list/test/virtual-list-selection.common.ts b/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' });