From 5b5159088f460cfe138a8a7f1adb001a9f6acd16 Mon Sep 17 00:00:00 2001 From: Colin Burn-Murdoch Date: Mon, 21 Jun 2021 10:40:36 -0400 Subject: [PATCH 1/4] Apply aria-expanded to the trigger, not the expandable area aria-controls is already set --- lib/assets/javascripts/_modules/collapsible-navigation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js index 2c03c662..3e3214ac 100644 --- a/lib/assets/javascripts/_modules/collapsible-navigation.js +++ b/lib/assets/javascripts/_modules/collapsible-navigation.js @@ -49,11 +49,11 @@ function toggleHeading ($topLevelItem) { var isOpen = $topLevelItem.hasClass('is-open') var $heading = $topLevelItem.find('> a') - var $body = $topLevelItem.find('.collapsible__body') + var $button = $topLevelItem.find('.collapsible__toggle') var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label') $topLevelItem.toggleClass('is-open', !isOpen) - $body.attr('aria-expanded', isOpen ? 'false' : 'true') + $button.attr('aria-expanded', isOpen ? 'false' : 'true') $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text()) } From 4ba92c82317d59051bef93810089bc316af7e12f Mon Sep 17 00:00:00 2001 From: Colin Burn-Murdoch Date: Tue, 22 Jun 2021 07:29:17 -0400 Subject: [PATCH 2/4] Refactor toggleHeading to be clearer about it's intentions isOpen was initially set, to the *current* state. Subsequent controls were inverting that. If we invert it at the beginning this becomes clearer Note - also renamed to setOpen to signify intent. --- .../javascripts/_modules/collapsible-navigation.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js index 3e3214ac..df242b79 100644 --- a/lib/assets/javascripts/_modules/collapsible-navigation.js +++ b/lib/assets/javascripts/_modules/collapsible-navigation.js @@ -47,14 +47,15 @@ } function toggleHeading ($topLevelItem) { - var isOpen = $topLevelItem.hasClass('is-open') + var setOpen = !$topLevelItem.hasClass('is-open') + var $heading = $topLevelItem.find('> a') var $button = $topLevelItem.find('.collapsible__toggle') var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label') - $topLevelItem.toggleClass('is-open', !isOpen) - $button.attr('aria-expanded', isOpen ? 'false' : 'true') - $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text()) + $topLevelItem.toggleClass('is-open', setOpen) + $button.attr('aria-expanded', setOpen ? 'true' : 'false') + $toggleLabel.text(setOpen ? 'Collapse ' + $heading.text() : 'Expand ' + $heading.text()) } function openActiveHeading () { From f46aee7312d58e606cf81ac96018a1774fa73166 Mon Sep 17 00:00:00 2001 From: Colin Burn-Murdoch Date: Mon, 28 Jun 2021 11:38:03 -0400 Subject: [PATCH 3/4] Set the initial `aria-expanded` state on the trigger not the target --- lib/assets/javascripts/_modules/collapsible-navigation.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js index df242b79..4e4f6426 100644 --- a/lib/assets/javascripts/_modules/collapsible-navigation.js +++ b/lib/assets/javascripts/_modules/collapsible-navigation.js @@ -34,10 +34,9 @@ arrayOfIds.push(uniqueId) $(this).addClass('collapsible__body') .attr('id', uniqueId) - .attr('aria-expanded', 'false') }) $heading.addClass('collapsible__heading') - .after('') + .after('') $topLevelItem.on('click', '.collapsible__toggle', function (e) { e.preventDefault() var $parent = $(this).parent() From 4855791d0fc761b8a04d78a4c4983b29dcfbee7a Mon Sep 17 00:00:00 2001 From: Colin Burn-Murdoch Date: Tue, 13 Jul 2021 08:32:40 -0400 Subject: [PATCH 4/4] Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae71eab7..d9f4da3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - [Bump redcarpet to 3.5.1 to fix CVE-2020-26298](https://github.com/alphagov/tech-docs-gem/pull/226) +- [#238: Move the aria-expanded attribute to the correct element](https://github.com/alphagov/tech-docs-gem/pull/238) ## 2.3.0