@qld-gov-au/qgds-bootstrap5 2.0.12 → 2.1.0

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

@@ -1,6 +1,6 @@
 {
   "variantClass": "alert-success",
-  "alertType": "",
+  "ariaLabel": "Success alert",
   "heading": "Alert heading",
   "headingTag": "h2",
   "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"

package/src/components/bs5/inpageAlert/inpageAlert.hbs

@@ -1,5 +1,13 @@
-<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+<div class="alert {{variantClass}} {{customClass}}" role="alert"
+    {{#if ariaLabel}}
+    aria-label="{{ ariaLabel }}"
+    {{else}}
+    {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
+    {{/if}}
+>
     {{#if heading}}
         {{#if headingTag}}
             <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>

package/src/components/bs5/inpageAlert/inpageAlert.scss

@@ -1,5 +1,6 @@
 // QLD Desing System Bootstrap 5 library
 // Extends: https://getbootstrap.com/docs/5.3/components/alerts/#variables
+@use "../../../css/mixins" as m;
 
 //All alerts have the same text and background color, even on darker themes
 //To account for this, we redefine the global vars at the .alert scope
@@ -12,6 +13,7 @@
 }
 
 .alert {
+  position: relative;
   padding-left: 4rem;
   overflow-wrap: break-word;
 
@@ -45,79 +47,75 @@
       no-repeat center center;
   }
 
-  //Alert sidebar color and icon
-  //Colors and icons defined below
-  &:before,
-  &:after {
-    content: "";
-    width: 3rem;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  &:after {
-    color: #fff;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-
-  //alerts color map
-  $alert-colors-map: (
+  //alerts color map with icons
+  $alert-icons-map: (
     "success": (
-      color: var(--#{$prefix}success),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82645' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath d='M9.2207 12.6953C8.99805 12.918 8.58984 12.918 8.36719 12.6953L5.99219 10.3203C5.76953 10.0977 5.76953 9.68945 5.99219 9.4668C6.21484 9.24414 6.62305 9.24414 6.8457 9.4668L8.8125 11.4336L13.1172 7.0918C13.3398 6.86914 13.748 6.86914 13.9707 7.0918C14.1934 7.31445 14.1934 7.72266 13.9707 7.94531L9.2207 12.6953ZM19.5 9.875C19.5 15.1445 15.2324 19.375 10 19.375C4.73047 19.375 0.5 15.1445 0.5 9.875C0.5 4.64258 4.73047 0.375 10 0.375C15.2324 0.375 19.5 4.64258 19.5 9.875ZM10 1.5625C5.39844 1.5625 1.6875 5.31055 1.6875 9.875C1.6875 14.4766 5.39844 18.1875 10 18.1875C14.5645 18.1875 18.3125 14.4766 18.3125 9.875C18.3125 5.31055 14.5645 1.5625 10 1.5625Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82645)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}success),
+      "icon": "alert-success",
     ),
     "info": (
-      color: var(--#{$prefix}info),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}info),
+      "icon": "alert-information",
     ),
     "warning": (
-      color: var(--#{$prefix}warning),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_80802' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='2' width='20' height='17'%3E%3Cpath d='M10 13.9062C10.457 13.9062 10.8438 14.293 10.8086 14.75C10.8086 15.2422 10.457 15.5938 10 15.5938C9.54297 15.5938 9.15625 15.2422 9.15625 14.75C9.15625 14.293 9.50781 13.9062 10 13.9062ZM10 12.5C9.68359 12.5 9.4375 12.2539 9.4375 11.9375V6.875C9.4375 6.59375 9.71875 6.3125 10 6.3125C10.2461 6.3125 10.5273 6.59375 10.5273 6.875V11.9375C10.5273 12.2539 10.2812 12.5 10 12.5ZM18.7188 15.2422C19.0703 15.8398 19.0703 16.543 18.7188 17.1406C18.3672 17.7734 17.7344 18.125 17.0312 18.125H2.96875C2.23047 18.125 1.59766 17.7734 1.24609 17.1406C0.894531 16.543 0.894531 15.8398 1.24609 15.2422L8.27734 3.35938C8.62891 2.76172 9.26172 2.375 10 2.375C10.7031 2.41016 11.3359 2.76172 11.6875 3.35938L18.7188 15.2422ZM17.7344 16.5781C17.9102 16.332 17.875 16.0508 17.7344 15.8047L10.7031 3.92188C10.5625 3.67578 10.2812 3.53516 10 3.5C9.96484 3.5 10 3.5 10 3.5C9.68359 3.5 9.40234 3.67578 9.26172 3.92188L2.23047 15.8047C2.08984 16.0508 2.05469 16.332 2.23047 16.5781C2.37109 16.8594 2.65234 17 2.96875 17H16.9961C17.3125 17 17.5938 16.8594 17.7344 16.5781Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_80802)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}warning),
+      "icon": "alert-warning",
     ),
     "danger": (
-      color: var(--#{$prefix}danger),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
     ),
-    //.alert-error can be a clone of .alert-danger
     "error": (
-        color: var(--#{$prefix}danger),
-        icon:
-          "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
-      ),
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
+    ),
     "light": (
-      color: var(--#{$prefix}light-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23595959'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}light-grey),
+      "icon": null,
     ),
     "dark": (
-      color: var(--#{$prefix}dark-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}dark-grey),
+      "icon": null,
     ),
   );
 
-  //Sets colors (border and icon-background) and icons for each alert type
-  @each $key, $properties in $alert-colors-map {
-    $color: map-get($properties, color);
-    $icon: map-get($properties, icon);
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    color: #fff;
+  }
+
+  &:before {
+    width: 3rem;
+  }
 
+  //Sets border color and icon for each alert type
+  @each $key, $values in $alert-icons-map {
     &-#{$key} {
-      border-color: $color;
+      border-color: map-get($values, "color");
       border-width: 2px;
 
       &:before {
-        background-color: $color;
+        background-color: map-get($values, "color");
       }
 
-      &:after {
-        background-image: url($icon);
+      @if map-get($values, "icon") {
+        @include m.make-icon(
+          $name: map-get($values, "icon"),
+          $size: "md",
+          $pseudo: "after"
+        ) {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          margin: 0 0.75rem;
+        }
       }
     }
   }

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

@@ -49,9 +49,9 @@ export default {
       },
       options: ["alert-success", "alert-info", "alert-warning", "alert-error"],
     },
-    alertType: {
-      name: "Alert Type",
-      description: `Type of the alert. i.g "Success", "Information", "Warning", "Error".`,
+    ariaLabel: {
+      name: "ARIA Label",
+      description: `Accessible label for the alert announced to screen readers. e.g "Success alert", "Information alert", "Warning alert", "Error alert".`,
     },
     headingTag: {
       name: "Heading Tag",
@@ -88,3 +88,54 @@ export const Dark = {
     },
   ],
 };
+
+/**
+ * All alert variants with proper accessibility.
+ * Each alert includes CSS-based icons and a visually-hidden span for screen readers.
+ */
+export const AllVariants = {
+  name: "All Alert Types (Accessibility)",
+  render: () => {
+    const alerts = [
+      {
+        variantClass: "alert-success",
+        ariaLabel: "Success alert",
+        heading: "Success Alert",
+        content: "<p>This action was completed successfully.</p>",
+      },
+      {
+        variantClass: "alert-info",
+        ariaLabel: "Information alert",
+        heading: "Information Alert",
+        content: "<p>Here is some important information for you to know.</p>",
+      },
+      {
+        variantClass: "alert-warning",
+        ariaLabel: "Warning alert",
+        heading: "Warning Alert",
+        content: "<p>Please be aware of this potential issue.</p>",
+      },
+      {
+        variantClass: "alert-error",
+        ariaLabel: "Error alert",
+        heading: "Error Alert",
+        content: "<p>An error occurred. Please try again.</p>",
+      },
+    ];
+
+    return alerts
+      .map(
+        (alertData) => `
+      <div class="mb-4">
+        ${new InpageAlert(alertData).html}
+      </div>
+    `
+      )
+      .join("");
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/bs5/pageLayout/PaletteShowcase.stories.js

@@ -231,9 +231,6 @@ export const PaletteComparison = {
           <div class="col-md-3">
             <div class="bg-dark p-2 text-center rounded text-white">.bg-dark</div>
           </div>
-          <div class="col-md-3">
-            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
-          </div>
           <div class="col-md-3">
             <div class="bg-default-shade p-2 text-center rounded">.bg-default-shade</div>
           </div>
@@ -243,6 +240,10 @@ export const PaletteComparison = {
           <div class="col-md-3">
             <div class="bg-light-alt-shade p-2 text-center rounded">.bg-light-alt-shade</div>
           </div>
+          <div class="col-md-3">
+            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
+          </div>
+
         </div>
       </div>
     `,

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html  
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SearchInput > Renders as expected 1`] = `
 "<!-- 
@@ -6,32 +6,32 @@ exports[`SearchInput > Renders as expected 1`] = `
 -->
 <div class="qld-search-input ">
     <input id="search" name="query" class="form-control" type="text" autocomplete="off"
-        aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  />
+        aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  placeholder="" />
     <button class="btn btn-primary" type="submit" id="search-button">
         <span class="btn-icon"></span>
         <span class="btn-label">Search</span>
     </button>
-    <div class="suggestions suggestions__group d-none default">
+    
+    <div class="suggestions suggestions__group default">
             <div class="default-suggestions">
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">Popular</strong>
                     <ul>
-                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave now</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
-                            <li><a href="/queenslanders" class="view-more">View more</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave now</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
+                            <li><a tabindex="0" href="/queenslanders" class="view-more">View more</a></li>
                     </ul>
                 </div>
-
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">Collection</strong>
                     <ul>
-                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
-                            <li><a href="/queenslanders" class="view-more">View all</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                            <li><a tabindex="0" href="/queenslanders" class="view-more">View all</a></li>
                     </ul>
                 </div>
             </div>

package/src/components/bs5/searchInput/search.functions.js

@@ -1,5 +1,3 @@
-import { createPopper } from "@popperjs/core";
-
 /**
  * Fetches data from the provided URL.
  *
@@ -28,31 +26,26 @@ async function fetchData(url, type) {
  * @param {HTMLFormElement} form - The form element.
  * @returns {void}
  */
-export function selectSuggestion(value, form) {
+export function selectDynamicSuggestion(value, form) {
   const searchInput = form.querySelector(".qld-search-input input");
   const suggestions = form.querySelector(".suggestions");
 
   if (searchInput && suggestions) {
     searchInput.value = value.trim();
-    // suggestions.classList.add("d-none");
-
-    // Retrieve additional params
-    const collection =
-      searchInput.getAttribute("data-collection") || "qgov~sp-search";
-    const profile = searchInput.getAttribute("data-profile") || "qld";
-    const numRanks = searchInput.getAttribute("data-numranks") || "10";
-    const tiers = searchInput.getAttribute("data-tiers") || "off";
 
     // Form action
     const actionUrl = form.getAttribute("action");
 
+    //data-* attributes on search input field
+    const atts = searchInput ? searchInput.dataset : null;
+
     // Construct the URL with proper parameters
     const params = new URLSearchParams({
       query: value.trim(),
-      collection: collection,
-      profile: profile,
-      num_ranks: numRanks,
-      tiers: tiers,
+      collection: atts.collection || "qgov~sp-search",
+      profile: atts.profile || "qld",
+      num_ranks: atts.numRanks || "10",
+      tiers: atts.tiers || "off",
     });
 
     const searchUrl = `${actionUrl}?${params.toString()}`;
@@ -81,11 +74,10 @@ export async function showSuggestions(value = "", isDefault = false, form) {
   );
 
   if (!suggestions || !searchInput) {
-    console.warn("Required suggestions elements not found.");
     return;
   }
 
-  // Hide/show default suggestions
+  // Hide/show default suggestions, and return early
   if (isDefault) {
     if (defaultSuggestionsContainer) {
       defaultSuggestionsContainer.classList.remove("d-none");
@@ -94,13 +86,10 @@ export async function showSuggestions(value = "", isDefault = false, form) {
       dynamicSuggestionsContainer.innerHTML = "";
       dynamicSuggestionsContainer.classList.add("d-none");
     }
-    createPopper(searchInput, suggestions, {
-      placement: "bottom-start",
-    });
-    suggestions.classList.remove("d-none");
     return;
   }
 
+  // If input is empty, hide dynamic suggestions and return early
   if (dynamicSuggestionsContainer) {
     if (value.length === 0) {
       dynamicSuggestionsContainer.innerHTML = "";
@@ -109,22 +98,27 @@ export async function showSuggestions(value = "", isDefault = false, form) {
     }
   }
 
-  if (defaultSuggestionsContainer) {
-    defaultSuggestionsContainer.classList.add("d-none");
-  }
+  // Script continues...dynamic suggestions is true and value.length > 0
+  defaultSuggestionsContainer?.classList.add("d-none");
+
+  //data-* attributes on search input field
+  const atts = searchInput ? searchInput.dataset : null;
 
   // Fetch dynamic suggestions if available
   if (dynamicSuggestionsContainer) {
-    const suggestUrl = searchInput.getAttribute("data-suggestions");
+    const suggestUrl = atts.suggestions;
+
     if (suggestUrl) {
-      const collection =
-        searchInput.getAttribute("data-collection") || "qgov~sp-search";
-      const profile = searchInput.getAttribute("data-profile") || "qld";
+      const collection = atts.collection || "qgov~sp-search";
+      const profile = atts.profile || "qld";
+
+      //Fetch data from suggestions API
       const fetchedSuggestions = await fetchData(
         `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
         "suggestions",
       );
 
+      //Rended a suggestions list
       if (fetchedSuggestions.length > 0) {
         dynamicSuggestionsContainer.innerHTML = `
         <div class="suggestions-category">
@@ -135,34 +129,35 @@ export async function showSuggestions(value = "", isDefault = false, form) {
                 new RegExp(`(${value})`, "gi"),
                 "<strong>$1</strong>",
               );
-              return `<li><a href="#">${highlightedText}</a></li>`;
+              return `<li><a tabindex="0" href="#">${highlightedText}</a></li>`;
             })
             .join("")}</ul>
         </div>`;
+
         dynamicSuggestionsContainer.classList.remove("d-none");
-        createPopper(searchInput, suggestions, {
-          placement: "bottom-start",
-        });
-        suggestions.classList.remove("d-none");
-
-        // Attach click event listeners to each suggestion item
-        form.querySelectorAll(".suggestions li").forEach((item) => {
-          item.addEventListener("click", () =>
-            selectSuggestion(item.innerText, form),
-          );
-        });
+
+        // Bind an event listener to suggestions container
+        form
+          .querySelector(".suggestions .dynamic-suggestions")
+          .addEventListener("click", (event) => {
+            let linkItem = event.target.closest("a");
+            if (linkItem) {
+              event.preventDefault();
+              selectDynamicSuggestion(linkItem.innerText, form);
+            }
+          });
       } else {
         dynamicSuggestionsContainer.innerHTML = "";
         dynamicSuggestionsContainer.classList.add("d-none");
-        suggestions.classList.add("d-none");
       }
     }
 
-    const resultsUrl = searchInput.getAttribute("data-results-url");
+    const resultsUrl = atts.resultsUrl; //data-results-url;
     if (resultsUrl) {
-      const collection =
-        searchInput.getAttribute("data-collection") || "qgov~sp-search";
-      const profile = searchInput.getAttribute("data-profile") || "qld";
+      const collection = atts.collection || "qgov~sp-search";
+      const profile = atts.profile || "qld";
+
+      // Fetch related services from services API
       const fetchedServices = await fetchData(
         `${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`,
         "services",
@@ -178,11 +173,14 @@ export async function showSuggestions(value = "", isDefault = false, form) {
         // Build the services HTML safely
         const servicesItems = fetchedServices.response.resultPacket.results
           .slice(0, 4)
-          .map((item) => `<li><a href="${item.liveUrl}">${item.title}</a></li>`)
+          .map(
+            (item) =>
+              `<li><a tabindex="0" href="${item.liveUrl}">${item.title}</a></li>`,
+          )
           .join("");
 
         const viewMoreItem = viewMoreUrl
-          ? `<li><a href="${viewMoreUrl}" class="view-more">View more</a></li>`
+          ? `<li><a tabindex="0" href="${viewMoreUrl}" class="view-more">View more</a></li>`
           : "";
 
         dynamicSuggestionsContainer.innerHTML += `
@@ -190,18 +188,19 @@ export async function showSuggestions(value = "", isDefault = false, form) {
           <strong class="suggestions-category-label d-block">Related services</strong>
           <ul>${servicesItems}${viewMoreItem}</ul>
         </div>`;
+
         dynamicSuggestionsContainer.classList.remove("d-none");
-        createPopper(searchInput, suggestions, {
-          placement: "bottom-start",
-        });
-        suggestions.classList.remove("d-none");
-
-        // Attach click event listeners to each suggestion item
-        form.querySelectorAll(".suggestions li").forEach((item) => {
-          item.addEventListener("click", () =>
-            selectSuggestion(item.innerText, form),
-          );
-        });
+
+        // Attach click event listeners to each SERVICE item in list
+        form
+          .querySelector(".suggestions .dynamic-suggestions")
+          .addEventListener("click", (event) => {
+            let linkItem = event.target.closest("a");
+            if (linkItem) {
+              event.preventDefault();
+              selectDynamicSuggestion(linkItem.innerText, form);
+            }
+          });
       }
     }
   }
@@ -216,19 +215,14 @@ export async function showSuggestions(value = "", isDefault = false, form) {
  */
 export function submitSearchForm(query = "", form) {
   const searchInput = form.querySelector(".qld-search-input input");
-
-  const collection =
-    searchInput.getAttribute("data-collection") || "qgov~sp-search";
-  const profile = searchInput.getAttribute("data-profile") || "qld";
-  const numRanks = searchInput.getAttribute("data-numranks") || "10";
-  const tiers = searchInput.getAttribute("data-tiers") || "off";
+  const atts = searchInput ? searchInput.dataset : null;
 
   const params = new URLSearchParams({
     query: query.trim(),
-    collection: collection,
-    profile: profile,
-    num_ranks: numRanks,
-    tiers: tiers,
+    collection: atts.collection || "qgov~sp-search",
+    profile: atts.profile || "qld",
+    num_ranks: atts.numRanks || "10",
+    tiers: atts.tiers || "off",
   });
 
   const searchUrl = `${form.getAttribute("action")}?${params.toString()}`;
@@ -236,4 +230,5 @@ export function submitSearchForm(query = "", form) {
 }
 
 // Attach the function to the window object to make it globally accessible
-window.selectSuggestion = (value, form) => selectSuggestion(value, form);
+window.selectDynamicSuggestion = (value, form) =>
+  selectDynamicSuggestion(value, form);

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

@@ -6,6 +6,7 @@
   "buttonType": "submit",
   "buttonLabel": "Search",
   "ariaLabel": "Search website",
+  "placeholder": "",
   "tags": {
     "collection": "qgov~sp-search",
     "profile": "qld",

package/src/components/bs5/searchInput/searchInput.hbs

@@ -3,38 +3,40 @@
 -->
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
-        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
     <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
         <span class="btn-icon"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
-    <div class="suggestions suggestions__group d-none default">
+    
+    <div class="suggestions suggestions__group default">
         {{#if hasDefaultSuggestions}}
             <div class="default-suggestions">
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.popularServices}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.popularServicesLink}}
-                            <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
-
+                {{#if defaultSuggestions.categories}}
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
-                            <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
+                {{/if}}
             </div>
         {{/if}}
         {{#if hasDynamicSuggestions}}