From fc3c04ac0fb156313d7f19dcdbc536f1dd99b46d Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 27 Aug 2019 15:14:04 +0100
Subject: [PATCH] Test alt to toggling a11y attributes of conditional

To fix "Elements must only use allowed ARIA attributes"
https://github.com/alphagov/govuk-frontend/issues/979

Attempted solution:
- Remove aria-expanded
- Follow "Optionally, each element that serves as a container for
panel content has role region and aria-labelledby with a value that
refers to the button that controls display of the panel" from
https://www.w3.org/TR/wai-aria-practices/#accordion
---
 src/govuk/components/radios/radios.js    | 2 --
 src/govuk/components/radios/template.njk | 3 ++-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/govuk/components/radios/radios.js b/src/govuk/components/radios/radios.js
index b4af3dcad4..9fad1d9a69 100644
--- a/src/govuk/components/radios/radios.js
+++ b/src/govuk/components/radios/radios.js
@@ -41,8 +41,6 @@ Radios.prototype.setAttributes = function ($input) {
   if ($content && $content.classList.contains('govuk-radios__conditional')) {
     var inputIsChecked = $input.checked
 
-    $input.setAttribute('aria-expanded', inputIsChecked)
-
     $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked)
   }
 }
diff --git a/src/govuk/components/radios/template.njk b/src/govuk/components/radios/template.njk
index 9c3284773a..f0f4ac0751 100644
--- a/src/govuk/components/radios/template.njk
+++ b/src/govuk/components/radios/template.njk
@@ -90,7 +90,8 @@
           {% endif %}
         </div>
         {% if item.conditional %}
-          <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+          <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}"
+          aria-labelledby="{{ id }}" role="region">
             {{ item.conditional.html | safe }}
           </div>
         {% endif %}