Bug - Banner opening and not closing

[mvogelgesang]

Describe the bug

When navigating between pages that utilize two different theme layouts, the USWDS Banner opens up and never closes back down.

To Reproduce

• Create new community
• Create a new Theme Layout called "Layout2" (Experience Builder > Settings > Theme > New Theme Layout)
• In the page listing, choose the Contact page.
  • set the Theme Layout for the Contact page to "Layout 2", you must override the default settings
• Update default navigation to include a page reference to the Contact page
• Publish community
• From home page, click Contact in header navigation
• Observe banner opening
• Click back to home, banner stays open.

When looking at the browser Console, uswds-init.js and uswds.js are only loaded once across the two pages. This is the same as when navigating between two pages on a single Theme Layout. At the end of the day, something is causing the menu to open but init is not firing to close it.

When the banner hangs open, it does not have the usa-banner__header usa-banner__header--expanded classes assigned. When you click the arrow to roll up the accordion, it then sets the expanded classes. A second click closes the banner accordion.

The markup diff is quite simple (represents markup after navigation):

  <div
    id="gov-banner-demo"
    class="usa-banner__content usa-accordion__content"
-   hidden=""
  >

Expected behavior

The banner should collapse on page load

Screenshots

https://user-images.githubusercontent.com/4053083/225715772-9b3f320c-d1f8-408e-bd77-396f670056a6.mov

Desktop (please complete the following information):

• SF v57.0
• Branch, Develop

Next Steps

• [x] If the uswds-init.js script is placed in-line within does that address the issue? This was offered up as a potential option in https://github.com/uswds/uswds/pull/3867
  • no, it does not
• [x] Have other USWDS teams experienced this before, look through USWDS backlog and uswds-public Slack
• [x] Does onRender() get fired with each page navigation? If so, are we able to call an action to close the banner?

[mvogelgesang]

Two updates:

1) Tried creating a copy of the uswdsTheme aura component without the login/user profile section. The banner still gets stuck in an open position when navigating between pages that utilize different Theme Layouts in builder.

2) JS files do no reload when using navigation in community. As a result, any automatically invoked functions do not fire. Unclear if there is a way to trigger this from an onRender() or any of the render() methods.

[mvogelgesang]

Potential lead:

https://developer.salesforce.com/docs/atlas.en-us.200.0.lightning.meta/lightning/js_renderers.htm

updateDisabled: function(cmp) {
    if (cmp.get("v.disabled")) {
        var disabled = $A.util.getBooleanValue(cmp.get("v.disabled")); 
        var button = cmp.find("button");
        if (button) {
            var element = button.getElement();
            if (element) {
                if (disabled) {
                    element.setAttribute('disabled', 'disabled');
                } else {
                    element.removeAttribute('disabled');
                }
            }
        }
    }
}

[mvogelgesang]

The aforementioned example does the trick. By updating the element attribute directly via the controller, the banner collapses by default but retains its ability to open and close.