From d49d8ce583f6f12552f122122a99063738656cd9 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Sun, 2 Oct 2022 13:05:30 +0300
Subject: [PATCH] Ensure Tab keyboard functionality after #37146 (#37200)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: keyboard functionality

* test: add tests

* Add some focus spies in 2 other unit tests

Co-authored-by: Julien Déramond <juderamond@gmail.com>
---
 js/src/tab.js             |  1 +
 js/tests/unit/tab.spec.js | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

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()
     }
   }
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 5ffc73383287..e0c7d86a602d 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)
@@ -605,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'
@@ -614,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', () => {
@@ -638,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'
@@ -647,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)
     })
   })