Fix the '+(xx) others' link losing focus after activation

Reported as an issue in JAWS, and also further observed as problematic
in other screen-readers, this issue was actually a problem for all
users as it did not focus a relevant element after activation.

I've now changed the behaviour:

* Anchor element is replaced with a button for improved accessibility
* Button inherits parent styles to appear like a link
* After activation, focus the first link in the now-visible links panel

Author: matthillco

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

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);
     }
   }
 }