Merge pull request #3939 from alphagov/2485_Refactor-layout-super-nav…

…igation-header-component Restores test and refactors component and test for layout-super-navigation-header
alphagov · Mar 25, 2024 · b183f1c · b183f1c
2 parents 6da83ce + fe7c847
commit b183f1c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Improve test coverage of contextual breadcrumb logic ([PR #3944](https://github.com/alphagov/govuk_publishing_components/pull/3944) and [PR #3945](https://github.com/alphagov/govuk_publishing_components/pull/3945))
 * Remove GA4 callout tracking from the govspeak component ([PR #3946](https://github.com/alphagov/govuk_publishing_components/pull/3946))
 * Remove GA4 callout tracking from notice & warning text components ([PR #3947](https://github.com/alphagov/govuk_publishing_components/pull/3947))
+* Restores test and refactors component and test for layout-super-navigation-header ([PR #3939](https://github.com/alphagov/govuk_publishing_components/pull/3939))
 
 ## 37.9.1
 

diff --git a/...sets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js b/...sets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
@@ -134,8 +134,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var $navMenuLinks = this.$navMenu.querySelectorAll('li a')
     var $firstNavLink = $navMenuLinks[0]
     var $lastNavLink = $navMenuLinks[$navMenuLinks.length - 1]
-    var $searchMenuLinks = this.$searchMenu.querySelectorAll('li a')
-    var $lastSearchLink = $searchMenuLinks[$searchMenuLinks.length - 1]
+    var $searchMenuTabbable = this.$searchMenu.querySelectorAll('li a, input, button')
+    var $lastSearchMenuTabbable = $searchMenuTabbable[$searchMenuTabbable.length - 1]
 
     if (event.keyCode === KEY_TAB) {
       if (!this.$navMenu.hasAttribute('hidden')) {
@@ -169,7 +169,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
             break
         }
       } else if (!this.$searchMenu.hasAttribute('hidden')) {
-        if (document.activeElement === $lastSearchLink) {
+        if (document.activeElement === $lastSearchMenuTabbable) {
           if (!event.shiftKey) {
             hide(this.$searchToggle, this.$searchMenu)
           }

diff --git a/spec/javascripts/components/layout-super-navigation-header-spec.js b/spec/javascripts/components/layout-super-navigation-header-spec.js
@@ -328,23 +328,29 @@ describe('The super header navigation', function () {
     var $navLinks
     var $firstNavLink
     var $lastNavLink
+    var $searchMenu
+    var $searchMenuTabbable
+    var $lastSearchMenuTabbable
 
     beforeEach(function () {
       thisModule.init()
       $navMenuButton = document.querySelector('#super-navigation-menu-toggle')
       $searchMenuButton = document.querySelector('#super-search-menu-toggle')
       $navMenu = document.querySelector('#super-navigation-menu')
-      $navLinks = $navMenu.querySelectorAll('li')
-      $firstNavLink = $navLinks[0].querySelector('a')
-      $lastNavLink = $navLinks[$navLinks.length - 1].querySelector('a')
+      $navLinks = $navMenu.querySelectorAll('li a')
+      $firstNavLink = $navLinks[0]
+      $lastNavLink = $navLinks[$navLinks.length - 1]
+      $searchMenu = document.querySelector('#super-search-menu')
+      $searchMenuTabbable = $searchMenu.querySelectorAll('li a, input, button')
+      $lastSearchMenuTabbable = $searchMenuTabbable[$searchMenuTabbable.length - 1]
     })
 
     it('when the Menu button is focussed, the nav menu is open and the tab key is pressed focus moves to the first nav menu link', function () {
       $navMenu.removeAttribute('hidden')
       $navMenuButton.focus()
       window.GOVUK.triggerEvent($navMenuButton, 'keydown', { keyCode: 9, cancelable: true })
 
-      expect(document.activeElement).toEqual($navLinks[0].querySelector('a'))
+      expect(document.activeElement).toEqual($navLinks[0])
     })
 
     it('when the last nav menu link is focussed and the tab key is pressed focus moves to the search button and the nav menu is closed', function () {
@@ -374,6 +380,17 @@ describe('The super header navigation', function () {
 
       expect(document.activeElement).toEqual($lastNavLink)
     })
+
+    it('when the last tabbable element in the search menu is focussed and the tab key is pressed the search menu is closed', function () {
+      $searchMenu.removeAttribute('hidden')
+      $lastSearchMenuTabbable.focus()
+      window.GOVUK.triggerEvent($lastSearchMenuTabbable, 'keydown', { keyCode: 9, cancelable: true })
+
+      expect($searchMenu.hasAttribute('hidden')).toEqual(true)
+      expect($searchMenuButton.getAttribute('aria-expanded')).toEqual('false')
+      expect($searchMenuButton.getAttribute('aria-label')).toEqual('Show search menu')
+      expect($searchMenuButton.classList).not.toContain('gem-c-layout-super-navigation-header__open-button')
+    })
   })
 
   describe('escape key', function () {