diff --git a/packages/tabs/src/LionTabs.js b/packages/tabs/src/LionTabs.js index 295c336eb..c879881cb 100644 --- a/packages/tabs/src/LionTabs.js +++ b/packages/tabs/src/LionTabs.js @@ -37,8 +37,12 @@ const cleanButton = (element, clickHandler, keydownHandler) => { element.removeEventListener('keydown', e => e.preventDefault()); }; -const selectButton = element => { - element.focus(); +const selectButton = (element, firstUpdate = false) => { + // Don't focus on first update, as the component might be lower on the page + if (!firstUpdate) { + element.focus(); + } + element.setAttribute('selected', true); element.setAttribute('aria-selected', true); element.setAttribute('tabindex', 0); @@ -109,6 +113,7 @@ export class LionTabs extends LitElement { firstUpdated() { super.firstUpdated(); + this.__firstUpdate = true; this.__setupSlots(); } @@ -198,6 +203,7 @@ export class LionTabs extends LitElement { } set selectedIndex(value) { + this.__firstUpdate = false; const stale = this.__selectedIndex; this.__selectedIndex = value; this.__updateSelected(); @@ -231,7 +237,7 @@ export class LionTabs extends LitElement { } const { button: currentButton, panel: currentPanel } = this.__store[this.selectedIndex]; if (currentButton) { - selectButton(currentButton); + selectButton(currentButton, this.__firstUpdate); } if (currentPanel) { selectPanel(currentPanel); diff --git a/packages/tabs/test/lion-tabs.test.js b/packages/tabs/test/lion-tabs.test.js index d984702d5..478064c14 100644 --- a/packages/tabs/test/lion-tabs.test.js +++ b/packages/tabs/test/lion-tabs.test.js @@ -243,6 +243,50 @@ describe('', () => { }); }); + describe('Initializing without Focus', () => { + it('keeps track of when the component is updated', async () => { + const el = await fixture(html` + + +
panel 1
+ +
panel 2
+
+ `); + + expect(el.__firstUpdate).to.be.true; + el.selectedIndex = 1; + expect(el.__firstUpdate).to.be.false; + }); + + it('does not focus a tab on firstUpdate', async () => { + const el = await fixture(html` + + +
panel 1
+ +
panel 2
+
+ `); + const tabs = Array.from(el.children).filter(child => child.slot === 'tab'); + expect(tabs.some(tab => tab === document.activeElement)).to.be.false; + }); + + it('focuses on a tab when switching the selectedIndex', async () => { + const el = await fixture(html` + + +
panel 1
+ +
panel 2
+
+ `); + el.selectedIndex = 1; + const tab = Array.from(el.children).filter(child => child.slot === 'tab')[1]; + expect(tab).to.equal(document.activeElement); + }); + }); + describe('Accessibility', () => { it('does not make panels focusable', async () => { const el = await fixture(html`