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

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;
 

package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue

@@ -4,21 +4,43 @@
     <row style="column-gap: 16px">
       <!-- Keyword Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="keyword-search">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchRem" placeholder="Removalist" class="search" />
+        <input
+          id="keyword-search"
+          type="text"
+          v-model="searchRem"
+          placeholder="Removalist"
+          aria-label="Search by keyword (typed keyword automatically filters below results)"
+          class="search"
+        />
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="suburb-search">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchSub" placeholder="Location" class="search" />
+        <input
+          id="suburb-search"
+          type="text"
+          v-model="searchSub"
+          placeholder="Location"
+          aria-label="Search by suburb (typed suburb automatically filters below results)"
+          class="search"
+        />
       </column>
       <!-- Other Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="filterType"> Filter Type </label>
-        <select id="filterType" v-model="searchClass" name="filter" class="selectClass">
+        <label class="col-form-label visually-hidden" for="filterType">
+          Filter Type
+        </label>
+        <select
+          id="filterType"
+          v-model="searchClass"
+          name="filter"
+          class="selectClass"
+          aria-label="Filter Type"
+        >
           <option class="placeholder" value="" disabled hidden selected>
             Service class
           </option>
@@ -37,13 +59,15 @@
         </select>
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory">
+        <label class="col-form-label visually-hidden" for="search-services">
           Search by suburb (typed suburb automatically filters below results)
         </label>
         <input
+          id="search-services"
           type="text"
           v-model="searchServices"
           placeholder="Services"
+          aria-label="Search by suburb (typed suburb automatically filters below results)"
           class="search"
         />
       </column>
@@ -77,14 +101,14 @@
 </template>
 
 <script>
-import arRecord from "./SingleRecord/index.vue";
-import searchIcon from "./../../../../../assets/icons/search.svg?url";
-import SectionGroup from "../../../../Containers/SectionGroup/index.vue";
-import FilterButton from "../../../../Common/FilterButton/index.vue"; //Reset
-import Pagination from "../../HSCP/Records/pagination.vue";
+import arRecord from './SingleRecord/index.vue'
+import searchIcon from './../../../../../assets/icons/search.svg?url'
+import SectionGroup from '../../../../Containers/SectionGroup/index.vue'
+import FilterButton from '../../../../Common/FilterButton/index.vue' //Reset
+import Pagination from '../../HSCP/Records/pagination.vue'
 
 export default {
-  name: "Asbestos",
+  name: 'Asbestos',
   components: {
     arRecord,
     SectionGroup,
@@ -93,16 +117,16 @@ export default {
   },
   data() {
     return {
-      searchRem: "",
-      searchSub: "",
-      searchClass: "",
-      searchServices: "",
+      searchRem: '',
+      searchSub: '',
+      searchClass: '',
+      searchServices: '',
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
       hideReset: true,
-    };
+    }
   },
   props: {
     items: {
@@ -113,33 +137,37 @@ export default {
 
   computed: {
     filteredRecords() {
-      let results = this.flatRecords;
+      let results = this.flatRecords
 
       if (this.searchRem.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.title.toLowerCase().includes(this.searchRem.toLowerCase())
-        );
+          item.title.toLowerCase().includes(this.searchRem.toLowerCase()),
+        )
       }
       if (this.searchSub.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase())
-        );
+          item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase()),
+        )
       }
       if (this.searchClass.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.serviceCategory.toLowerCase().includes(this.searchClass.toLowerCase())
-        );
+          item.serviceCategory
+            .toLowerCase()
+            .includes(this.searchClass.toLowerCase()),
+        )
       }
       if (this.searchServices.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.services.toLowerCase().includes(this.searchServices.toLowerCase())
-        );
+          item.services
+            .toLowerCase()
+            .includes(this.searchServices.toLowerCase()),
+        )
       }
-      this.filteredItems = results;
+      this.filteredItems = results
 
       if (
         this.searchRem.length ||
@@ -147,102 +175,107 @@ export default {
         this.searchClass.length ||
         this.searchServices.length
       ) {
-        this.pageChanged(1);
+        this.pageChanged(1)
       }
 
-      return results;
+      return results
     },
 
     flatRecords() {
-      let flatRecords = [];
+      let flatRecords = []
       const sortedItems = this.items.sort((a, b) =>
-        a.ResourceName.localeCompare(b.ResourceName, "en", { sensitivity: "base" })
-      );
+        a.ResourceName.localeCompare(b.ResourceName, 'en', {
+          sensitivity: 'base',
+        }),
+      )
 
       sortedItems.forEach((record) => {
         flatRecords.push({
-          type: "ar",
+          type: 'ar',
           title: record.ResourceName,
           fullAddress: record.AddressLine2,
           workPhone: record.Phone,
           mobilePhone: record.CompanyMobile,
           email: record.CompanyEmailDisp,
           website: this.formatWebsite(record.CompanyWebURLDisp),
-          contact1: this.returnContact(record.ContactFirstName, record.ContactLastName),
+          contact1: this.returnContact(
+            record.ContactFirstName,
+            record.ContactLastName,
+          ),
           email1: record.ContactEmail,
           phone1: record.ContactPhoneDisp,
           mobile1: record.ContactMobileDisp,
-          services: record.ServicesAll.replace(/,$/, ""),
+          services: record.ServicesAll.replace(/,$/, ''),
           serviceCategory: record.ServiceAll,
-        });
-      });
-      return flatRecords;
+        })
+      })
+      return flatRecords
     },
     resultChunks() {
-      return this.chunkify(this.filteredItems || this.items, this.perPage);
+      return this.chunkify(this.filteredItems || this.items, this.perPage)
     },
     noRecordsFound() {
-      return this.resultChunks[0].length === 0;
+      return this.resultChunks[0].length === 0
     },
     totalResults() {
-      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0;
+      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0
     },
     totalPages() {
-      return this.resultChunks.length;
+      return this.resultChunks.length
     },
     pageResultCount() {
-      return this.resultChunks[this.page].length;
+      return this.resultChunks[this.page].length
     },
   },
 
   methods: {
     formatWebsite(url) {
-      let startUrl = url.slice(0, 3);
-      let returnUrl = url;
-      if (startUrl.toLowerCase() === "www") {
-        returnUrl = "https://" + url;
+      let startUrl = url.slice(0, 3)
+      let returnUrl = url
+      if (startUrl.toLowerCase() === 'www') {
+        returnUrl = 'https://' + url
       }
       if (
-        startUrl.toLowerCase() !== "htt" &&
-        startUrl.toLowerCase() !== "www" &&
-        url !== ""
+        startUrl.toLowerCase() !== 'htt' &&
+        startUrl.toLowerCase() !== 'www' &&
+        url !== ''
       ) {
-        returnUrl = "https://www." + url;
+        returnUrl = 'https://www.' + url
       }
-      return returnUrl;
+      return returnUrl
     },
 
     returnContact(firstN, lastN) {
-      let retContact = [firstN, lastN].filter(Boolean).join(" ");
-      return retContact;
+      let retContact = [firstN, lastN].filter(Boolean).join(' ')
+      return retContact
     },
 
     chunkify(arr, n) {
       if (arr) {
         const chunked = arr.reduce(
           (chunk, val) => {
-            if (chunk[chunk.length - 1].length === n) chunk.push([]);
-            chunk[chunk.length - 1].push(val);
-            return chunk;
+            if (chunk[chunk.length - 1].length === n) chunk.push([])
+            chunk[chunk.length - 1].push(val)
+            return chunk
           },
-          [[]]
-        );
-        return chunked;
+          [[]],
+        )
+        return chunked
       }
-      return [[]];
+      return [[]]
     },
 
     reset() {
-      this.collapseOrgs("No");
-      this.hideReset = true;
-      this.searchRem = "";
-      this.searchClass = "";
-      this.searchSub = "";
-      this.searchServices = "";
+      this.collapseOrgs('No')
+      this.hideReset = true
+      this.searchRem = ''
+      this.searchClass = ''
+      this.searchSub = ''
+      this.searchServices = ''
     },
 
     pageChanged(ev) {
-      this.page = ev - 1;
+      this.page = ev - 1
 
       if (
         this.searchRem.length ||
@@ -254,41 +287,41 @@ export default {
         // don't collapseOrgs
       } else {
         // set focus to top element - used instead of scrollTo
-        this.collapseOrgs("Yes");
+        this.collapseOrgs('Yes')
       }
     },
 
     collapseOrgs(focusLink) {
       // called by pageChanged and reset.  pageChanged called by filter and by pagination links
-      const aLinks = document.getElementsByName("titleLink");
+      const aLinks = document.getElementsByName('titleLink')
       // Convert nodelist to array
-      let linksArr = Array.from(aLinks);
+      let linksArr = Array.from(aLinks)
       if (Array.isArray(linksArr) && linksArr.length > 0) {
         linksArr
-          .filter((link) => link.getAttribute("aria-expanded") === "true")
-          .forEach((link) => link.click());
+          .filter((link) => link.getAttribute('aria-expanded') === 'true')
+          .forEach((link) => link.click())
 
-        if (focusLink === "Yes") {
-          linksArr[0].focus();
+        if (focusLink === 'Yes') {
+          linksArr[0].focus()
         }
       }
     },
 
     toTitleCase(strVal) {
-      let retVal = strVal.trim();
+      let retVal = strVal.trim()
 
-      const firstChar = retVal.charAt(0);
-      const firstCharU = firstChar.toUpperCase();
-      const remChar = retVal.slice(1);
+      const firstChar = retVal.charAt(0)
+      const firstCharU = firstChar.toUpperCase()
+      const remChar = retVal.slice(1)
 
-      retVal = firstCharU + remChar;
+      retVal = firstCharU + remChar
 
-      return retVal;
+      return retVal
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "../../HSCP/styles.scss";
+@import '../../HSCP/styles.scss';
 </style>