@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

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

@@ -1,31 +1,63 @@
 <template>
   <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
-    <row style="column-gap: 16px;">
+    <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="search-keyword">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchOrg" placeholder="Organisation" class="search">
+        <input
+          id="search-keyword"
+          type="text"
+          v-model="searchOrg"
+          placeholder="Organisation"
+          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="search-suburb">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchSub" placeholder="Training location" class="search">
+        <input
+          id="search-suburb"
+          type="text"
+          v-model="searchSub"
+          placeholder="Training 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">
-        <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Course type</option>
+        <label class="col-form-label visually-hidden" for="filterType">
+          Filter Type
+        </label>
+        <select
+          id="filterType"
+          v-model="searchCourse"
+          name="filter"
+          aria-label="Filter Type"
+          class="selectClass"
+        >
+          <option class="placeholder" value="" disabled hidden selected>
+            Course type
+          </option>
           <option value="HSR Initial">HSR Initial</option>
           <option value="HSR Refresher">HSR Refresher</option>
         </select>
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Theme</option>
+        <select
+          id="filterTheme"
+          v-model="searchThemes"
+          name="filter1"
+          class="selectClass"
+        >
+          <option class="placeholder" value="" disabled hidden selected>
+            Theme
+          </option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
             {{ opt }}
           </option>
@@ -42,32 +74,29 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="dirRecords" >
-      <template v-for="(item, index) in resultChunks[page]" >
-        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
+    <div class="dirRecords">
+      <template v-for="(item, index) in resultChunks[page]">
+        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item" />
       </template>
     </div>
     <div v-if="filteredRecords.length > 0" align-items="center">
-        <pagination
-          :total-pages="totalPages"
-          :total="totalResults"
-          :per-page="perPage"
-          :current-page="page + 1"
-          @pagechanged="pageChanged($event)"
-        />
-      </div>
+      <pagination
+        :total-pages="totalPages"
+        :total="totalResults"
+        :per-page="perPage"
+        :current-page="page + 1"
+        @pagechanged="pageChanged($event)"
+      />
+    </div>
     <h4 v-if="filteredRecords.length === 0">No records found</h4>
-
   </section-group>
-  
 </template>
 
 <script>
-
 import hscpRecord 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 FilterButton from '../../../../Common/FilterButton/index.vue' //Reset
 import Pagination from './pagination.vue'
 
 export default {
@@ -76,7 +105,7 @@ export default {
     hscpRecord,
     SectionGroup,
     FilterButton,
-    Pagination
+    Pagination,
   },
   data() {
     return {
@@ -88,7 +117,7 @@ export default {
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true
+      hideReset: true,
     }
   },
   props: {
@@ -97,12 +126,11 @@ export default {
       required: true,
     },
   },
- 
-  computed: {
 
+  computed: {
     themeOptions() {
       // Concatenate all themes, remove duplicates, sort and use for a drop-down list
-      let allThemes = this.flatRecords.map(a => a.themes)
+      let allThemes = this.flatRecords.map((a) => a.themes)
       allThemes = allThemes.join(',')
       allThemes = allThemes.trim()
       allThemes = allThemes.split(',')
@@ -118,12 +146,12 @@ export default {
       // Sort the themes
       let sortedThemes = allThemes.sort((a, b) => {
         if (a.trim() < b.trim()) {
-          return -1;
+          return -1
         }
         if (a.trim() > b.trim()) {
-          return 1;
+          return 1
         }
-        return 0;
+        return 0
       })
       allThemes = sortedThemes
 
@@ -132,44 +160,59 @@ export default {
 
     filteredRecords() {
       let results = this.flatRecords
-     
+
       if (this.searchOrg.length) {
         this.hideReset = false
-        results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
+        results = results.filter((item) =>
+          item.title.toLowerCase().includes(this.searchOrg.toLowerCase()),
+        )
       }
       if (this.searchSub.length) {
         this.hideReset = false
-        results = results.filter(item => item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase()))
+        results = results.filter((item) =>
+          item.trainingVenues
+            .toLowerCase()
+            .includes(this.searchSub.toLowerCase()),
+        )
       }
       if (this.searchCourse.length) {
         this.hideReset = false
-        results = results.filter(item => item.courses.toLowerCase().includes(this.searchCourse.toLowerCase()))
+        results = results.filter((item) =>
+          item.courses.toLowerCase().includes(this.searchCourse.toLowerCase()),
+        )
       }
       if (this.searchThemes.length) {
         this.hideReset = false
-        results = results.filter(item => item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()))
+        results = results.filter((item) =>
+          item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()),
+        )
       }
       this.filteredItems = results
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
         this.pageChanged(1)
       }
 
       return results
     },
-  
+
     flatRecords() {
       let flatRecords = []
       const sortedItems = this.items.sort((a, b) => {
         if (a.Organisation < b.Organisation) {
-          return -1;
+          return -1
         }
         if (a.Organisation > b.Organisation) {
-          return 1;
+          return 1
         }
-        return 0;
+        return 0
       })
-     sortedItems.forEach((record) => {
+      sortedItems.forEach((record) => {
         flatRecords.push({
           type: 'hscp',
           title: record.Organisation,
@@ -187,7 +230,7 @@ export default {
           phone2: record.Contact_2_Phone,
           courses: record.Training_courses.replace(/,$/, ''),
           themes: record.Themes.replace(/,$/, ''),
-          trainingVenues: record.Training_venues
+          trainingVenues: record.Training_venues,
         })
       })
       return flatRecords
@@ -206,20 +249,23 @@ export default {
     },
     pageResultCount() {
       return this.resultChunks[this.page].length
-    }
+    },
   },
-  
-  methods: {
 
+  methods: {
     formatWebsite(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 !== '') {
+      }
+      if (
+        startUrl.toLowerCase() !== 'htt' &&
+        startUrl.toLowerCase() !== 'www' &&
+        url !== ''
+      ) {
         returnUrl = 'https://www.' + url
-      } 
+      }
       return returnUrl
     },
 
@@ -231,13 +277,13 @@ export default {
             chunk[chunk.length - 1].push(val)
             return chunk
           },
-          [[]]
+          [[]],
         )
         return chunked
       }
       return [[]]
     },
-    
+
     reset() {
       this.collapseOrgs('No')
       this.hideReset = true
@@ -250,13 +296,18 @@ export default {
     pageChanged(ev) {
       this.page = ev - 1
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-          // don't set focus
-          // don't collapseOrgs
-        } else {
-          // set focus to top element - used instead of scrollTo
-          this.collapseOrgs('Yes')
-        } 
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
+        // don't set focus
+        // don't collapseOrgs
+      } else {
+        // set focus to top element - used instead of scrollTo
+        this.collapseOrgs('Yes')
+      }
     },
 
     collapseOrgs(focusLink) {
@@ -273,11 +324,9 @@ export default {
           linksArr[0].focus()
         }
       }
-
     },
 
     toTitleCase(strVal) {
-
       let retVal = strVal.trim()
 
       const firstChar = retVal.charAt(0)
@@ -288,13 +337,10 @@ export default {
 
       return retVal
     },
-  }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-
-@import '../styles.scss'
-
-
+@import '../styles.scss';
 </style>

package/src/components/Paragraphs/Statistics/index.vue

@@ -1,7 +1,7 @@
 <template>
   <card-grid
     :title="title"
-    :title-tag="headingTag"
+    :title-tag="headingTag || 'h3'"
     :cards="itemList"
     :rtl="rtl"
     :force-md-columns-per-row="columns < 3 ? 3 : columns"
@@ -9,7 +9,7 @@
     class="statistics__grid"
   >
     <template v-slot:cardItem="{ card }">
-      <hr class="statistics__hr" />
+      <hr class="statistics__hr" aria-hidden="true" />
       <card-grid-item
         :card-header-title="card.statistic"
         :header-tag="'div'"
@@ -47,25 +47,25 @@ export default {
   props: {
     title: {
       type: String,
-      default: null
+      default: null,
     },
     headingTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columns: {
       type: Number,
-      default: 3
-    }
-  }
+      default: 3,
+    },
+  },
 }
 </script>
 

package/src/components/Paragraphs/Tabs/index.vue

@@ -13,8 +13,8 @@
       :class="`paragraph--tabs ${workwell ? 'workwell' : ''}`"
     >
       <template v-slot:cardItem>
-        <b-tabs v-model="tabIndex">
-          <b-tab
+        <BTabs v-model:index="tabIndex" card>
+          <BTab
             v-for="(item, index) in items"
             :key="`${index}-${$.uid}`"
             :title="item.title"
@@ -24,8 +24,8 @@
               :content="item.content.value"
               :without-container="true"
             />
-          </b-tab>
-        </b-tabs>
+          </BTab>
+        </BTabs>
       </template>
     </card-grid>
     <container v-else class="pdf-tabs">

package/src/components/Paragraphs/TabulatedData/index.vue

@@ -5,7 +5,7 @@
     :size="'content'"
   >
     <div :class="isFluid ? 'table-scrolled' : ''">
-      <b-table
+      <BTable
         v-if="items"
         :items="items"
         :fields="fields"
@@ -17,11 +17,18 @@
         :responsive="!isFluid"
         :stacked="!isFluid ? 'sm' : false"
         :must-sort="true"
+        :tbody-tr-attrs="
+          () => ({
+            role: 'button',
+            tabindex: 0,
+          })
+        "
       >
         <template #head()="data">
           <span
             class="iconHeader table-active"
             tabindex="0"
+            role="button"
             @keypress.enter="accessSort(data.field)"
             scope="colgroup"
           >
@@ -31,13 +38,13 @@
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
                 :src="CaretUp"
                 alt="image indicating ascending sort"
-                class="iconAsc"
+                class="collapse icon"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
                 :src="CaretDown"
                 alt="image indicating descending sort"
-                class="iconDesc"
+                class="expand icon"
               />
             </span>
           </span>
@@ -45,20 +52,20 @@
         <template #cell()="data">
           <rich-text :content="data.value" />
         </template>
-      </b-table>
+      </BTable>
     </div>
   </section-group>
 </template>
 
 <script>
-import SectionGroup from "./../../Containers/SectionGroup/index.vue";
-import RichText from "../../Paragraphs/RichText/index.vue";
-import { BTable } from "bootstrap-vue-next";
-import CaretUp from "./../../../assets/icons/caret-up.svg?url";
-import CaretDown from "./../../../assets/icons/caret-down.svg?url";
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BTable } from 'bootstrap-vue-next'
+import CaretUp from './../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../assets/icons/caret-down.svg?url'
 
 export default {
-  name: "TabulatedData",
+  name: 'TabulatedData',
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -79,7 +86,7 @@ export default {
     },
     caption: {
       type: String,
-      default: "",
+      default: '',
       required: false,
     },
     sortBy: {
@@ -90,33 +97,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
       //sortDesc: false,
       CaretUp,
       CaretDown,
-    };
+    }
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth;
+      return this.isFixedWidth
     },
   },
   methods: {
     accessSort(fieldVar) {
-      const currentSort = fieldVar.thAttr["aria-sort"];
-      if (currentSort === "ascending") {
-        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
+      const currentSort = fieldVar.thAttr['aria-sort']
+      if (currentSort === 'ascending') {
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import "../../../includes/scss/all";
+  @import '../../../includes/scss/all';
 
   .section-group__block {
     margin-top: -32px;