From f5a0f1af00e84955243a5d53d2f38774309e5743 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
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 1d6d68d85c..2f18037549 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()
}
}
--
GitLab
From a6284c417287f28fec5183e35086c401275a3279 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
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 5ffc733832..ca091f6b64 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', () => {
'</div>'
].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)
--
GitLab
From df6485b152cfe8125c5f8c2e2622f13e8bbc2937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
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 ca091f6b64..e0c7d86a60 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)
})
})
--
GitLab