Fixed aria-controls attribute

When using multiple nested unique IDs the aria relationship broke. This
change adds the list of the nested elements in the `aria-controls` attribute.

lib/assets/javascripts/_modules/collapsible-navigation.js

@@ -28,13 +28,16 @@
           continue
         }
         $topLevelItem.addClass('collapsible')
+        var arrayOfIds = []
         $listing.each(function (i) {
+          var uniqueId = id + '-' + i
+          arrayOfIds.push(uniqueId)
           $(this).addClass('collapsible__body')
-            .attr('id', id + '-' + i)
+            .attr('id', uniqueId)
             .attr('aria-expanded', 'false')
         })
         $heading.addClass('collapsible__heading')
-          .after('<button class="collapsible__toggle" aria-controls="' + id + '"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
+          .after('<button class="collapsible__toggle" aria-controls="' + arrayOfIds.join(' ') + '"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
         $topLevelItem.on('click', '.collapsible__toggle', function (e) {
           e.preventDefault()
           var $parent = $(this).parent()

spec/javascripts/collapsible-navigation-spec.js

@@ -32,4 +32,10 @@ describe('Collapsible navigation', function () {
       expect($(this)[0].id).toEqual('toc-nested-page-' + i)
     })
   })
+
+  it('aria-controls on the button lists all the nested IDs', function () {
+    $navigation.find('button').each(function (i) {
+      expect($navigation.find('button').attr('aria-controls')).toEqual('toc-nested-page-0 toc-nested-page-1')
+    })
+  })
 })