Fix switching between sidebar tabs using the keybaord

resource/js/tab-alpha.js

@@ -182,10 +182,10 @@ function startAlphaApp () {
       el.clickTabEvent = event => {
         binding.value() // calling the method given as the attribute value (loadLetters)
       }
-      document.querySelector('#alphabetical').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the alphabetical nav-item element
+      document.querySelector('#alphabetical').addEventListener('shown.bs.tab', el.clickTabEvent) // registering an event listener on bootstrap's tab shown event on the alphabetical nav-item element
     },
     unmounted: el => {
-      document.querySelector('#alphabetical').removeEventListener('click', el.clickTabEvent)
+      document.querySelector('#alphabetical').removeEventListener('shown.bs.tab', el.clickTabEvent)
     }
   })
 

resource/js/tab-changes.js

@@ -156,10 +156,10 @@ function startChangesApp () {
       el.clickTabEvent = event => {
         binding.value() // calling the method given as the attribute value (loadChanges)
       }
-      document.querySelector('#changes').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the changes nav-item element
+      document.querySelector('#changes').addEventListener('shown.bs.tab', el.clickTabEvent) // registering an event listener on bootstrap's tab shown event on the changes nav-item element
     },
     unmounted: el => {
-      document.querySelector('#changes').removeEventListener('click', el.clickTabEvent)
+      document.querySelector('#changes').removeEventListener('shown.bs.tab', el.clickTabEvent)
     }
   })
 

resource/js/tab-groups.js

@@ -237,10 +237,10 @@ function startGroupsApp () {
       el.clickTabEvent = event => {
         binding.value() // calling the method given as the attribute value (handleClickGroupsEvent)
       }
-      document.querySelector('#groups').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the groups nav-item element
+      document.querySelector('#groups').addEventListener('shown.bs.tab', el.clickTabEvent) // registering an event listener on bootstrap's tab shown event on the groups nav-item element
     },
     unmounted: el => {
-      document.querySelector('#groups').removeEventListener('click', el.clickTabEvent)
+      document.querySelector('#groups').removeEventListener('shown.bs.tab', el.clickTabEvent)
     }
   })
 

resource/js/tab-hierarchy.js

@@ -394,10 +394,10 @@ function startHierarchyApp () {
       el.clickTabEvent = event => {
         binding.value() // calling the method given as the attribute value (handleClickHierarchyEvent)
       }
-      document.querySelector('#hierarchy').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the hierarchy nav-item element
+      document.querySelector('#hierarchy').addEventListener('shown.bs.tab', el.clickTabEvent) // registering an event listener on bootstrap's tab shown event on the hierarchy nav-item element
     },
     unmounted: el => {
-      document.querySelector('#hierarchy').removeEventListener('click', el.clickTabEvent)
+      document.querySelector('#hierarchy').removeEventListener('shown.bs.tab', el.clickTabEvent)
     }
   })
 

tests/cypress/template/sidebar.cy.js

@@ -36,4 +36,17 @@ describe('Sidebar', () => {
     cy.get('#sidebar-collapse-btn').invoke('text').should('contain', 'Selaa käsitteitä')
     cy.get('#sidebar-col').should('not.be.visible')
   })
+
+  it('Keyboard navigation', () => {
+    // Go to YSO home page
+    cy.visit('/yso/fi/')
+    // Focus on first tab
+    cy.get('#sidebar-tabs').find('.nav-link').first().focus()
+    // Check that alphabetical list is shown
+    cy.get('.tab-content').find('#tab-alphabetical').should('exist')
+    // Press right arrow key
+    cy.press(Cypress.Keyboard.Keys.RIGHT)
+    // Check that hierarchy is loaded
+    cy.get('#hierarchy-list ul').should('exist')
+  })
 })