Rewrite ErrorBanner as an ES Module #5682
Open
Conversation
This file contains hidden or 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
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
4 times, most recently
from
20913fd to
01ecc1c
Compare
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
2 times, most recently
from
f0c2a15 to
80caf98
Compare
Instead of using 'govuk-!-display-none' class to hide the banner, we'll use the hidden attribute so that we don't rely on CSS to hide it. We're adding a 'webauthn__error' class to the banner that's used in ErrorBanner JS so we can target it directly instead of toggling all 3. The other two banners are for no-js and no-webauthn support.
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
from
80caf98 to
dd421f8
Compare
This PR rewrites the code into ES Module format that we've been using. Pages where this is used contain 3 error banners: no-js, no webauth-api and error when autheticating/ registering. We're using 'hidden' attribute instead of a CSS class to hide/show banner. Module accepts a custom selector, which we use in authenticateSecurityKey and registerSecurityKey modules.
Move to .mjs and use new ErrorBanner module. Added additonal tests to check module works when custom css selector is passed to the constructor.
Replace window.GOV.UK.ErrorBanner with the new ES Module. As the error banner is hidden there is no need to hide it on load again.
Replace window.GOV.UK.ErrorBanner with the new ES Module. As the error banner is hidden there is no need to hide it on load again.
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
from
dd421f8 to
5aed708
Compare
tombye
reviewed
Nov 28, 2025
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
2 times, most recently
from
1cd8f14 to
6a95edf
Compare
Use the new ErrorBanner module and test that its correct methods are being called.
Use the new ErrorBanner module and test that its correct methods are being called.
Remove file and remove from build bundle
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
from
6a95edf to
7854326
Compare
kr8n3r
force-pushed
the
rewrite-error-banner-as-esm
branch
from
9a199cf to
d11f0df
Compare
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.
What
We want to migrate all of our legacy Javascript files to ESM, so this is the latest in the series of conversions.
Trello ticket
Rewrite follows the same conventions we previously used for RadioSelect, FocusBanner, Collapsible checkboxes, ColourPreview, FileUpload, Autofocus, PreviewPane, CopyToClipboard and others.
In this PR we:
authenticateSecurityKeysandregisterSecurityKeysmodules and testsReview
loginand/your-accountpages when authenticating and adding new security keys