@worksafevictoria/wcl7.5 1.9.0-beta.14 → 1.9.0-beta.16

package/src/components/Global/AppHeaderNew/styles.scss

@@ -4,7 +4,7 @@
   color: $app-menu-white;
   z-index: 27;
   position: relative;
-  padding: 10px;
+  padding: 0px 10px;
   width: 100%;
   font-size: 14px;
 
@@ -14,7 +14,7 @@
     overflow-y: scroll;
     background: $app-header-background-colour;
     border-radius: 3px;
-    height: 70px;
+    height: 44px;
     padding: 0px 15px;
     display: table;
     width: 100%;
@@ -29,12 +29,17 @@
   .isActiveParent {
     background-color: $app-header-active;
     border: $app-header-active;
+   
 
     > a > span {
-      // border-bottom: 3px solid $app-header-active;
       background-color: $app-header-active;
+      color: $app-header-active-text-colour;
     }
-    }
+
+    :focus {
+        outline: none !important;
+      }
+  }
   .isActiveChild {
     > a {
       background: $app-header-active;
@@ -96,7 +101,7 @@
 
     li {
       display: inline;
-      padding: 0;
+      padding: 12px;
       margin-right: 18px;
 
       @media screen and (max-width: 1065px) and (min-width: 981px) {
@@ -197,7 +202,7 @@
         display: none;
         position: fixed;
         background: $app-menu-black;
-        top: 165px;
+        top: 128px;
         left: 10px;
         right: 10px;
         bottom: 10px;
@@ -208,18 +213,6 @@
           position: relative;
         }
 
-        &__innermore {
-          overflow-x: auto;
-          height: max-content;
-          left: 10px;
-          right: 10px;
-          top: 165px;
-          position: fixed;
-          padding-top: 15px !important;
-          background-color: $app-menu-black !important;
-          border-radius: 3px;
-        }
-
         &__wrap {
           position: relative;
           margin: 0 auto;
@@ -249,9 +242,9 @@
           
           & > span {
             margin-right: 10px;
-            @media screen and (max-width: 1010px) and (min-width: 981px) {
-              margin-right: 5px;
-            }
+            // @media screen and (max-width: 1010px) and (min-width: 981px) {
+            //   margin-right: 5px;
+            // }
           }
         }
       }
@@ -335,21 +328,6 @@
     }
   }
 
-  //
-  // Search Container
-  //
-  .search-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: $app-menu-white;
-    color: $app-header-background-colour;
-    bottom: 0;
-    overflow-y: scroll;
-    z-index: 1;
-  }
-
   .styled-scrollbar {
     overflow-y: scroll;
     white-space: normal !important;
@@ -377,12 +355,6 @@
   }
 }
 
-.more-menu {
-  height: 56px;
-  vertical-align: middle;
-  padding: 0px 10px !important;
-}
-
 .skip-link {
   @include visually-hidden;
   color: $app-menu-black;
@@ -420,10 +392,18 @@
     text-align: right;
     font-weight: bold;
     overflow-y:auto;
+
+    a:focus {
+      border: 1px solid #BABABA !important;
+      border-radius: 8px;
+      outline: none !important;
+    }
   }
+
   a {
     color: black;
     text-decoration: none;
+    padding: 10px;
     
     &.router-link-exact-active {
       span {
@@ -431,6 +411,7 @@
       }
     }
   }
+  
   table {
     display: inline-block;
   }
@@ -587,7 +568,6 @@
   }
 
   &--box {
-    // position: relative;
     display: none;
 
     &.clicked {
@@ -603,10 +583,17 @@
       text-align: left;
       position: fixed;
       z-index: 1000;
+
+      label {
+        margin-bottom: 5px !important;
+      }
+      .last-radio {
+        margin-bottom: 0 !important;
+      }
     }
     label {
       display: block;
-      padding: 6px 0;
+      padding: 10px 0;
 
       input[type='radio'] {
         border: 2px solid #bebebe;
@@ -634,6 +621,23 @@
           }
         }
       }
-    }
+    }  
+  }
+}
+
+.flex-container {
+  margin-left: -5px;
+}
+
+.flex-item {
+  border: 1px solid;
+  border-color: #BABABA;
+  padding: 10px;
+  margin: 7px 5px 5px;
+  border-radius: 8px;
+
+  input[type="radio"] {
+    accent-color: black;
+    margin-right: 5px;
   }
 }

package/src/components/Global/DirectoryFilters/index.vue

@@ -2,19 +2,23 @@
   <div>
     <row v-if="!loading" class="wcl-directory-filters">
       <column v-if="bundle" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory"
+        <!-- Hidden label for screen readers -->
+        <label class="col-form-label visually-hidden" for="search-directory"
           >Search by keyword (Typed keyword automatically filters below
           results)</label
         >
-        <b-form-input
+        <!-- Search Input uses aria-label -->
+        <BFormInput
           id="search-directory"
           v-model="searchQuery"
           class="search"
           autocomplete="off"
           placeholder="Keyword"
           debounce="500"
+          aria-label="Search by keyword (Typed keyword automatically filters below
+          results)"
           :style="`background-image: url(${searchIcon})`"
-        ></b-form-input>
+        ></BFormInput>
       </column>
       <column v-if="bundle === 'isp'" md="4" sm="6">
         <form-address-postcode
@@ -28,7 +32,9 @@
         />
       </column>
       <span class="d-none">{{ filters }}</span>
-      <span class="d-none">{{ filters.taxonomies.map(taxonomy => taxonomy.name).join(', ') }}</span>
+      <span class="d-none">{{
+        filters.taxonomies.map((taxonomy) => taxonomy.name).join(', ')
+      }}</span>
       <column
         :md="!bundle ? 12 : bundle === 'isp' ? 4 : 8"
         :sm="!bundle ? 12 : bundle === 'isp' ? 6 : 12"
@@ -71,38 +77,38 @@ export default {
     SingleTaxonomy,
     FormAddressPostcode,
     FilterButton,
-    BFormInput
+    BFormInput,
   },
   props: {
     filters: {
       type: Object,
-      required: true
+      required: true,
     },
     bundle: {
       type: String,
-      default: ''
+      default: '',
     },
     results: {
       type: Number,
-      required: true
+      required: true,
     },
     isFiltering: {
       type: Boolean,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
       searchQuery: '',
       loading: true,
       hideReset: true,
-      searchIcon
+      searchIcon,
     }
   },
   computed: {
     baseURL() {
       return window ? window.location.origin : ''
-    }
+    },
   },
   watch: {
     searchQuery() {
@@ -112,7 +118,7 @@ export default {
         this.hideReset = false
       }
       this.$emit('onSearch', this.searchQuery)
-    }
+    },
   },
   mounted() {
     // wait for hydration,
@@ -125,9 +131,9 @@ export default {
       const allFiltersUnselected = Object.values(this.$refs).every(
         (taxonomy) => {
           return Object.values(taxonomy[0].selectedFilters).every(
-            (filter) => filter.filter((item) => !item.preselected).length === 0
+            (filter) => filter.filter((item) => !item.preselected).length === 0,
           )
-        }
+        },
       )
       if (allFiltersUnselected && !this.searchQuery) {
         this.hideReset = true
@@ -147,8 +153,8 @@ export default {
       })
       this.searchQuery = ''
       this.$emit('onReset')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -165,7 +171,7 @@ export default {
     background-position: 96% 12px;
     margin-bottom: 16px;
     transition: none;
-    background-image: url('./../../../assets/icons/search.svg')
+    background-image: url('./../../../assets/icons/search.svg');
   }
   &__filterButton {
     display: inline-block;

package/src/components/Global/Strip/index.vue

@@ -12,7 +12,7 @@
       <div
         :role="mini ? 'link' : null"
         :class="type + '-strip__inner-wrap'"
-        :tabindex="mini ? 0 : false"
+        :tabindex="mini ? 0 : -1"
         :style="mini ? 'cursor: pointer;' : false"
         @click="mini ? handleClick() : false"
         @keypress.enter="mini ? handleClick() : false"
@@ -59,16 +59,16 @@
 </template>
 
 <script>
-import exclamationIcon from "../../../assets/icons/Strip/Exclamation triangle fill.svg?url";
-import arrowIcon from "../../../assets/icons/Strip/Arrow right.svg?url";
-import dismissIcon from "../../../assets/icons/Strip/Dismiss.svg?url";
-import infoIcon from "../../../assets/icons/Strip/Info circle fill.svg?url";
-import chevronIcon from "../../../assets/icons/caret-right.svg?url";
-import RichText from "../../Paragraphs/RichText/index.vue";
-import { BAlert } from "bootstrap-vue-next";
+import exclamationIcon from '../../../assets/icons/Strip/Exclamation triangle fill.svg?url'
+import arrowIcon from '../../../assets/icons/Strip/Arrow right.svg?url'
+import dismissIcon from '../../../assets/icons/Strip/Dismiss.svg?url'
+import infoIcon from '../../../assets/icons/Strip/Info circle fill.svg?url'
+import chevronIcon from '../../../assets/icons/caret-right.svg?url'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BAlert } from 'bootstrap-vue-next'
 
 export default {
-  name: "Strip",
+  name: 'Strip',
   components: {
     RichText,
     BAlert,
@@ -80,15 +80,15 @@ export default {
     },
     stripHeading: {
       type: String,
-      default: "",
+      default: '',
     },
     stripContent: {
       type: String,
-      default: "",
+      default: '',
     },
     url: {
       type: String,
-      default: "#",
+      default: '#',
     },
     type: {
       type: String,
@@ -103,7 +103,7 @@ export default {
       default: false,
     },
   },
-  emits: ["update:modelValue", "dismissed"],
+  emits: ['update:modelValue', 'dismissed'],
   data() {
     return {
       dismissibleAlert: this.modelValue,
@@ -112,34 +112,34 @@ export default {
       dismissIcon,
       infoIcon,
       chevronIcon,
-    };
+    }
   },
   watch: {
     modelValue(val) {
-      this.dismissibleAlert = val;
+      this.dismissibleAlert = val
     },
     dismissibleAlert(val) {
       if (val !== this.modelValue) {
-        this.$emit("update:modelValue", val);
+        this.$emit('update:modelValue', val)
       }
     },
   },
   computed: {
     layout() {
-      return this.mini ? "mini" : "full";
+      return this.mini ? 'mini' : 'full'
     },
     themeColor() {
-      return this.type === "alert" ? "red" : "blue";
+      return this.type === 'alert' ? 'red' : 'blue'
     },
     stripTitle() {
-      if (this.mini && this.type === "alert") {
-        return "Safety alert";
-      } else if (this.mini && this.type === "notice") {
-        return "Information";
+      if (this.mini && this.type === 'alert') {
+        return 'Safety alert'
+      } else if (this.mini && this.type === 'notice') {
+        return 'Information'
       } else if (this.stripHeading) {
-        return this.stripHeading;
+        return this.stripHeading
       } else {
-        return "";
+        return ''
       }
     },
   },
@@ -151,18 +151,18 @@ export default {
         link: this.mini ? this.url : false,
         clickedOnPage: this.$route.path,
         globalStrip: false,
-      };
+      }
       if (this.$gtm) {
         this.$gtm.push({
           event: `custom.interaction.${this.type}.click`,
           ...attrs,
-        });
+        })
       }
-      this.$router.push(this.url);
+      this.$router.push(this.url)
     },
     handleDismissed() {
-      this.$emit("update:modelValue", false);
-      this.$emit("dismissed");
+      this.$emit('update:modelValue', false)
+      this.$emit('dismissed')
 
       if (this.$gtm) {
         const attrs = {
@@ -170,19 +170,19 @@ export default {
           label: this.stripHeading,
           clickedOnPage: this.$route.path,
           globalStrip: false,
-        };
+        }
         this.$gtm.push({
           event: `custom.interaction.${this.type}.close`,
           ...attrs,
-        });
+        })
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "../../../includes/scss/all";
+@import '../../../includes/scss/all';
 .red {
   .alert-strip {
     &__inner {
@@ -316,7 +316,7 @@ export default {
         max-width: 794px;
       }
 
-      @include mq("sm") {
+      @include mq('sm') {
         flex-direction: column;
         margin-right: 16px;