Only query radios that are within the same form

By doing this alongside checking the name we only run setAttributes on
the radio inputs that could change.

app/views/examples/multiple-radio-groups/index.njk

@@ -149,6 +149,28 @@
         text: "Submit"
       }) }}
     </form>
+
+    <h3 class="govuk-heading-m">A question that is not in a form</h3>
+    {{ govukRadios({
+      idPrefix: "question-not-in-form",
+      name: "question-not-in-form",
+      items: [
+        {
+          value: "yes",
+          text: "Yes",
+          conditional: {
+            html: '<p class="govuk-body">Fair enough.</p>'
+          }
+        },
+        {
+          value: "no",
+          text: "No",
+          conditional: {
+            html: '<p class="govuk-body">No judgment.</p>'
+          }
+        }
+      ]
+    }) }}
   </div>
 </div>
 {% endblock %}

src/govuk/components/radios/radios.js

@@ -46,16 +46,17 @@ Radios.prototype.setAttributes = function ($input) {
 }
 
 Radios.prototype.handleClick = function (event) {
+  var $clickedInput = event.target
   // We only want to handle clicks for radio inputs
-  if (event.target.type !== 'radio') {
+  if ($clickedInput.type !== 'radio') {
     return
   }
   // Because checking one radio can uncheck a radio in another $module,
-  // we need to call set attributes on all radios in the document
+  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
   //
   // We also only want radios which have aria-controls, as they support conditional reveals.
-  var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]')
-  var $clickedInput = event.target
+  var $scope = ($clickedInput.form || document)
+  var $allInputs = $scope.querySelectorAll('input[type="radio"][aria-controls]')
   nodeListForEach($allInputs, function ($input) {
     // In radios, only radios with the same name will affect each other.
     if ($clickedInput.name === $input.name) {

src/govuk/components/radios/radios.test.js

@@ -133,6 +133,15 @@ describe('Radios with conditional reveals', () => {
         const isWarmConditionalRevealHidden = await waitForHiddenSelector('#conditional-warm')
         expect(isWarmConditionalRevealHidden).toBeTruthy()
       })
+      it('toggles conditional reveals when not in a form', async () => {
+        await page.goto(baseUrl + '/examples/multiple-radio-groups', { waitUntil: 'load' })
+
+        // Select first input in radios not in a form
+        await page.click('#question-not-in-form')
+
+        const isConditionalRevealVisible = await waitForVisibleSelector('#conditional-question-not-in-form')
+        expect(isConditionalRevealVisible).toBeTruthy()
+      })
     })
   })
 })