@qld-gov-au/qgds-bootstrap5 2.1.3 → 2.1.4

package/dist/components/bs5/globalAlert/globalAlert.hbs

@@ -2,7 +2,7 @@
 
 <div class="global-alert-include">
   {{#each alertItems}}
-  <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
+  <section role="region" class="global-alert d-none {{variant}}" data-variant="{{variant}}"
     {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
     {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
     {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
@@ -11,7 +11,7 @@
     {{~/if}}
     {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
-    <div class="qld-global-alert-main">
+    <div class="qld-global-alert-main container">
       <div class="global-alert-icon">
         {{#ifCond variant '==' 'global-alert-critical'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-danger" aria-hidden="true"></span>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.3","branch":"HEAD","tag":"v2.1.3","commit":"0459f9571a74eab35ed443c3d02fece2a811642c","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.4","branch":"HEAD","tag":"v2.1.4","commit":"119a2bb84ace0878da734ff1026c633117afc4bc","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/navbar/navbar.hbs

@@ -26,7 +26,7 @@
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "selenium-webdriver": "^4.38.0",
     "storybook": "^10.0.8",
     "storybook-addon-deep-controls": "^0.10.0",
+    "storybook-addon-tag-badges": "^3.0.2",
     "vite": "^7.1.11",
     "vitest": "^4.0.10"
   },

package/dist/sample-data/globalAlert/globalAlert.data.json

@@ -6,7 +6,7 @@
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
         "dismissedExpiryDays": 0,
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       }
     ]
@@ -17,7 +17,7 @@
         "id": "service-delay-weather",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -28,7 +28,7 @@
         "id": "caretaker-period-2024",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -39,14 +39,14 @@
         "id": "cyclone-xyz-critical",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "id": "flood-warning-southeast",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       },
@@ -54,14 +54,14 @@
         "id": "transport-delays-brisbane",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       },
       {
         "id": "health-services-disruption",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>",
         "preventDismiss": true
       },
@@ -69,13 +69,13 @@
         "id": "election-caretaker-info",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "selenium-webdriver": "^4.38.0",
     "storybook": "^10.0.8",
     "storybook-addon-deep-controls": "^0.10.0",
+    "storybook-addon-tag-badges": "^3.0.2",
     "vite": "^7.1.11",
     "vitest": "^4.0.10"
   },

package/src/components/bs5/globalAlert/globalAlert.data.json

@@ -6,7 +6,7 @@
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
         "dismissedExpiryDays": 0,
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       }
     ]
@@ -17,7 +17,7 @@
         "id": "service-delay-weather",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -28,7 +28,7 @@
         "id": "caretaker-period-2024",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -39,14 +39,14 @@
         "id": "cyclone-xyz-critical",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "id": "flood-warning-southeast",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       },
@@ -54,14 +54,14 @@
         "id": "transport-delays-brisbane",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       },
       {
         "id": "health-services-disruption",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>",
         "preventDismiss": true
       },
@@ -69,13 +69,13 @@
         "id": "election-caretaker-info",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       }

package/src/components/bs5/globalAlert/globalAlert.hbs

@@ -2,7 +2,7 @@
 
 <div class="global-alert-include">
   {{#each alertItems}}
-  <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
+  <section role="region" class="global-alert d-none {{variant}}" data-variant="{{variant}}"
     {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
     {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
     {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
@@ -11,7 +11,7 @@
     {{~/if}}
     {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
-    <div class="qld-global-alert-main">
+    <div class="qld-global-alert-main container">
       <div class="global-alert-icon">
         {{#ifCond variant '==' 'global-alert-critical'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-danger" aria-hidden="true"></span>

package/src/components/bs5/globalAlert/globalAlert.scss

@@ -1,10 +1,13 @@
 @use "../../../css/mixins" as m;
 
 .global-alert {
+  --focus-colour: var(--#{$prefix}neutral-darkest);
+
   line-height: 1.25rem;
   border-radius: 0;
   border-top-style: solid;
   border-width: 0;
+  padding-block: 0.75rem;
 
   &:first-child:not(:only-child) {
     border-top-width: 1px;
@@ -14,13 +17,6 @@
     border-top-width: 1px;
   }
 
-  &.alert {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    padding-left: 2rem;
-    margin-bottom: 0;
-  }
-
   .qld-global-alert-main {
     display: flex;
     column-gap: 1rem;
@@ -69,7 +65,7 @@
       text-wrap: nowrap;
     }
   }
-
+  
   .global-alert-close {
     display: inline-flex;
     justify-content: center;
@@ -108,6 +104,10 @@
 
       @include m.focusable($outlineWidth: 2px);
       box-shadow: none;
+      &:focus {
+        outline-color: var(--focus-colour);
+      }
+      
 
       @include media-breakpoint-down(lg) {
         &:hover {
@@ -119,6 +119,7 @@
 
   &.global-alert-critical {
     --#{$prefix}icon-color: #{$core-default-color-neutral-white};
+    --focus-colour: var(--#{$prefix}neutral-white);
 
     background-color: $qld-notify-warning;
     color: var(--#{$prefix}white);
@@ -196,7 +197,20 @@
     }
   }
 }
-
+@include media-breakpoint-down(lg) {
+  .global-alert {
+    .global-alert-content .global-alert-action {
+      margin-inline-end: 2rem;      
+    }
+  }
+}
+@include media-breakpoint-down(md) {
+  .global-alert {
+    .global-alert-content {
+      padding: 0;
+    }
+  }
+}
 @include media-breakpoint-up(lg) {
   .global-alert {
     .global-alert-close {
@@ -215,5 +229,6 @@
         }
       }
     }
+    
   }
 }

package/src/components/bs5/globalAlert/globalAlert.stories.js

@@ -3,7 +3,7 @@ import { GlobalAlert } from "./GlobalAlert.js";
 import defaultdata from "./globalAlert.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Global Alert",
   render: (args) => new GlobalAlert(args).html,
   argTypes: {

package/src/components/bs5/globalAlert/globalAlert.test.js

@@ -155,20 +155,6 @@ describe("initGlobalAlerts", () => {
     localStorage.clear();
   });
 
-  it("Renders with proper classes applied", () => {
-    // The reason we needed to call initGlobalAlerts() manually in the tests is because:
-    // The JSDOM environment handles script execution and events differently than a real browser. Here's what happens:
-    // 1. When JSDOM loads the HTML with the scripts, the scripts execute immediately
-    // 2. The DOMContentLoaded event might fire before the test can set up localStorage properly
-    // 3. Even if DOMContentLoaded fires, the localStorage mock might not be properly injected into the script's execution context
-    initGlobalAlerts();
-
-    const alerts = d.querySelectorAll(".global-alert");
-    alerts.forEach((alert) => {
-      expect(alert.classList.contains("alert")).toBe(true);
-    });
-  });
-
   test("Alert uses default variant when data-variant is not provided", () => {
     initGlobalAlerts();
 

package/src/components/bs5/inpageAlert/inpageAlert.stories.js

@@ -129,7 +129,7 @@ export const AllVariants = {
       <div class="mb-4">
         ${new InpageAlert(alertData).html}
       </div>
-    `
+    `,
       )
       .join("");
   },

package/src/components/bs5/linkColumns/linkColumns.stories.js

@@ -11,23 +11,24 @@ import defaultdata from "./linkColumns.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Link Columns",
-  
+
   render: (args) => new LinkColumns(args).html,
   //   args: defaultdata,
   argTypes: {
     columns: {
-      description: 'Number of coloumns of links to display',
-      control: { type: 'number', min: 1, max: 3, step: 1 },
+      description: "Number of coloumns of links to display",
+      control: { type: "number", min: 1, max: 3, step: 1 },
     },
-    id: { control: 'text' },
+    id: { control: "text" },
     theme: {
-      description: 'The types of themes that this component supports',
+      description: "The types of themes that this component supports",
       control: "select",
-      options: ["default","light", "alt", "dark", "dark-alt"],
+      options: ["default", "light", "alt", "dark", "dark-alt"],
     },
     data: {
-      description: 'The data for the link columns. Each link has a url, id, value, and target. The all_link option if available, displays a single link at the end of the list, with a optional class property.',
-      control: 'object',
+      description:
+        "The data for the link columns. Each link has a url, id, value, and target. The all_link option if available, displays a single link at the end of the list, with a optional class property.",
+      control: "object",
     },
   },
 
@@ -46,8 +47,8 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395563&t=RyMlGjeuzgl8p5Gx-0",
     },
-    pageLayout: 'with-wrapper',
-    wrapperClasses:'qld-content-body',
+    pageLayout: "with-wrapper",
+    wrapperClasses: "qld-content-body",
   },
 };
 

package/src/components/bs5/navbar/navbar.functions.js

@@ -1,37 +1,27 @@
 import { createFocusTrap } from "../../../js/utils.js";
 import { breakpoints } from "../../../js/constants.js";
+import { getFocusableElements } from "../../../js/utils.js";
+
+const getIsMobile = () => window.innerWidth < breakpoints.lg;
 
 export function initializeNavbar() {
   const navbar = document.getElementById("main-nav");
   const overlay = document.getElementById("overlay");
   const burgerBtn = document.getElementById("burgerBtn");
   const burgerCloseBtn = document.getElementById("burgerCloseBtn");
-  const addHideTo = ["head", "main", "footer"];
-  const hideTargets = addHideTo
-    .map((id) => document.getElementById(id))
-    .filter(Boolean);
-
-  // Helper to set aria-hidden
-  const setAriaHidden = (hidden) => {
-    hideTargets.forEach((el) => {
-      if (hidden) {
-        el.setAttribute("aria-hidden", "true");
-      } else {
-        el.removeAttribute("aria-hidden");
-      }
-    });
-  };
+
+  /** @type {HTMLElement[]} */
+  let inertTargets = [];
 
   // Focus trap instances (created on-demand)
   let mobileFocusTrap = null;
-  const dropdownFocusTraps = new Map();
 
   function closeNavbar() {
     // Do not call static method bootstrap.Collapse.getInstance(navbar).hide()
     // because storybook has a problem with referencing global bootstrap object in production build.
     // Instead simulate the close button click - same thing.
     // Do not put side effects of closing menu here (eg clearing menu focus trap), instead use "hidden.bs.collapse" or "hide.bs.collapse" event handlers declared below.
-    // Need to check if menu is actually set to show, otherwise cick will open instead.
+    // Need to check if menu is actually set to show, otherwise click will open instead.
     if (navbar?.classList.contains("show")) {
       burgerCloseBtn?.click();
     }
@@ -50,25 +40,7 @@ export function initializeNavbar() {
     return mobileFocusTrap;
   }
 
-  // Create dropdown focus trap on-demand (when dropdown opens)
-  function getOrCreateDropdownFocusTrap(dropdown, toggle) {
-    if (!dropdownFocusTraps.has(dropdown)) {
-      const dropdownTrap = createFocusTrap(dropdown, {
-        returnFocusElement: toggle,
-        onEscape: () => {
-          // Close the dropdown using Bootstrap's API
-          const bsDropdown = bootstrap.Dropdown.getInstance(toggle);
-          if (bsDropdown) {
-            bsDropdown.hide();
-          }
-        },
-      });
-      dropdownFocusTraps.set(dropdown, dropdownTrap);
-    }
-    return dropdownFocusTraps.get(dropdown);
-  }
-
-  // Setup dropdown event listeners
+  // Setup dropdown event listeners.
   function setupDropdownListeners() {
     // Find all dropdown toggles (elements with data-bs-toggle="dropdown")
     const dropdownToggles = navbar?.querySelectorAll(
@@ -84,21 +56,29 @@ export function initializeNavbar() {
       const dropdown = parentItem.querySelector(".dropdown-menu");
       if (!dropdown) return;
 
-      // Listen for dropdown show event (desktop only)
-      toggle.addEventListener("shown.bs.dropdown", () => {
-        const isMobile = window.innerWidth < breakpoints.lg;
-        if (!isMobile) {
-          // Create and activate focus trap on-demand
-          const dropdownTrap = getOrCreateDropdownFocusTrap(dropdown, toggle);
-          setTimeout(() => dropdownTrap.activate(), 0);
-        }
-      });
+      // Add spacebar click for <a> tags, <buttons> already have this.
+      if (toggle?.tagName === "A") {
+        toggle.addEventListener("keydown", (/** @type KeyboardEvent*/ e) => {
+          if (e.key === " ") {
+            e.preventDefault();
+            toggle.click();
+          }
+        });
+      }
 
-      // Listen for dropdown hide event
-      toggle.addEventListener("hidden.bs.dropdown", () => {
-        const dropdownTrap = dropdownFocusTraps.get(dropdown);
-        if (dropdownTrap && dropdownTrap.isActive) {
-          dropdownTrap.deactivate();
+      // There are two separate toggle elements for desktop and mobile. Bootstrap only keeps one registered for these events,
+      // which is the mobile button, hidden on desktop. Therefore, we need to handle any `a.dropdown-toggle` updates manually. The event is caught on the
+      // mobile toggle, so traverse back up find the desktop toggle.
+      toggle.addEventListener("hidden.bs.dropdown", (e) => {
+        const _toggle = parentItem.querySelector(
+          'a[data-bs-toggle="dropdown"]',
+        );
+        _toggle?.classList.remove("show");
+        if (
+          dropdown?.contains(document.activeElement) &&
+          !(getIsMobile() || navbar.classList.contains("vertical"))
+        ) {
+          _toggle?.focus();
         }
       });
     });
@@ -115,13 +95,13 @@ export function initializeNavbar() {
   });
 
   const resetNavbarState = () => {
-    const isMobile = window.innerWidth < breakpoints.lg;
-    const dropdownToggles = document.querySelectorAll(
-      ".navbar a.dropdown-toggle, .navbar a.no-dropdown-toggle",
+    const isMobile = getIsMobile();
+    const dropdownToggles = navbar?.querySelectorAll(
+      "a.dropdown-toggle, a.no-dropdown-toggle",
     );
 
     // Toggle dropdown functionality based on screen size
-    dropdownToggles.forEach((toggle) => {
+    dropdownToggles?.forEach((toggle) => {
       if (isMobile) {
         // Skip toggle items with hasNoLink class
         if (toggle.classList.contains("hasNoLink")) {
@@ -150,8 +130,9 @@ export function initializeNavbar() {
 
   // All associated side effects of navbar collapse completion belong here.
   navbar?.addEventListener("hidden.bs.collapse", () => {
-    setAriaHidden(false);
-
+    inertTargets.forEach((target) => {
+      target.inert = false;
+    });
     // Deactivate and destroy mobile focus trap
     if (mobileFocusTrap) {
       mobileFocusTrap.deactivate();
@@ -159,20 +140,24 @@ export function initializeNavbar() {
     }
   });
 
-  // Burger buttons - handle open (mobile only)
+  //  All associated side effects of navbar opening belong here.
   navbar?.addEventListener("shown.bs.collapse", () => {
-    // Check if navbar is opening
-    setTimeout(() => {
-      if (navbar?.classList.contains("show")) {
-        setAriaHidden(true);
-
-        // Create and activate focus trap when navbar opens (mobile only - whole navbar)
-        const isMobile = window.innerWidth < breakpoints.lg;
-        if (isMobile) {
+    if (getIsMobile) {
+      // Check if navbar is opening
+      setTimeout(() => {
+        if (navbar?.classList.contains("show")) {
+          // set all siblings to inert
+          inertTargets = Array.from(navbar.parentElement.children).filter(
+            (child) => child !== navbar,
+          );
+          inertTargets.forEach((target) => {
+            target.inert = true;
+          });
+
           const trap = createMobileFocusTrap();
           trap.activate();
         }
-      }
-    }, 0);
+      }, 0);
+    }
   });
 }

package/src/components/bs5/navbar/navbar.hbs

@@ -26,7 +26,7 @@
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">