diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts index 9428530a2c..0b4cfe474a 100644 --- a/packages/tabs/src/Tabs.ts +++ b/packages/tabs/src/Tabs.ts @@ -105,7 +105,7 @@ export class Tabs extends SizedMixin(Focusable) { private _tabs: Tab[] = []; rovingTabindexController = new RovingTabindexController(this, { - focusInIndex: (elements: Tab[]) => { + focusInIndex: (elements) => { let focusInIndex = 0; const firstFocusableElement = elements.find((el, index) => { const focusInElement = this.selected @@ -118,8 +118,14 @@ export class Tabs extends SizedMixin(Focusable) { }, direction: () => this.direction === 'horizontal' ? 'horizontal' : 'vertical', + elementEnterAction: (el) => { + if (!this.auto) return; + + this.shouldAnimate = true; + this.selectTarget(el); + }, elements: () => this.tabs, - isFocusableElement: (el: Tab) => !el.disabled, + isFocusableElement: (el) => !el.disabled, listenerScope: () => this.tabList, }); diff --git a/packages/tabs/test/tabs.test.ts b/packages/tabs/test/tabs.test.ts index 5f8b382e0f..1fc2cb3b28 100644 --- a/packages/tabs/test/tabs.test.ts +++ b/packages/tabs/test/tabs.test.ts @@ -31,6 +31,7 @@ import { enterEvent, spaceEvent, } from '../../../test/testing-helpers.js'; +import { sendKeys } from '@web/test-runner-commands'; const createTabs = async (): Promise => { const tabs = await fixture( @@ -176,6 +177,35 @@ describe('Tabs', () => { ); }); + it('auto', async () => { + const el = await fixture( + html` + + + + + + ` + ); + + await elementUpdated(el); + + expect(el.selected).to.equal('second'); + el.focus(); + await sendKeys({ + press: 'ArrowLeft', + }); + expect(el.selected).to.equal('first'); + await sendKeys({ + press: 'ArrowLeft', + }); + expect(el.selected).to.equal('third'); + await sendKeys({ + press: 'ArrowRight', + }); + expect(el.selected).to.equal('first'); + }); + it('forces only one tab to be selected', async () => { const tabs = await createTabs();