Make sure IDs on collapsible navigation are unique

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [Pull request #160: Make sure IDs on collapsible navigation are unique](https://github.com/alphagov/tech-docs-gem/pull/160)
+
 ## 2.0.9
 
 ### Fixes

example/source/nested-page/another-nested-nested-page/index.html.md

@@ -0,0 +1,5 @@
+---
+title: Another nested nested page
+---
+
+# Another nested nested page

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

@@ -28,11 +28,16 @@
           continue
         }
         $topLevelItem.addClass('collapsible')
-        $listing.addClass('collapsible__body')
-          .attr('id', id)
-          .attr('aria-expanded', 'false')
+        var arrayOfIds = []
+        $listing.each(function (i) {
+          var uniqueId = id + '-' + i
+          arrayOfIds.push(uniqueId)
+          $(this).addClass('collapsible__body')
+            .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

@@ -0,0 +1,41 @@
+describe('Collapsible navigation', function () {
+  'use strict'
+
+  var module
+  var $navigation
+
+  beforeEach(function () {
+    module = new GOVUK.Modules.CollapsibleNavigation()
+    $navigation = $(
+      '<nav id="toc" class="js-toc-list toc__list" aria-labelledby="toc-heading" data-module="collapsible-navigation">' +
+        '<ul>' +
+          '<li>' +
+            '<a href="/nested-page/"><span>Nested page</span></a>' +
+            '<ul>' +
+              '<li>' +
+                '<a href="/nested-page/another-nested-page/#another-nested-page"><span>Another nested page</span></a>' +
+              '</li>' +
+            '</ul>' +
+            '<ul>' +
+              '<li>' +
+                '<a href="/nested-page/another-nested-nested-page/#another-nested-nested-page"><span>Another nested nested page</span></a>' +
+              '</li>' +
+            '</ul>' +
+          '</li>' +
+        '</ul>' +
+      '</nav>')
+    module.start($navigation)
+  })
+
+  it('sanitizes headings to unique IDs correctly', function () {
+    $navigation.find('ul > li > ul').each(function (i) {
+      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')
+    })
+  })
+})