app/assets/javascripts/errorBanner.js

(function (window) {
  "use strict";

  /*
  This module is intended to be used to show and hide an error banner based on a javascript trigger. You should make
  sure the banner has an appropriate aria-live attribute, and a tabindex of -1 so that screenreaders and keyboard users
  are alerted to the change respectively.

  This may behave in unexpected ways if you have more than one element with the `banner-dangerous` class on your page.
  */
  window.GOVUK.ErrorBanner = {
    hideBanner: () => $('.banner-dangerous').addClass('govuk-!-display-none'),
    showBanner: (errorMessage) => $('.banner-dangerous')
      .html(`<span class="govuk-visually-hidden">Error:</span> ${errorMessage}`)
      .removeClass('govuk-!-display-none')
      .trigger('focus'),
  };
})(window);
add new error banner module for showing users js errors this ensures it's reusable by other components, and easier to unit test by isolating the separate concerns note: this is not in Modules since that's designed for classes that are then bound to an element in the DOM as indicated by a data-module attribute. This will just live at the window.GOVUK level since we want there to only ever be one `.banner-dangerous` warning. 2021-07-20 12:14:10 +01:00			`(function (window) {`
			`"use strict";`

			`/*`
			`This module is intended to be used to show and hide an error banner based on a javascript trigger. You should make`
			`sure the banner has an appropriate aria-live attribute, and a tabindex of -1 so that screenreaders and keyboard users`
			`are alerted to the change respectively.`

			This may behave in unexpected ways if you have more than one element with the `banner-dangerous` class on your page.
			`*/`
			`window.GOVUK.ErrorBanner = {`
			`hideBanner: () => $('.banner-dangerous').addClass('govuk-!-display-none'),`
			`showBanner: (errorMessage) => $('.banner-dangerous')`
			.html(`<span class="govuk-visually-hidden">Error:</span> ${errorMessage}`)
			`.removeClass('govuk-!-display-none')`
			`.trigger('focus'),`
			`};`
			`})(window);`