Govuk-frontend: Radios aren't focussed when anchored to in Firefox

[gazjoy]

Hi, we have noticed an issue when anchoring to a radio in Firefox Quantum 61.0.2. I have done a recording of the issue with a comparison to Chrome (left). I am using govuk_frontend 1.3.0.

https://drive.google.com/file/d/1HgeqmMo1oll_kJ5cFPA_ssWQafHq6xbr/view?usp=sharing

I see the same issue when anchoring to the ID of "Yes" and "No".
If i anchor to the surrounding fieldset or to the legend it doesn't work in Chrome or Firefox. This would be expected without some additional JavaScript to bind the focus to the input.

This looks to be an issue in elements as well: http://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-radio

Example of my code:

<div class="govuk-grid-column-two-thirds">
  <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
    <h2 class="govuk-error-summary__title" id="error-summary-title">There is a problem</h2>
      <div class="govuk-error-summary__body">
        <ul class="govuk-list govuk-error-summary__list">
          <li><a href="#EQ1_residenceQuestion.ukResidence_true">You must complete this section</a></li>
        </ul>
      </div>
    </div>
    <form action="/form/eligibility/residence" method="post">
       <input type="hidden" name="xxxxx" value="123">
      <div class="govuk-form-group govuk-form-group--error">
        <fieldset class="govuk-fieldset govuk-!-margin-top-6" role="group">
          <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
            <h1 class="govuk-fieldset__heading">Do you live in England, Wales or Scotland?</h1>
          </legend>
          <span id="declaration-error" class="govuk-error-message">You must complete this section</span>
          <div class="govuk-radios govuk-radios--inline">
            <div class="govuk-radios__item">
              <input class="govuk-radios__input" id="EQ1_residenceQuestion.ukResidence_true" name="residenceQuestion.ukResidence" type="radio" value="true">
              <label class="govuk-label govuk-radios__label" for="EQ1_residenceQuestion.ukResidence_true">Yes</label>
            </div>
            <div class="govuk-radios__item">
              <input class="govuk-radios__input" id="EQ1_residenceQuestion.ukResidence_false" name="residenceQuestion.ukResidence" type="radio" value="false">
              <label class="govuk-label govuk-radios__label" for="EQ1_residenceQuestion.ukResidence_false">No</label>
            </div>
          </div>
        </fieldset>
      </div>
      <button type="submit" class="govuk-button">Continue</button>
    </form>
  </div>

[robertpataki]

@gazjoy, @nickcolley After some further investigation I've found that this odd behaviour only happens in Firefox, and it's probably a browser bug.

Chrome, Opera and Safari on Mac and IE8-11 Windows 7 consistently highlight the form controls (input, checkbox, radio) when they receive focus through an anchor link, or through directly linking from the Address bar.

To evaluate the issue try the following links:

• http://govuk-elements.herokuapp.com/form-elements/#radio-inline-1
• http://govuk-elements.herokuapp.com/form-elements/#checkbox-telephone-number
• http://govuk-elements.herokuapp.com/form-elements/#telephone-number

When hitting up the above links in a non-Firefox browser, the form control gets the focus and the view is updated - showing the yellow border, but when testing in Firefox the focus is set on the form control, but no yellow border shows.

I don't think there is anything actionable for us - I filed a new bug on the Bugzilla site: https://bugzilla.mozilla.org/show_bug.cgi?id=1490335

[36degrees]

Thanks for reporting and for investigating, @gazjoy and @robertpataki! It's great to see issues being filed with browser vendors for things like this.

I agree there's nothing that we can do here – it looks like it's up to Firefox to fix this behaviour – so I'm going to close this issue. Please do update us if anything changes – we'd love to know if that bug gets fixed 🙂