Merge pull request #3192 from alphagov/link-losing-focus-with-jaws

Fix the '+(xx) others' link losing focus after activation
alphagov · May 23, 2024 · 94ac233 · 94ac233
2 parents 30fe1de + 33ee2ec
commit 94ac233
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/app/assets/javascripts/modules/hide-other-links.js b/app/assets/javascripts/modules/hide-other-links.js
@@ -9,7 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.hiddenElementContainer = this.createHiddenElementContainer()
     this.shownElements = []
     this.hiddenElements = []
-    this.showLink = document.createElement('a')
+    this.showLink = document.createElement('button')
   }
 
   HideOtherLinks.prototype.init = function () {
@@ -51,7 +51,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.showLink.classList.add('show-other-content', 'govuk-link')
     this.showLink.innerHTML = linkText
-    this.showLink.href = '#'
+    this.showLink.setAttribute('aria-expanded', 'false')
+    this.showLink.setAttribute('aria-controls', 'other-content')
 
     this.showLink.addEventListener('click', this.showHiddenLinks.bind(this))
 
@@ -71,6 +72,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   HideOtherLinks.prototype.createHiddenElementContainer = function () {
     var showHide = document.createElement('span')
     showHide.classList.add('other-content')
+    showHide.id = 'other-content'
 
     return showHide
   }
@@ -79,8 +81,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     event.preventDefault()
 
     this.hiddenElementContainer.style.display = ''
+    this.hiddenElementContainer.querySelectorAll('a')[0].focus()
     this.showLink.remove()
-    this.hiddenElementContainer.focus()
   }
 
   Modules.HideOtherLinks = HideOtherLinks

diff --git a/app/assets/stylesheets/views/_worldwide-organisation.scss b/app/assets/stylesheets/views/_worldwide-organisation.scss
@@ -6,9 +6,14 @@
 .js-enabled {
   .worldwide-organisation-header {
     .show-other-content {
-      @include govuk-font(14);
+      all: inherit;
+      display: inline;
       margin-left: .3em;
       white-space: nowrap;
+      color: $govuk-link-colour;
+      cursor: pointer;
+      @include govuk-link-common;
+      @include govuk-font(16);
     }
   }
 }