Can we display the banner by default without javascript?

[andybroomfield]

Currently the banner requires javascript to display.
This is so that if a user has hidden the banner, there isn't a flash of the banner appearing breifly, as the logic to hide the banner is in javascript.
Is it possible to reverse this and have it so the banner is displayed by default and hidden server side?
I think the problem before was when the internal page caching module was turned on.

[finnlewis]

@markconroy mentioned putting the block in tag with display block. This would then render it Javascript is disabled.

[markconroy]

@finnlewis @andybroomfield Yes, we had a similar issue recently and our solution was like this:

1. use display: none; on the alert to avoid the flash of seeing it before it's hidden
2. use JS to then show the banner, but in case JS is not loading then
3. Add

  <noscript>
    <style>
      .localgov-alert-banner {display: block;}
    </style>
  </noscript>

in the template.

[danchamp]

Is it possible to reverse this and have it so the banner is displayed by default and hidden server side?

+1 for hiding banners server side since it would also remove the dependency on CSS to hide the banner.

At the moment a hidden banner is still present in the HTML on subsequent page loads, and will be shown / announced to users if CSS is not available for any reason, or run the risk of a FOUC.

At the least we should add aria-hidden to hidden banners, but it feels cleaner to check for the presence of a cookie for the banner server-side, and not render it at all if it's been hidden.

[markconroy]

Within the new theme we have a .no-js class that is present on initial load but removed straighaway by JS.

We could use something like .no-js .localgov-alert-banner { display: block; }.

I like @danchamp idea of doing this server side if possible.