Fix e2e tests after govuk-frontend update to v5.1.0 #82
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Looking at what is in the 5.1.0 release, it includes a change to radio and checkbox styling, which I believe is what is causing the issue. alphagov/govuk-frontend#4093. It looks like the removal of the `z-index` on `.govuk-radios__input` and `.govuk-checkboxes__input` has meant they now have `z-index: auto` but the styled `label:before` and :`after` have `z-index: 1` which causes them to be higher in the `z-order` than the inputs, which means they’re underneath another element and technically not clickable. Adding `force: true`, forces the click on the radio button and checkbox even though it is covered by the labels pseudo elements. This does not affect the actual usability.
stevomcallister
approved these changes
Feb 8, 2024
colinbruce
added a commit
to ministryofjustice/laa-apply-for-legal-aid
that referenced
this pull request
Feb 20, 2024
A change in govuk frontend caused a shift in z order, so this change allows label clicks thanks to ministryofjustice/hmpps-accredited-programmes-e2e#82 for pointing me in the direction!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Looking at what is in the 5.1.0 release, it includes a change to radio and checkbox styling, which I believe is what is causing the issue. alphagov/govuk-frontend#4093. It looks like the removal of the
z-indexon.govuk-radios__inputand.govuk-checkboxes__inputhas meant they now havez-index: autobut the styledlabel:beforeand :afterhavez-index: 1which causes them to be higher in thez-orderthan the inputs, which means they’re underneath another element and technically not clickable.Adding
force: true, forces the click on the radio button and checkbox even though it is covered by the labels pseudo elements.This does not affect the actual usability.