From d45cc7ef516de676bfaa2b97fe10b71e98ff6f3e Mon Sep 17 00:00:00 2001
From: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
Date: Sun, 23 Jul 2023 12:06:14 -0700
Subject: Support `Home` and `End` keys in tabs (#38498)

* Support `Home` and `End` keys in tabs

* Update tab.js

* simplify tests

* Update navs-tabs.md

* Update .bundlewatch.config.json

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
---
 js/tests/unit/tab.spec.js | 112 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)

(limited to 'js/tests/unit')

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 84690fc51..007adddc6 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -630,6 +630,58 @@ describe('Tab', () => {
       expect(spyPrevent).toHaveBeenCalledTimes(2)
     })
 
+    it('if keydown event is Home, handle it', () => {
+      fixtureEl.innerHTML = [
+        '<div class="nav">',
+        '  <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
+        '</div>'
+      ].join('')
+
+      const tabEl1 = fixtureEl.querySelector('#tab1')
+      const tabEl3 = fixtureEl.querySelector('#tab3')
+
+      const tab3 = new Tab(tabEl3)
+      tab3.show()
+
+      const spyShown = jasmine.createSpy()
+      tabEl1.addEventListener('shown.bs.tab', spyShown)
+
+      const keydown = createEvent('keydown')
+      keydown.key = 'Home'
+
+      tabEl3.dispatchEvent(keydown)
+
+      expect(spyShown).toHaveBeenCalled()
+    })
+
+    it('if keydown event is End, handle it', () => {
+      fixtureEl.innerHTML = [
+        '<div class="nav">',
+        '  <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
+        '</div>'
+      ].join('')
+
+      const tabEl1 = fixtureEl.querySelector('#tab1')
+      const tabEl3 = fixtureEl.querySelector('#tab3')
+
+      const tab1 = new Tab(tabEl1)
+      tab1.show()
+
+      const spyShown = jasmine.createSpy()
+      tabEl3.addEventListener('shown.bs.tab', spyShown)
+
+      const keydown = createEvent('keydown')
+      keydown.key = 'End'
+
+      tabEl1.dispatchEvent(keydown)
+
+      expect(spyShown).toHaveBeenCalled()
+    })
+
     it('if keydown event is right arrow and next element is disabled', () => {
       fixtureEl.innerHTML = [
         '<div class="nav">',
@@ -711,6 +763,66 @@ describe('Tab', () => {
       expect(spyFocus2).not.toHaveBeenCalled()
       expect(spyFocus1).toHaveBeenCalledTimes(1)
     })
+
+    it('if keydown event is Home and first element is disabled', () => {
+      fixtureEl.innerHTML = [
+        '<div class="nav">',
+        '  <span id="tab1" class="nav-link disabled" data-bs-toggle="tab" disabled></span>',
+        '  <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
+        '</div>'
+      ].join('')
+
+      const tabEl1 = fixtureEl.querySelector('#tab1')
+      const tabEl2 = fixtureEl.querySelector('#tab2')
+      const tabEl3 = fixtureEl.querySelector('#tab3')
+      const tab3 = new Tab(tabEl3)
+
+      tab3.show()
+
+      const spyShown1 = jasmine.createSpy()
+      const spyShown2 = jasmine.createSpy()
+      tabEl1.addEventListener('shown.bs.tab', spyShown1)
+      tabEl2.addEventListener('shown.bs.tab', spyShown2)
+
+      const keydown = createEvent('keydown')
+      keydown.key = 'Home'
+
+      tabEl3.dispatchEvent(keydown)
+
+      expect(spyShown1).not.toHaveBeenCalled()
+      expect(spyShown2).toHaveBeenCalled()
+    })
+
+    it('if keydown event is End and last element is disabled', () => {
+      fixtureEl.innerHTML = [
+        '<div class="nav">',
+        '  <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
+        '  <span id="tab3" class="nav-link" data-bs-toggle="tab" disabled></span>',
+        '</div>'
+      ].join('')
+
+      const tabEl1 = fixtureEl.querySelector('#tab1')
+      const tabEl2 = fixtureEl.querySelector('#tab2')
+      const tabEl3 = fixtureEl.querySelector('#tab3')
+      const tab1 = new Tab(tabEl1)
+
+      tab1.show()
+
+      const spyShown2 = jasmine.createSpy()
+      const spyShown3 = jasmine.createSpy()
+      tabEl2.addEventListener('shown.bs.tab', spyShown2)
+      tabEl3.addEventListener('shown.bs.tab', spyShown3)
+
+      const keydown = createEvent('keydown')
+      keydown.key = 'End'
+
+      tabEl1.dispatchEvent(keydown)
+
+      expect(spyShown3).not.toHaveBeenCalled()
+      expect(spyShown2).toHaveBeenCalled()
+    })
   })
 
   describe('jQueryInterface', () => {
-- 
cgit v1.2.3