From f5a0f1af00e84955243a5d53d2f38774309e5743 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 24 Sep 2022 02:59:11 +0300 Subject: [PATCH 1/3] fix: keyboard functionality --- js/src/tab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/src/tab.js b/js/src/tab.js index 1d6d68d85ce1..2f180375496b 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -161,6 +161,7 @@ class Tab extends BaseComponent { const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true) if (nextActiveElement) { + nextActiveElement.focus({ preventScroll: true }) Tab.getOrCreateInstance(nextActiveElement).show() } } From a6284c417287f28fec5183e35086c401275a3279 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 27 Sep 2022 03:06:16 +0300 Subject: [PATCH 2/3] test: add tests --- js/tests/unit/tab.spec.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 5ffc73383287..ca091f6b6476 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -526,6 +526,9 @@ describe('Tab', () => { const spyShow1 = spyOn(tab1, 'show').and.callThrough() const spyShow2 = spyOn(tab2, 'show').and.callThrough() const spyShow3 = spyOn(tab3, 'show').and.callThrough() + const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough() + const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough() + const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough() const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough() const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough() @@ -535,15 +538,18 @@ describe('Tab', () => { tabEl1.dispatchEvent(keydown) expect(spyShow2).toHaveBeenCalled() + expect(spyFocus2).toHaveBeenCalled() keydown = createEvent('keydown') keydown.key = 'ArrowDown' tabEl2.dispatchEvent(keydown) expect(spyShow3).toHaveBeenCalled() + expect(spyFocus3).toHaveBeenCalled() tabEl3.dispatchEvent(keydown) expect(spyShow1).toHaveBeenCalled() + expect(spyFocus1).toHaveBeenCalled() expect(spyStop).toHaveBeenCalledTimes(3) expect(spyPrevent).toHaveBeenCalledTimes(3) @@ -557,12 +563,14 @@ describe('Tab', () => { '' ].join('') - const tabEl = fixtureEl.querySelector('#tab1') + const tabEl1 = fixtureEl.querySelector('#tab1') const tabEl2 = fixtureEl.querySelector('#tab2') - const tab = new Tab(tabEl) + const tab1 = new Tab(tabEl1) const tab2 = new Tab(tabEl2) - const spyShow1 = spyOn(tab, 'show').and.callThrough() + const spyShow1 = spyOn(tab1, 'show').and.callThrough() const spyShow2 = spyOn(tab2, 'show').and.callThrough() + const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough() + const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough() const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough() const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough() @@ -572,12 +580,14 @@ describe('Tab', () => { tabEl2.dispatchEvent(keydown) expect(spyShow1).toHaveBeenCalled() + expect(spyFocus1).toHaveBeenCalled() keydown = createEvent('keydown') keydown.key = 'ArrowUp' - tabEl.dispatchEvent(keydown) + tabEl1.dispatchEvent(keydown) expect(spyShow2).toHaveBeenCalled() + expect(spyFocus2).toHaveBeenCalled() expect(spyStop).toHaveBeenCalledTimes(2) expect(spyPrevent).toHaveBeenCalledTimes(2) From df6485b152cfe8125c5f8c2e2622f13e8bbc2937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sun, 2 Oct 2022 08:58:05 +0200 Subject: [PATCH 3/3] Add some focus spies in 2 other unit tests --- js/tests/unit/tab.spec.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index ca091f6b6476..e0c7d86a602d 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -615,6 +615,10 @@ describe('Tab', () => { const spy2 = spyOn(tab2, 'show').and.callThrough() const spy3 = spyOn(tab3, 'show').and.callThrough() const spy4 = spyOn(tab4, 'show').and.callThrough() + const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough() + const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough() + const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough() + const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough() const keydown = createEvent('keydown') keydown.key = 'ArrowRight' @@ -624,6 +628,10 @@ describe('Tab', () => { expect(spy2).not.toHaveBeenCalled() expect(spy3).not.toHaveBeenCalled() expect(spy4).toHaveBeenCalledTimes(1) + expect(spyFocus1).not.toHaveBeenCalled() + expect(spyFocus2).not.toHaveBeenCalled() + expect(spyFocus3).not.toHaveBeenCalled() + expect(spyFocus4).toHaveBeenCalledTimes(1) }) it('if keydown event is left arrow and next element is disabled', () => { @@ -648,6 +656,10 @@ describe('Tab', () => { const spy2 = spyOn(tab2, 'show').and.callThrough() const spy3 = spyOn(tab3, 'show').and.callThrough() const spy4 = spyOn(tab4, 'show').and.callThrough() + const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough() + const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough() + const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough() + const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough() const keydown = createEvent('keydown') keydown.key = 'ArrowLeft' @@ -657,6 +669,10 @@ describe('Tab', () => { expect(spy3).not.toHaveBeenCalled() expect(spy2).not.toHaveBeenCalled() expect(spy1).toHaveBeenCalledTimes(1) + expect(spyFocus4).not.toHaveBeenCalled() + expect(spyFocus3).not.toHaveBeenCalled() + expect(spyFocus2).not.toHaveBeenCalled() + expect(spyFocus1).toHaveBeenCalledTimes(1) }) })