@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

package/src/components/SubComponents/CtaButton/index.vue

@@ -13,6 +13,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="button icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -36,6 +37,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="anchor icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -59,6 +61,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="link icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -66,12 +69,12 @@
 </template>
 
 <script>
-import arrowRight from '../../../assets/icons/arrow-right.svg?component'
-import arrowLeft from '../../../assets/icons/arrow-left.svg?component'
-import icon from './../Icon/index.vue'
+import arrowRight from "../../../assets/icons/arrow-right.svg?component";
+import arrowLeft from "../../../assets/icons/arrow-left.svg?component";
+import icon from "./../Icon/index.vue";
 
 export default {
-  name: 'CtaButton',
+  name: "CtaButton",
   components: {
     arrowRight,
     arrowLeft,
@@ -80,18 +83,18 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: "default",
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
+        ["default", "white", "gray", "workwell", "dark"].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: '',
+      default: "",
     },
     alt: {
       type: String,
-      default: '',
+      default: "",
     },
     rtl: {
       type: Boolean,
@@ -138,15 +141,15 @@ export default {
     },
     focusOutline: {
       type: String,
-      default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+      default: "default",
+      validator: (value) => ["default", "light", "dark"].indexOf(value) >= 0,
     },
   },
   data() {
     return {
       arrowRight,
       arrowLeft,
-    }
+    };
   },
   computed: {
     // var r = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -158,81 +161,81 @@ export default {
     // r.test('/myfolder/test.txt'); // false - relative URL
     // r.test('test'); // false - also relative URL
     isAbsolute() {
-      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
-      return r.test(this.url)
+      let r = new RegExp("^(?:[a-z]+:)?//", "i");
+      return r.test(this.url);
     },
     // Some links come out of Drupal in the format `entity:node/551`
     // As an interim solution, make the link go to `node/551` and it
     // will render correctly. Not ideal as it doesn't forward to the
     // friendly link. Should come out of Drupal with a proper alias.
     linkUriProcessed() {
-      if (this.url?.indexOf('entity:') === 0) {
-        return this.url.slice(7)
-      } else if (this.url?.indexOf('internal:') === 0) {
-        return this.url.slice(9)
+      if (this.url?.indexOf("entity:") === 0) {
+        return this.url.slice(7);
+      } else if (this.url?.indexOf("internal:") === 0) {
+        return this.url.slice(9);
       } else {
-        return this.url
+        return this.url;
       }
     },
     generatedClass() {
-      return `wcl-cta ${this.type} ${this.rtl ? 'rtl' : ''} ${
-        this.workwell ? 'workwell' : ''
-      } ${this.isCentred ? 'text-center' : ''} ${
-        this.textOnly ? 'wcl-cta--text-only' : ''
-      } ${this.stretch ? 'wcl-cta--stretch' : ''} ${
-        this.slim ? 'wcl-cta--slim' : ''
-      } ${'wcl-cta--focus-' + this.focusOutline}`
+      return `wcl-cta ${this.type} ${this.rtl ? "rtl" : ""} ${
+        this.workwell ? "workwell" : ""
+      } ${this.isCentred ? "text-center" : ""} ${
+        this.textOnly ? "wcl-cta--text-only" : ""
+      } ${this.stretch ? "wcl-cta--stretch" : ""} ${this.slim ? "wcl-cta--slim" : ""} ${
+        "wcl-cta--focus-" + this.focusOutline
+      }`;
     },
     glyphClass() {
-      const hasArrow = !this.glyph && !this.textOnly
+      const hasArrow = !this.glyph && !this.textOnly;
       return this.isCentred
-        ? { ['wcl-cta__arrow']: hasArrow }
+        ? { ["wcl-cta__arrow"]: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow,
-          }
+            ["wcl-cta__arrow"]: hasArrow,
+          };
     },
     textClass() {
-      return this.isCentred ? {} : {}
+      return this.isCentred ? {} : {};
     },
   },
   methods: {
     clicked() {
-      var theEl = this.$el.getElementsByClassName('wcl-cta__link-text')
-      var attrs
+      var theEl = this.$el.getElementsByClassName("wcl-cta__link-text");
+      var attrs;
       if (theEl && theEl.length > 0) {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: theEl[0]?.innerText?.split('\n')[0],
+          label: theEl[0]?.innerText?.split("\n")[0],
           data: this.url,
-        }
+        };
       } else {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: '',
+          label: "",
           data: this.url,
-        }
+        };
       }
       // push event to gtm
       if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.interaction.cta.click', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.cta.click", ...attrs });
       }
       // navigate to url
       if (!this.url) {
         //donothing
       } else if (this.isAbsolute) {
-        window.open(this.url)
+        window.open(this.url);
       } else {
-        this.$router.push(this.url)
+        this.$router.push(this.url);
       }
-      this.$emit('clicked')
+      this.$emit("clicked");
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 // styles can be found in global src/assets/styles/stylesheet.scss
 // this is because rich text html can dynamically specify cta button class
 .wcl-cta {
@@ -245,12 +248,12 @@ export default {
   &--focus {
     &-light {
       &:focus {
-        @include focus-outline('light');
+        @include focus-outline("light");
       }
     }
     &-dark {
       &:focus {
-        @include focus-outline('dark');
+        @include focus-outline("dark");
       }
     }
   }

package/src/components/SubComponents/Icon/README.md

@@ -9,8 +9,8 @@ Import the Icon component, and give it the URL path to the SVG file. When webpac
 ```html
 <template>  
   <div id="app">
-    <icon width="100" height="100" :glyph="Logo"></icon>
-    <icon width="100" height="100" :glyph="Close"></icon>
+    <icon width="100" height="100" :glyph="Logo" icon-alt="Logo icon"></icon>
+    <icon width="100" height="100" :glyph="Close" icon-alt="Close icon"></icon>
   </div>
 </template>
 

package/src/components/SubComponents/Icon/example.js

@@ -3,6 +3,7 @@ const template = `
     width="40"
     height="40"
     glyph="icon"
+    icon-alt="icon"
   />
 `
 

package/src/components/SubComponents/Icon/index.stories.js

@@ -29,7 +29,7 @@ const generate = (args) => ({
   },
   template: `
     <div style="margin-top:15px" :style="{background: !args.inverted ? 'white' : 'grey'}">
-      <icon v-bind="args" />
+      <icon v-bind="args" icon-alt="icon" />
     </div>`
 })
 

package/src/components/SubComponents/Icon/index.vue

@@ -7,9 +7,9 @@
       aria-hidden="true"
       :class="
         className +
-          (first ? ' icon_first' : '') +
-          (last ? ' icon_last' : '') +
-          (inverted ? ' icon--inverted' : '')
+        (first ? ' icon_first' : '') +
+        (last ? ' icon_last' : '') +
+        (inverted ? ' icon--inverted' : '')
       "
       :width="width"
       :height="height"
@@ -24,104 +24,104 @@
 </template>
 
 <script>
-import { detectBrowser } from '../../../../lib/detect-browser'
+import { detectBrowser } from "../../../../lib/detect-browser";
 // TODO: Add .visually-hidden label prop
 export default {
-  name: 'Icon',
+  name: "Icon",
   props: {
     className: {
       type: String,
-      default: ''
+      default: "",
     },
     glyph: {
       type: [Object, String],
-      required: true
+      required: true,
     },
     width: {
       type: [Number, String],
-      default: 32
+      default: 32,
     },
     height: {
       // height is required in IE
       // undefined type added in case height was going to be handled explicitly, check JobsAtHomeDay for more details
       type: [Number, String],
-      default: 32
+      default: 32,
     },
     first: {
       type: Boolean,
-      default: false
+      default: false,
     },
     last: {
       type: Boolean,
-      default: false
+      default: false,
     },
     inverted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     bordered: {
       type: Boolean,
-      default: false
+      default: false,
     },
     iconAlt: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
     return {
-      renderedSVG: undefined
-    }
+      renderedSVG: undefined,
+    };
   },
   computed: {
     isHtml() {
-      return this.glyph && typeof this.glyph === 'string'
-    }
+      return this.glyph && typeof this.glyph === "string";
+    },
   },
   mounted() {
-    this.renderedSVG = this.getSvg()
+    this.renderedSVG = this.getSvg();
   },
   methods: {
     getSvg() {
       if (this.glyph) {
-        let icon
-        const content = String(this.glyph)
-        const isSVGTag = content.includes('<svg')
+        let icon;
+        const content = String(this.glyph);
+        const isSVGTag = content.includes("<svg");
         if (!isSVGTag) {
-          icon = document.createElement('img')
-          icon.src = content
+          icon = document.createElement("img");
+          icon.src = content;
         } else {
-          if (window && navigator && detectBrowser(navigator) === 'IE') {
-            return this.glyph
+          if (window && navigator && detectBrowser(navigator) === "IE") {
+            return this.glyph;
           } else {
-            const temp = document.createElement('div')
-            temp.innerHTML = content
-            icon = temp.querySelector('svg')
-            icon.removeAttribute('width')
-            icon.removeAttribute('height')
+            const temp = document.createElement("div");
+            temp.innerHTML = content;
+            icon = temp.querySelector("svg");
+            icon.removeAttribute("width");
+            icon.removeAttribute("height");
           }
         }
         if (this.iconAlt) {
-          icon.setAttribute('alt', this.iconAlt)
+          icon.setAttribute("alt", this.iconAlt);
         }
-        icon.setAttribute('width', this.width)
-        icon.setAttribute('height', this.height)
+        icon.setAttribute("width", this.width);
+        icon.setAttribute("height", this.height);
         const customClass =
           this.className +
-          (this.first ? ' icon_first' : '') +
-          (this.last ? ' icon_last' : '') +
-          (this.inverted ? ' icon--inverted' : '')
-        icon.setAttribute('class', 'icon ' + customClass)
-        icon.setAttribute('focusable', false)
-        icon.setAttribute('aria-hidden', true)
-        return icon.outerHTML
+          (this.first ? " icon_first" : "") +
+          (this.last ? " icon_last" : "") +
+          (this.inverted ? " icon--inverted" : "");
+        icon.setAttribute("class", "icon " + customClass);
+        icon.setAttribute("focusable", false);
+        icon.setAttribute("aria-hidden", true);
+        return icon.outerHTML;
       }
-      return null
-    }
-  }
-}
+      return null;
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-@import './styles';
+@import "./styles";
 </style>

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
@@ -30,7 +32,7 @@
                   height="12"
                   width="17"
                   class="card_item-menu__title__caret"
-                  alt=""
+                  alt="Card item Menu Title expand icon"
                 />
                 <img
                   v-show="cardMenuIsOpen"
@@ -38,7 +40,7 @@
                   height="12"
                   width="17"
                   class="card_item-menu__title__caret"
-                  alt=""
+                  alt="Card item Menu Title collapse icon"
                 />
                 <h3 class="card_item-menu__title--small">
                   {{ card.dropdownTitle }}
@@ -49,7 +51,7 @@
                   v-if="card.fileType"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileTypeTitle }}
@@ -64,7 +66,7 @@
                   v-if="card.fileSize"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileSizeTitle }}
@@ -79,7 +81,7 @@
                   v-if="card.fileLength"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.fileLengthTitle }}
@@ -94,7 +96,7 @@
                   v-if="card.readingLevel"
                   class="card_item-menu__item card_item-menu__item--link"
                   :class="{
-                    'card_item-menu__item--hide': !cardMenuIsOpen
+                    'card_item-menu__item--hide': !cardMenuIsOpen,
                   }"
                 >
                   {{ card.readingLevelTitle }}
@@ -132,17 +134,17 @@ export default {
     Column,
     Row,
     CardFooter,
-    RichText
+    RichText,
   },
   props: {
     card: {
       type: Object,
-      required: true
+      required: true,
     },
     resourceType: {
       type: String,
-      default: 'resource-group'
-    }
+      default: 'resource-group',
+    },
   },
   data() {
     return {
@@ -152,7 +154,7 @@ export default {
       documentsvg,
       CaretUp,
       CaretDown,
-      windowWidth: 0
+      windowWidth: 0,
     }
   },
   computed: {
@@ -161,7 +163,7 @@ export default {
     },
     isResourceGroup() {
       return this.cardResourseType === 'resource-group' ? true : false
-    }
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -211,8 +213,8 @@ export default {
           })
         }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/SubComponents/VideoThumbnail/index.vue

@@ -4,27 +4,29 @@
       <div class="video-thumbnail">
         <img
           :src="videoThumbnail"
-          alt="video thumbnail"
+          :alt="`Thumbnail for video: ${video.mediaTitle}`"
           width="100%"
           class="video-thumbnail__image"
         />
         <img
           :src="VideoPlay"
-          alt="Play button"
+          alt="Video play button"
+          aria-hidden="true"
           class="video-thumbnail__button"
         />
       </div>
     </a>
     <!-- Modal -->
-    <b-modal
-      :id="`wcl-video-modal`"
+    <BModal
+      v-if="showModal"
       v-model="showModal"
+      :id="`wcl-video-modal-${video.id}`"
       scrollable
       class="wcl-video-modal__modal"
       no-footer
       size="xl"
     >
-      <div class="wcl-video-modal__video" v-if="showModal">
+      <div class="wcl-video-modal__video">
         <video-media
           :media-title="video.mediaTitle"
           :media-description="video.mediaDescription"
@@ -37,7 +39,7 @@
         />
       </div>
       <template #footer><div></div></template>
-    </b-modal>
+    </BModal>
   </div>
 </template>