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

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

@@ -1,5 +1,6 @@
 import { Navbar } from "./Navbar.js";
 import defaultdata from "./navbar.data.json";
+import { breakpoints } from "../../../js/constants.js";
 
 //Default story
 export default {
@@ -164,7 +165,7 @@ export default {
           }
           
           /* Mobile-only items - hide on desktop with unique class names */
-          @media (min-width: 992px) { 
+          @media (min-width: ${breakpoints.lg}px) { 
             .qgds-mobile-only,
             .qgds-hide-desktop,
             .navbar-nav .qgds-mobile-only,
@@ -504,7 +505,7 @@ export const Default = {
           justify-content: flex-end;
           align-items: center;
         }
-        @media (width <= 992px) {
+        @media (width <= ${breakpoints.lg}px) {
           
           #burgerBtn {
             --nav-header-icon-color: #ffe500;
@@ -533,7 +534,7 @@ export const Default = {
             background-color: var(--nav-header-icon-color, #ffe500);
           }
         }
-        @media (width >= 992px) {
+        @media (width >= ${breakpoints.lg}px) {
           #burgerBtn, #storybook-only-header {
             display: none !important;
           }

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/pagination/pagination.data.json

@@ -12,10 +12,10 @@
   },
 
   "pages": [
-    { "href": "#", "linktext": "1", "customClasses": "" },
-    { "href": "#", "linktext": "2", "customClasses": "active" },
-    { "href": "#", "linktext": "3", "customClasses": "" },
+    { "href": "#", "linktext": "1", "arialabel": "Page 1", "customClasses": "" },
+    { "href": "#", "linktext": "2", "arialabel": "Page 2, current page", "customClasses": "active" },
+    { "href": "#", "linktext": "3", "arialabel": "Page 3", "customClasses": "" },
     { "href": "#", "linktext": "", "customClasses": "more", "more": true },
-    { "href": "#", "linktext": "7", "customClasses": "" }
+    { "href": "#", "linktext": "7", "arialabel": "Page 7", "customClasses": "" }
   ]
 }

package/src/components/bs5/pagination/pagination.hbs

@@ -23,8 +23,13 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
             {{! More button }}
             <span></span>
             {{else}}
-            {{! Page button }}
-            <a class="page-link" href="{{href}}" aria-label="{{arialabel}}">{{ linktext }}</a>
+                {{#ifCond "active" "in" customClasses}}
+                {{! Active page - not a link }}
+                <span class="page-link" aria-current="page" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}, current page{{/if}}">{{ linktext }}</span>
+                {{else}}
+                {{! Page button }}
+                <a class="page-link" href="{{href}}" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}{{/if}}">{{ linktext }}</a>
+                {{/ifCond}}
             {{/if}}
         </li>
 

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

@@ -148,7 +148,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   .next {
     margin-left: 0.25rem;
   }
-  .active a {
+  .active .page-link {
     font-weight: 700;
   }
 

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

@@ -1,48 +1,46 @@
 {
-    "type": "indent-text",
-    "variantClass": "light",
-    "promoImage": "./assets/img/banner-example-3-to-2.jpg",
-    "contentAlignment": "content-left",
-    "icon": "icon-dot-grid",
-    "title": "Title goes here and has a maximum of 65 character limit",
-    "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
-    "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
-    "cta": {
-      "items": [
-        {
-          "url": "#",
-          "id": "https://www.wired.com",
-          "value": "Label",
-          "target": "_blank",
-          "class": [
-              {"small": false}, 
-              {"view-all": false}
-          ]
-        }
-      ]
-    },
-    "btn": {
-      "items": [
-        {
-          "variantClass": "btn-primary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Primary",
-          "href": "https://google.com",
-          "target": "_self"
-        },
-        {
-          "variantClass": "btn-secondary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Secondary",
-          "href": "https://google.com",
-          "target": "_self"
-        }
-      ]
-    }
-  }
+  "type": "indent-text",
+  "variantClass": "light",
+  "promoImage": "./assets/img/banner-example-3-to-2.jpg",
+  "promoImageDescription": "Promotional image",
+  "contentAlignment": "content-left",
+  "icon": "icon-dot-grid",
+  "title": "Title goes here and has a maximum of 65 character limit",
+  "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+  "cta": {
+    "items": [
+      {
+        "url": "#",
+        "id": "https://www.wired.com",
+        "value": "Label",
+        "target": "_blank",
+        "class": [{ "small": false }, { "view-all": false }]
+      }
+    ]
+  },
+  "btn": {
+    "items": [
+      {
+        "variantClass": "btn-primary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Primary",
+        "href": "https://google.com",
+        "target": "_self"
+      },
+      {
+        "variantClass": "btn-secondary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Secondary",
+        "href": "https://google.com",
+        "target": "_self"
+      }
+    ]
+  }
+}

package/src/components/bs5/promotionalPanel/promotionalPanel.hbs

@@ -5,7 +5,7 @@
         {{/ifCond}}>
         <div class="image-panel">
             {{#ifCond type '!=' 'promo'}}
-            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            <img class="promo-panel-image" src="{{promoImage}}" alt="{{isdefined promoImageDescription "Promotional image"}}">
             {{else}}
                 <div class="promo-panel-image"></div>
             {{/ifCond}}

package/src/components/bs5/quickexit/quickexit.scss

@@ -166,7 +166,7 @@
     position: -webkit-sticky;
     position: sticky;
     inset-block-start: 0;
-    z-index: 999;
+    z-index: 500;
     padding-block: 20px;
     padding-inline: 40px;
     .container {

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"  />
-    <button class="btn btn-primary" type="submit" id="search-button">
-        <span class="btn-icon"></span>
+        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" aria-label="Search">
+        <span class="btn-icon" aria-hidden="true"></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,28 @@ 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";
+    // Assign queryValue, and cleanup string before submission
+    let queryValue = value.replace(/\s+/g, " ").trim();
+    searchInput.value = queryValue;
 
     // 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,
+      query: queryValue,
+      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 +76,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 +88,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 +100,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 +131,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.textContent, 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 +175,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 +190,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.textContent, form);
+            }
+          });
       }
     }
   }
@@ -216,19 +217,16 @@ export async function showSuggestions(value = "", isDefault = false, form) {
  */
 export function submitSearchForm(query = "", form) {
   const searchInput = form.querySelector(".qld-search-input input");
+  const atts = searchInput ? searchInput.dataset : null;
 
-  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 queryValue = query.trim().replace(/\s+/g, " ");
 
   const params = new URLSearchParams({
-    query: query.trim(),
-    collection: collection,
-    profile: profile,
-    num_ranks: numRanks,
-    tiers: tiers,
+    query: queryValue,
+    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 +234,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}} />
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}" aria-label="{{ buttonLabel }}">
+        <span class="btn-icon" aria-hidden="true"></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}}