diff --git a/CHANGELOG.md b/CHANGELOG.md index 06d099cd95..02443f9090 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,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/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js b/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js index 69c6ab1e8f..553123fea2 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +++ b/app/assets/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 index 63447d938b..9741daa3b3 100644 --- a/spec/javascripts/components/layout-super-navigation-header-spec.js +++ b/spec/javascripts/components/layout-super-navigation-header-spec.js @@ -328,15 +328,21 @@ 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 () { @@ -344,7 +350,7 @@ describe('The super header navigation', function () { $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 () {