diff --git a/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js b/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js index 7ed298c235..bdd5ba1985 100644 --- 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 index 30dcead762..8ad8b3b2c1 100644 --- 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' });