ElementClickInterceptedError using Selenium in 5.1.0

[damian]

Description of the issue

5.1.0 contains some refactoring to the CSS for radio buttons and checkboxes resulting in these form controls no longer able to be selected / checked by ID using Selenium. This really should have been a breaking change in my opinion, as it will break a lot of acceptance test suites(including ours).

Steps to reproduce the issue

const { Builder, By } = require('selenium-webdriver');

(async function helloSelenium() {
  try {
    let driver = await new Builder().forBrowser('chrome').build();

    await driver.get('https://design-system.service.gov.uk/components/radios/default/');

    const wales = await driver.findElement(By.id('whereDoYouLive-3'));
    wales.click();
  } catch (e) {
    console.log(e);
  }
})();

ElementClickInterceptedError: element click intercepted: Element <input class="govuk-radios__input" id="whereDoYouLive-3" name="whereDoYouLive" type="radio" value="wales"> is not clickable at point (52, 215). Other element would receive the click: <label class="govuk-label govuk-radios__label" for="whereDoYouLive-3">...</label>

Actual vs expected behaviour

• Actual: Selenium throws the above error as the pseudo elements are positioned over the top of the input
• Expected: The radio to be selected

[romaricpascal]

Hi @damian,

Thanks for reporting this and providing an example to quickly reproduce the issue. Looks like we missed the disappearance of the z-index that was putting the input above its label, which introduced this unexpected breaking change.

We're working on a long-term way to test for this so it doesn't disappear again without us noticing after we add it back and will ship as soon as we get it ready.

Apologies for the unexpected breakage and thanks for your patience.

[damian]

No worries - thanks for acknowledging this and putting in a fix just as quickly, its very much appreciated 🙌