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

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">

package/src/components/bs5/navbar/navbar.scss

@@ -1,3 +1,6 @@
+@use "../../../css/mixins" as m;
+@use "../../../css/functions" as f;
+
 @mixin repeatedVerticalStyles {
   .nav-header {
     min-height: var(--qld-header-preheader-height, 4rem);
@@ -18,6 +21,8 @@
       border-radius: 0;
       display: block;
       padding-inline: 1.5rem;
+
+      @include m.focusable($offsetOutline: -3px);
     }
   }
   > .container {
@@ -82,6 +87,9 @@
             box-shadow:
               0px 1px 2px rgba(0, 0, 0, 0.2),
               0px 1px 3px rgba(0, 0, 0, 0.1);
+
+            @include m.focusable();
+
             &:hover {
               box-shadow:
                 0px 4px 8px 3px rgba(0, 0, 0, 0.1),
@@ -100,9 +108,6 @@
               transform: rotate(0deg);
               transition: transform var(--animation-time) ease-in;
             }
-            &:focus {
-              outline: 2px solid var(--qld-focus-color);
-            }
           }
           .nav-link {
             border-block-end: 0;
@@ -124,6 +129,7 @@
           display: block;
           padding: 0;
           box-shadow: none;
+          columns: unset;
           &::before {
             display: none;
           }
@@ -140,12 +146,15 @@
               border-inline-start-color: var(--dropdown-show-bg);
               gap: 0;
               &::after {
-                content: "";
                 content: none;
               }
               &:hover {
                 transition: none;
               }
+
+              &:focus {
+                outline-offset: -3px;
+              }
             }
             p {
               position: absolute;
@@ -172,7 +181,6 @@
                 text-decoration-color: inherit;
                 padding: 0;
                 &:after {
-                  content: "";
                   content: none;
                 }
               }
@@ -205,6 +213,7 @@
     }
     a.dropdown-item {
       background-color: transparent;
+      border-radius: 0;
       &:hover {
         background-color: transparent;
       }
@@ -214,6 +223,8 @@
       border-block-end: 0;
       margin-block-end: 0;
       position: relative;
+      outline-offset: -3px;
+
       &::before {
         content: "";
         position: absolute;
@@ -248,8 +259,9 @@
           background-color: transparent;
         }
       }
-      &:focus {
-        outline-offset: 0;
+
+      &:focus::before {
+        z-index: -1;
       }
     }
   }
@@ -336,6 +348,7 @@
     --mobile-only-display: block;
     --visibility-display: visible;
     --nav-header-border-color: var(--#{$prefix}dark-border);
+
     .qld-header:has(.qld-header-pre-header.dark) ~ & {
       --vert-background-color: var(--#{$prefix}dark-background);
       --background-color: var(--#{$prefix}default-background-shade);
@@ -355,6 +368,15 @@
       --nav-header-icon-color: var(--#{$prefix}brand-accent);
       --navbar-collapse-bg: var(--#{$prefix}dark-background-shade);
       --action-icon-color_active: var(--text-color);
+
+      > :where(*) {
+        --qld-focus-color: var(--qld-light-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
       .alt {
         --vert-background-color: var(--#{$prefix}default-background);
         --background-color: var(--#{$prefix}sapphire-blue);
@@ -369,6 +391,11 @@
         --dropdown-bg-color: var(--#{$prefix}dark-background);
         --action-icon-color: var(--#{$prefix}brand-accent);
         --action-icon-color_active: var(--text-color);
+
+        > :where(*) {
+          --qld-focus-color: var(--qld-dark-focus);
+        }
+
         .nav-link {
           border-inline-start: 0;
         }
@@ -393,6 +420,14 @@
       --navbar-collapse-bg: var(--#{$prefix}default-background-shade);
       --action-icon-color_active: var(--text-color);
 
+      > :where(*) {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-light-focus);
+      }
+
       .alt {
         --vert-background-color: var(--#{$prefix}dark-background);
         --background-color: var(--#{$prefix}default-background);
@@ -406,11 +441,13 @@
         --header-color: var(--#{$prefix}default-background);
         --action-icon-color: var(--#{$prefix}alt-button-hover);
         --action-icon-color_active: var(--text-color);
+
         .nav-link {
           border-inline-start: 0;
         }
       }
     }
+
     .qld-header:has(.qld-header-pre-header.dark-alt) ~ & {
       --background-color: var(--#{$prefix}dark-background-shade);
       --background-color-hover: var(--#{$prefix}dark-alt-background);
@@ -429,6 +466,15 @@
       --nav-header-border-color: var(--#{$prefix}dark-border);
       --nav-header-icon-color: var(--#{$prefix}dark-action-secondary);
       --action-icon-color_active: var(--text-color);
+
+      > :where(*) {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
       .alt {
         --background-color: var(--#{$prefix}dark-alt-background-shade);
         --background-color-hover: var(--#{$prefix}dark-alt-background-shade);
@@ -438,6 +484,11 @@
         --action-icon-color: var(--#{$prefix}brand-accent);
         --link-border-color-hover: var(--#{$prefix}dark-action-secondary-hover);
         --action-icon-color_active: var(--text-color);
+
+        > :where(*) {
+          --qld-focus-color: var(--qld-dark-focus);
+        }
+
         .nav-link {
           border-inline-start: 0;
         }
@@ -500,24 +551,43 @@
       background-color: var(--action-icon-color);
     }
   }
-  .navbar-nav a.nav-link,
-  a.dropdown-item {
+
+  .navbar-nav a.nav-link {
     color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
-    line-height: 2rem;
+    line-height: f.snap-line-height(1.4);
     gap: 0.5rem;
     align-items: center;
     &:hover {
       color: var(--link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.3rem;
-      text-decoration-thickness: 0.125rem;
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
     }
     &:focus {
-      outline-offset: -2px;
+      z-index: 1;
+      outline-offset: -3px;
+    }
+  }
+
+  a.dropdown-item {
+    color: var(--link-color);
+    padding-block: var(--nav-link-padding-block);
+    padding-inline: 0.75rem;
+    display: flex;
+    line-height: f.snap-line-height(1.4);
+    gap: 0.5rem;
+    align-items: flex-start;
+    border-radius: 0.25rem;
+    &:hover {
+      color: var(--link-color);
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
+    }
+    @include m.focusable($offsetOutline: -3px) {
       box-shadow: none;
+      background-color: transparent;
     }
   }
   a.dropdown-toggle {
@@ -546,6 +616,8 @@
     }
   }
   .dropdown-menu.show {
+    display: block;
+    columns: 3;
     margin-block-start: calc(
       var(--horizontal-bar-border-width) - var(--border-width)
     );
@@ -555,21 +627,20 @@
     border-radius: 0.75rem;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    border-width: 0;
     color: var(--text-color);
     box-shadow: var(--shadow-dropdown);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
-    row-gap: 0;
     z-index: 999;
-    border-width: 0;
-    @include media-breakpoint-up(xl) {
-      column-gap: 4rem;
-      row-gap: 0;
-    }
+
     @include media-breakpoint-up(md) {
       padding-block: 3rem;
     }
+
+    @include media-breakpoint-up(xl) {
+      column-gap: 4rem;
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -578,21 +649,26 @@
       inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
+
     li {
-      display: flex;
+      break-inside: avoid-column;
+
       &.mobile-only {
         display: var(--mobile-only-display);
       }
-      &:has(p) {
-        flex-direction: column;
-        row-gap: 20px;
-        p {
-          font-size: 0.875rem;
+
+      p {
+        font-size: 0.875rem;
+        margin-block: f.remify(16px);
+
+        &:first-of-type {
+          margin-block-start: f.remify(20px);
         }
       }
+
       a {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
@@ -610,7 +686,7 @@
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
+          height: 1lh;
           width: 1.25rem;
           min-width: 1.25rem;
           margin-inline-start: auto;
@@ -624,29 +700,22 @@
             padding-inline-end var(--animation-time) ease-in-out,
             gap var(--animation-time) ease-in-out;
         }
-        &:focus {
-          outline-offset: 2px;
+        @include m.focusable() {
           box-shadow: none;
         }
       }
-      p {
-        text-align: start;
-        margin-block-start: 1rem;
-      }
-      p:first-of-type {
-        margin-block-start: 0;
-      }
-      p:last-of-type {
-        margin-block-end: 0;
-      }
     }
+
     li:has(.parent-link) {
       border-block-end: 2px solid var(--border-color);
       padding-block-end: 2rem;
       margin-block-end: 2rem;
       gap: 1rem;
-      grid-column: 1 / -1;
+      column-span: all;
+
       .dropdown-item {
+        width: auto;
+        display: inline-flex;
         border-block-end: 0;
         padding-block: 0;
         gap: 1rem;
@@ -672,11 +741,15 @@
       border-block-start: 2px solid var(--border-color);
       padding-block-start: 2rem;
       margin-block-start: 2rem;
-      grid-column: 1 / -1;
+      text-align: end;
+      column-span: all;
+
       .dropdown-item {
         border-block-end: 0;
-        display: flex;
+        display: inline-flex;
+        width: auto;
         flex-direction: row-reverse;
+        align-items: center;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
         font-size: 1.25rem;
@@ -694,7 +767,6 @@
           transform: scaleX(var(--icon-dir));
         }
         &::after {
-          content: "";
           content: none;
         }
         &:hover {
@@ -753,6 +825,7 @@
     .nav-header .navbar-brand {
       color: var(--nav-header-color);
     }
+
     #burgerCloseBtn {
       --qld-btn-close-bg: none;
       --qld-btn-close-opacity: 1;

package/src/components/bs5/pagination/Pagination.mdx

@@ -9,7 +9,6 @@ import * as PaginationStories from "./pagination.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395566&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11056-321779&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/pagination)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/pagination/)

package/src/components/bs5/pagination/pagination.scss

@@ -1,6 +1,8 @@
 // QGDS QOL Pagination
 // extends https://getbootstrap.com/docs/5.3/components/pagination/#variables
 
+@use "../../../css/mixins" as m;
+
 //PREV NEXT ARROW on default background
 $pagination-icon-prevnext-color: var(--#{$prefix}light-action-secondary);
 $pagination-icon-prevnext-hover-color: var(
@@ -45,7 +47,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}light-link);
+  --#{$prefix}focus-color: var(--#{$prefix}light-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -99,7 +101,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}dark-focus);
+  --#{$prefix}focus-color: var(--#{$prefix}dark-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -171,9 +173,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
         background-color: var(--#{$prefix}pagination-hover-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
+      @include m.focusable($offsetOutline: 2px) {
         border-color: var(--#{$prefix}pagination-hover-border-color);
         box-shadow: inset 0 0 0 1px
           var(--#{$prefix}pagination-hover-border-color);
@@ -245,9 +245,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
           box-shadow: none;
         }
 
-        &:focus {
-          outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-          outline-offset: 2px;
+        @include m.focusable($offsetOutline: 2px) {
           border: none;
           box-shadow: none;
         }
@@ -260,18 +258,16 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
       background-color: var(--#{$prefix}pagination-active-bg);
       border-color: var(--#{$prefix}pagination-active-border-color);
 
-      &:hover {
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-hover-bg);
+      @include m.focusable($offsetOutline: 2px) {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-focus-bg);
+        background-color: var(--#{$prefix}pagination-active-focus-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-focus-bg);
+      &:hover {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-hover-bg);
+        background-color: var(--#{$prefix}pagination-active-hover-bg);
       }
     }
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./promotionalPanel.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=SY0WW7uiwAl3ioEj-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=nVLTSHpRu8jvVSar-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/promotional-panel)