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

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

@@ -4,31 +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="search-keyword">
           Search by keyword (typed keyword automatically filters below results)
         </label>
         <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
+          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">
-        <label class="visually-hidden" for="filterType"> Filter Type </label>
-        <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
+        <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>
@@ -43,7 +55,9 @@
           name="filter1"
           class="selectClass"
         >
-          <option class="placeholder" value="" disabled hidden selected>Theme</option>
+          <option class="placeholder" value="" disabled hidden selected>
+            Theme
+          </option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
             {{ opt }}
           </option>
@@ -79,14 +93,14 @@
 </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 Pagination from "./pagination.vue";
+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 Pagination from './pagination.vue'
 
 export default {
-  name: "HSCP",
+  name: 'HSCP',
   components: {
     hscpRecord,
     SectionGroup,
@@ -95,16 +109,16 @@ export default {
   },
   data() {
     return {
-      searchOrg: "",
-      searchSub: "",
-      searchCourse: "",
-      searchThemes: "",
+      searchOrg: '',
+      searchSub: '',
+      searchCourse: '',
+      searchThemes: '',
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
       hideReset: true,
-    };
+    }
   },
   props: {
     items: {
@@ -116,62 +130,64 @@ export default {
   computed: {
     themeOptions() {
       // Concatenate all themes, remove duplicates, sort and use for a drop-down list
-      let allThemes = this.flatRecords.map((a) => a.themes);
-      allThemes = allThemes.join(",");
-      allThemes = allThemes.trim();
-      allThemes = allThemes.split(",");
+      let allThemes = this.flatRecords.map((a) => a.themes)
+      allThemes = allThemes.join(',')
+      allThemes = allThemes.trim()
+      allThemes = allThemes.split(',')
       // Change all themes to title case
       for (var i = 0; i < allThemes.length; i++) {
-        let newVal = this.toTitleCase(allThemes[i]);
-        allThemes[i] = newVal;
+        let newVal = this.toTitleCase(allThemes[i])
+        allThemes[i] = newVal
       }
       // Remove duplicates
-      let s = new Set(allThemes);
-      allThemes = [...s];
+      let s = new Set(allThemes)
+      allThemes = [...s]
 
       // 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;
-      });
-      allThemes = sortedThemes;
+        return 0
+      })
+      allThemes = sortedThemes
 
-      return allThemes;
+      return allThemes
     },
 
     filteredRecords() {
-      let results = this.flatRecords;
+      let results = this.flatRecords
 
       if (this.searchOrg.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.title.toLowerCase().includes(this.searchOrg.toLowerCase())
-        );
+          item.title.toLowerCase().includes(this.searchOrg.toLowerCase()),
+        )
       }
       if (this.searchSub.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase())
-        );
+          item.trainingVenues
+            .toLowerCase()
+            .includes(this.searchSub.toLowerCase()),
+        )
       }
       if (this.searchCourse.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.courses.toLowerCase().includes(this.searchCourse.toLowerCase())
-        );
+          item.courses.toLowerCase().includes(this.searchCourse.toLowerCase()),
+        )
       }
       if (this.searchThemes.length) {
-        this.hideReset = false;
+        this.hideReset = false
         results = results.filter((item) =>
-          item.themes.toLowerCase().includes(this.searchThemes.toLowerCase())
-        );
+          item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()),
+        )
       }
-      this.filteredItems = results;
+      this.filteredItems = results
 
       if (
         this.searchOrg.length ||
@@ -179,26 +195,26 @@ export default {
         this.searchCourse.length ||
         this.searchThemes.length
       ) {
-        this.pageChanged(1);
+        this.pageChanged(1)
       }
 
-      return results;
+      return results
     },
 
     flatRecords() {
-      let 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) => {
         flatRecords.push({
-          type: "hscp",
+          type: 'hscp',
           title: record.Organisation,
           fullAddress: record.Main_office_address,
           orgAcronym: record.Organisation_acronym,
@@ -212,73 +228,73 @@ export default {
           contact2: record.Contact_2_Name,
           email2: record.Contact_2_Email,
           phone2: record.Contact_2_Phone,
-          courses: record.Training_courses.replace(/,$/, ""),
-          themes: record.Themes.replace(/,$/, ""),
+          courses: record.Training_courses.replace(/,$/, ''),
+          themes: record.Themes.replace(/,$/, ''),
           trainingVenues: record.Training_venues,
-        });
-      });
-      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
     },
 
     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.searchOrg = "";
-      this.searchCourse = "";
-      this.searchSub = "";
-      this.searchThemes = "";
+      this.collapseOrgs('No')
+      this.hideReset = true
+      this.searchOrg = ''
+      this.searchCourse = ''
+      this.searchSub = ''
+      this.searchThemes = ''
     },
 
     pageChanged(ev) {
-      this.page = ev - 1;
+      this.page = ev - 1
 
       if (
         this.searchOrg.length ||
@@ -290,41 +306,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 "../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/TabulatedData/index.vue

@@ -17,6 +17,12 @@
         :responsive="!isFluid"
         :stacked="!isFluid ? 'sm' : false"
         :must-sort="true"
+        :tbody-tr-attrs="
+          () => ({
+            role: 'button',
+            tabindex: 0,
+          })
+        "
       >
         <template #head()="data">
           <span

package/src/components/SubComponents/ResourceGroup/cardbody.vue

@@ -17,11 +17,13 @@
                 :aria-expanded="
                   isMobile || isResourceGroup
                     ? cardMenuIsOpen
-                      ? 'true'
-                      : 'false'
+                      ? true
+                      : false
                     : false
                 "
                 role="button"
+                :aria-controls="`menu-panel-${card.ItemId}`"
+                tabindex="0"
                 class="card_item-menu__title--link nolink"
               >
                 <img
@@ -54,7 +56,10 @@
                 >
                   {{ card.fileTypeTitle }}
                   <column class="card_item__meta card_item__meta--filetype">
-                    <rich-text :content="card.fileType" :without-container="true" />
+                    <rich-text
+                      :content="card.fileType"
+                      :without-container="true"
+                    />
                   </column>
                 </li>
                 <li
@@ -66,7 +71,10 @@
                 >
                   {{ card.fileSizeTitle }}
                   <column class="card_item__meta card_item__meta--filesize">
-                    <rich-text :content="card.fileSize" :without-container="true" />
+                    <rich-text
+                      :content="card.fileSize"
+                      :without-container="true"
+                    />
                   </column>
                 </li>
                 <li
@@ -78,7 +86,10 @@
                 >
                   {{ card.fileLengthTitle }}
                   <column class="card_item__meta card_item__meta--filelength">
-                    <rich-text :content="card.fileLength" :without-container="true" />
+                    <rich-text
+                      :content="card.fileLength"
+                      :without-container="true"
+                    />
                   </column>
                 </li>
                 <li
@@ -90,7 +101,10 @@
                 >
                   {{ card.readingLevelTitle }}
                   <column class="card_item__meta card_item__meta--readinglevel">
-                    <rich-text :content="card.readingLevel" :without-container="true" />
+                    <rich-text
+                      :content="card.readingLevel"
+                      :without-container="true"
+                    />
                   </column>
                 </li>
               </ul>
@@ -107,13 +121,13 @@
 </template>
 
 <script>
-import Row from "../../Containers/Row/index.vue";
-import Column from "../../Containers/Column/index.vue";
-import CardFooter from "./cardfooter.vue";
-import documentsvg from "../../../assets/icons/document.svg?url";
-import CaretUp from "../../../assets/icons/caret-up.svg?url";
-import CaretDown from "../../../assets/icons/caret-down.svg?url";
-import RichText from "../../Paragraphs/RichText/index.vue";
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import CardFooter from './cardfooter.vue'
+import documentsvg from '../../../assets/icons/document.svg?url'
+import CaretUp from '../../../assets/icons/caret-up.svg?url'
+import CaretDown from '../../../assets/icons/caret-down.svg?url'
+import RichText from '../../Paragraphs/RichText/index.vue'
 
 export default {
   components: {
@@ -129,7 +143,7 @@ export default {
     },
     resourceType: {
       type: String,
-      default: "resource-group",
+      default: 'resource-group',
     },
   },
   data() {
@@ -141,35 +155,35 @@ export default {
       CaretUp,
       CaretDown,
       windowWidth: 0,
-    };
+    }
   },
   computed: {
     isMobile() {
-      return this.windowWidth < 768;
+      return this.windowWidth < 768
     },
     isResourceGroup() {
-      return this.cardResourseType === "resource-group" ? true : false;
+      return this.cardResourseType === 'resource-group' ? true : false
     },
   },
   mounted() {
     this.$nextTick(() => {
-      window.addEventListener("resize", this.onResize);
-    });
-    this.onResize();
+      window.addEventListener('resize', this.onResize)
+    })
+    this.onResize()
   },
   beforeDestroy() {
-    window.removeEventListener("resize", this.onResize);
+    window.removeEventListener('resize', this.onResize)
   },
   methods: {
     handleMenuItemClick(menuItem) {
       if (this.isMobile || this.isResourceGroup) {
         for (let i = 0; i < menuItem.length; i++) {
-          let newMenuItem = menuItem[i];
+          let newMenuItem = menuItem[i]
 
-          this.cardMenuIsOpen = !this.cardMenuIsOpen;
+          this.cardMenuIsOpen = !this.cardMenuIsOpen
 
-          newMenuItem.isOpen = false;
-          menuItem.splice(i, 1, newMenuItem);
+          newMenuItem.isOpen = false
+          menuItem.splice(i, 1, newMenuItem)
         }
       }
     },
@@ -177,33 +191,33 @@ export default {
       if (this.isMobile || this.isResourceGroup) {
         if (event.keyCode === 32 || event.keyCode === 13) {
           for (let i = 0; i < menuItem.length; i++) {
-            let newMenuItem = menuItem[i];
-            this.cardMenuIsOpen = !this.cardMenuIsOpen;
-            newMenuItem.isOpen = false;
-            menuItem.splice(i, 1, newMenuItem);
+            let newMenuItem = menuItem[i]
+            this.cardMenuIsOpen = !this.cardMenuIsOpen
+            newMenuItem.isOpen = false
+            menuItem.splice(i, 1, newMenuItem)
           }
         }
       }
     },
     onResize() {
-      this.windowWidth = window.innerWidth;
-      let titles = document.getElementsByClassName("card_item-menu__title");
+      this.windowWidth = window.innerWidth
+      let titles = document.getElementsByClassName('card_item-menu__title')
       if (Array.isArray(titles)) {
         if (this.isMobile || this.isResourceGroup) {
           titles.forEach((t) => {
-            t.setAttribute("tabIndex", "0");
-          });
+            t.setAttribute('tabIndex', '0')
+          })
         } else {
           titles.forEach((t) => {
-            t.removeAttribute("tabIndex");
-          });
+            t.removeAttribute('tabIndex')
+          })
         }
       }
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "../../../includes/scss/all";
-@import "./styles";
+@import '../../../includes/scss/all';
+@import './styles';
 </style>