Merge branch 'develop' into dependabot/npm_and_yarn/develop/vite-5.3.5

qld-gov-au · Aug 1, 2024 · 5d444a1 · 5d444a1
2 parents 8b958da + 1524266
commit 5d444a1
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "",
   "repository": {
     "type": "git",
@@ -61,7 +61,7 @@
     "@storybook/test": "^8.2.1",
     "@storybook/theming": "^8.2.1",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.1.0",
+    "@vitejs/plugin-vue": "5.1.1",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.15",
     "chai": "^5.1.1",
@@ -83,7 +83,7 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.32",
     "postcss": "^8.4.40",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",

diff --git a/src/components/bs5/footer/footer_formio.scss b/src/components/bs5/footer/footer_formio.scss
@@ -17,13 +17,18 @@
         }
 
         textarea {
+            border: 2px solid var(--#{$prefix}soft-grey);
+            border-radius: 4px;
+
             &:hover {
-                background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+                background-color: var(--#{$prefix}extra-light-grey);
+                border-color: $qld-textbox-border-color;
             }
             &:focus {
                 outline: 3px solid var(--#{$prefix}light-blue);
                 outline-offset: 2px;
-                background-color: var(--#{$prefix}extra-light-grey);
+                background-color: var(--#{$prefix}white);
+                border: 2px solid var(--#{$prefix}light-grey);
             }
             &.is-valid {
                 outline: none;
@@ -126,25 +131,29 @@
         .formio-modified {
             .form-check-input {
                 outline: none;
-                outline-offset: 0;
+
+                &:focus {
+                    outline: 3px solid var(--#{$prefix}light-blue);
+                    outline-offset: 3px;
+                }
             }
 
             .is-invalid {
                 outline: var(--#{$prefix}formIO-border-notify-invalid) solid var(--#{$prefix}formIO-form-control-border-width);
             }
 
             textarea {
-                outline: none;
                 background-color: var(--#{$prefix}formIO-bg-colour);
-                outline-offset: 0;
 
                 &:hover {
-                    background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+                    background-color: var(--#{$prefix}extra-light-grey);
+                    border-color: $qld-textbox-border-color;
                 }
                 &:focus {
                     outline: 3px solid var(--#{$prefix}light-blue);
                     outline-offset: 2px;
-                    background-color: var(--#{$prefix}extra-light-grey);
+                    background-color: var(--#{$prefix}white);
+                    border: 2px solid var(--#{$prefix}light-grey);
                 }
                 &.is-valid {
                     outline: none;

diff --git a/src/components/bs5/header/header.hbs b/src/components/bs5/header/header.hbs
@@ -182,12 +182,12 @@
                                 <span class="qld__header__cta-link-text">{{{text.value}}}</span>
                                 {{#if dropdown_enabled}}
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__header__cta-link-icon">
-                                        <use href="{{@root.icon-root}}#{{@root.icons.chevron_down}}"></use>
+                                        <use href="{{@root.icon-root}}#{{@root.icons.chevron_down}}" aria-hidden="true"></use>
                                     </svg>
                                 {{/if}}
                             </a>
                             {{#if dropdown_enabled}}
-                            <ul class="dropdown-menu dark" aria-labelledby="dropdown{{id}}" role="list">
+                            <ul class="dropdown-menu dark" role="list">
                                 {{#isType dropdown_options.dropdown_type "list"}}
                                     {{#if dropdown_options.dropdown_config}}
                                         {{#each dropdown_options.dropdown_config.groups}}
@@ -227,7 +227,7 @@
                     class="qld__header__toggle-main-nav qld__main-nav__toggle-search" aria-expanded="false">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                         class="qld__icon qld__icon--lg">
-                        <use class="icon-search" href="{{@root.icon-root}}#{{@root.icons.search-icon}}"
+                        <use class="icon-search" href="{{@root.icon-root}}#{{@root.icons.search-icon}}" aria-hidden="true"
                             style="display: block;"></use>
                         <use class="icon-close" href="{{@root.icon-root}}#{{@root.icons.close-icon}}"
                             style="display: none;"></use>
@@ -237,10 +237,10 @@
                 {{/if}}
                 <button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open"
                     data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Open menu">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                         class="qld__icon qld__icon--lg">
-                        <use href="{{@root.icon-root}}#{{@root.icons.menu-icon}}"></use>
+                        <use href="{{@root.icon-root}}#{{@root.icons.menu-icon}}" aria-hidden="true"></use>
                     </svg>
                     <span class="qld__main-nav__toggle-text">Menu</span>
                 </button>

diff --git a/src/components/bs5/navbar/navbar.functions.js b/src/components/bs5/navbar/navbar.functions.js
@@ -41,6 +41,9 @@ export function initializeNavbar() {
   const dropdownItems = document.querySelectorAll('ul.dropdown-menu');
   const overlay = document.getElementById('overlay');
   const body = document.body;
+  const headerEl = document.querySelector('header');
+  const closeMenuButton = document.querySelector('.navbar__toggle--close');
+  const openMenuButton = document.querySelector('.qld__main-nav__toggle--open');
 
   // Add event listeners to each dropdown item
   if (dropdownItems) {
@@ -66,16 +69,43 @@ export function initializeNavbar() {
   }
 
   if (navbarCollapse) {
-    // Overlay show/hide events
+    // When mobile collapsible-navigation is opened
     navbarCollapse.addEventListener('show.bs.collapse', function () {
       overlay.classList.add('show'); // Show the overlay
       body.style.overflow = 'hidden'; // Prevent background scroll
     });
 
+    // When colapsible navigation is closed
     navbarCollapse.addEventListener('hide.bs.collapse', function () {
       overlay.classList.remove('show'); // Hide the overlay
       body.style.overflow = ''; // Reset body positioning
     });
+
+    // Once mobile nav has been made visible.
+    // Change focus to Close Menu button and hide Header from screenreader.
+    navbarCollapse.addEventListener('shown.bs.collapse', function () {
+      if (closeMenuButton) {
+        closeMenuButton.focus();
+      }
+      if (headerEl) {
+        headerEl.setAttribute('aria-hidden', true);
+      }
+      if (openMenuButton) {
+        openMenuButton.setAttribute('aria-label', 'Close menu');
+      }
+  });
+
+    // Once mobile nav has been hidden.
+    // Change focus back to Open Menu button and unhide Header from screenreader.
+    navbarCollapse.addEventListener('hidden.bs.collapse', function () {
+      if (openMenuButton) {
+        openMenuButton.setAttribute('aria-label', 'Open menu');
+        openMenuButton.focus();
+      }
+      if (headerEl) {
+        headerEl.setAttribute('aria-hidden', false);
+      }
+    });
   }
 
   if (dropdownToggles) {

diff --git a/src/components/bs5/navbar/navbar.hbs b/src/components/bs5/navbar/navbar.hbs
@@ -4,17 +4,21 @@
 <nav id="main-nav" class="navbar navbar-expand-lg" aria-label="Website navigation" role="navigation">
     <div class="container navbar-contain">
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+            {{!-- Header for mobile navigation --}}
             <div class="navbar__header">
                 <h6 class="navbar__heading">Menu</h6>
                 <button aria-controls="main-nav" class="navbar__toggle navbar__toggle--close" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Close navigation">
+                    aria-expanded="false" aria-label="Close menu">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
                         <use href="{{metadata.options.icon-root}}#qld__icon__close"></use>
                     </svg>
                     <span class="navbar__toggle-text">Close</span>
                 </button>
             </div>
+            {{!-- End: Header for mobile navigation --}}
+
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item nav-item-home">
                     <a class="nav-link {{#if metadata.options.home-active}}nav-link-home-active{{/if}}"
@@ -44,7 +48,7 @@
                         </svg>
                     </a>
                     {{#if navigation_items}}
-                    <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu"
+                    <ul id="dropdown-menu" class="dropdown-menu" role="menu"
                         data-bs-popper="none">
                         <div class="row dropdown-menu__inner">
                             {{#if dropdown_options}}
@@ -109,7 +113,7 @@
                         </button>
 
                         {{#if navigation_items}}
-                        <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu"
+                        <ul id="dropdown-menu" class="dropdown-menu" role="menu"
                             data-bs-popper="none">
                             <div class="row dropdown-menu__inner">
                                 {{#if dropdown_options}}
@@ -187,7 +191,7 @@
                             </button>
 
                             {{#if dropdown_enabled}}
-                            <ul id="dropdown-menu-{{id}}" class="dropdown-menu" aria-labelledby="menuDropdown-{{id}}"
+                            <ul id="dropdown-menu-{{id}}" class="dropdown-menu"
                                 role="menu" data-bs-popper="none">
                                 <div class="row dropdown-menu__inner">
                                     {{#if dropdown_options.dropdown_config.groups}}

diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss
@@ -191,6 +191,11 @@
                 }
             }
 
+            &:focus {
+				outline: 3px solid var(--#{$prefix}color-default-color-dark-focus-default);
+				outline-offset: 2px;
+			}
+
             @include media-breakpoint-up(md) {
                 padding: 0.75rem 1rem;
             }
@@ -245,6 +250,7 @@
 
             &--close {
                 background-color: transparent;
+                z-index: 100;
 
                 @include media-breakpoint-up(md) {
                     border-width: 2px

diff --git a/src/components/bs5/video/video.functions.js b/src/components/bs5/video/video.functions.js
@@ -7,13 +7,13 @@
  * @returns {void}
  */
 export function videoEmbedPlay(event) {
-  event.preventDefault()
+  event.preventDefault();
 
   const thumbnail = event.target,
     component = thumbnail.closest(".video"),
     iframe = component.querySelector(".video-embed iframe")
 
-  component.classList.remove("not-ready")
+  component.classList.remove("not-ready");
 
   // Parse iFrame URL and set the 'autoplay' parameter to 1.
   if (!iframe.classList.contains("video-custom")) {
@@ -22,7 +22,7 @@ export function videoEmbedPlay(event) {
     iframe.src = url.toString();
   }
 
-  iframe.focus()
+  iframe.focus();
 
 }
 

diff --git a/src/components/bs5/video/video.hbs b/src/components/bs5/video/video.hbs
@@ -10,15 +10,21 @@
 <section class="video not-ready {{#unless thumbnail}}empty-thumbnail{{/unless}} {{videoSize}}">
     <div class="video-player ratio ratio-{{aspectRatio}}">
 
-        <a href="#" class="video-thumbnail video-controls">
+        <a href="#" class="video-thumbnail video-controls" title="Play Video" 
+            aria-label="Watch video {{#if duration}}- duration {{formatDuration duration "long"}}{{/if}}">
+
             <div class="video-thumbnail-image" style="--thumbnail:url({{thumbnail}})"></div>
 
             <div class="video-nav">
-                <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
-
-            {{#if duration}}
-                <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{duration}}</span></div>
-            {{/if}}
+                <div class="video-watch">
+                    <span class="icon"></span><span>Watch</span>
+                </div>
+
+                {{#if duration}}
+                    <div title="Video duration" class="video-duration">
+                        <span class="icon"></span><span>{{formatDuration duration}}</span>
+                    </div>
+                {{/if}}
             </div>
         </a>