@worksafevictoria/wcl7.5 1.10.0 → 1.11.0

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

@@ -7,153 +7,138 @@
     <div class="social-share__wrap">
       <span class="social-share__header">Share</span>
       <div class="social-share__button-wrapper">
-        <b-button
+        <a
           v-if="showEmail"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
+          :href="`mailto:?body=${url}`"
+          class="social-share__button social-share__anchor"
         >
           <div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`mailto:?body=${url}`"
-            >
-              <span class="visually-hidden">Email</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="emailIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
-        <b-button
+            <span class="visually-hidden">Email</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="emailIcon"
+              alt="social share email icon"
+            />
+          </div>
+        </a>
+
+        <a
           v-if="showFacebook"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
-          ><div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`https://www.facebook.com/sharer.php?u=${url}`"
-              target="_blank"
-            >
-              <span class="visually-hidden">Facebook</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="facebookIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
-        <b-button
+          :href="`https://www.facebook.com/sharer.php?u=${url}`"
+          class="social-share__button social-share__anchor"
+          target="_blank"
+        >
+          <div class="social-share__circle--black">
+            <span class="visually-hidden">Facebook</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="facebookIcon"
+              alt="social share facebook icon"
+            />
+          </div>
+        </a>
+
+        <a
           v-if="showTwitter"
-          tabindex="-1"
-          variant="link"
-          class="social-share__button"
-          ><div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`https://twitter.com/intent/tweet?url=${url}`"
-              target="_blank"
-            >
-              <span class="visually-hidden">Twitter</span>
-              <img
-                role="presentation"
-                class="social-share__img"
-                :src="twitterIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
+          :href="`https://twitter.com/intent/tweet?url=${url}`"
+          class="social-share__button social-share__anchor"
+          target="_blank"
+        >
+          <div class="social-share__circle--black">
+            <span class="visually-hidden">Twitter</span>
+            <img
+              role="presentation"
+              class="social-share__img"
+              :src="twitterIcon"
+              alt="social share twitter icon"
+            />
+          </div>
+        </a>
 
         <hr v-if="showPdf" class="social-share__hr" />
 
-        <b-button
+        <a
           v-if="showPdf"
-          tabindex="-1"
-          variant="link"
+          href="#"
           class="social-share__button"
           @click.prevent="savePdf()"
-          ><div class="social-share__circle--white">
-            <a tabindex="0" class="social-share__anchor" href="#">
-              <span class="visually-hidden">PDF</span>
-              <img
-                role="presentation"
-                class="social-share__img-pdf"
-                :src="officeFilePdfIcon"
-                alt=""
-              />
-            </a></div
-        ></b-button>
+        >
+          <div class="social-share__circle--white">
+            <span class="visually-hidden">PDF</span>
+            <img
+              role="presentation"
+              class="social-share__img-pdf"
+              :src="officeFilePdfIcon"
+              alt="social share pdf icon"
+            />
+          </div>
+        </a>
       </div>
     </div>
   </b-button-group>
 </template>
 
 <script>
-import emailIcon from '../../../assets/icons/SocialShare/email-white.svg?url'
-import facebookIcon from '../../../assets/icons/SocialShare/facebook-white.svg?url'
-import twitterIcon from '../../../assets/icons/SocialShare/x-icon-white.svg?url'
-import officeFilePdfIcon from '../../../assets/icons/SocialShare/office-file-pdf.svg?url'
-import { BButton, BButtonGroup } from 'bootstrap-vue-next'
+import emailIcon from "../../../assets/icons/SocialShare/email-white.svg?url";
+import facebookIcon from "../../../assets/icons/SocialShare/facebook-white.svg?url";
+import twitterIcon from "../../../assets/icons/SocialShare/x-icon-white.svg?url";
+import officeFilePdfIcon from "../../../assets/icons/SocialShare/office-file-pdf.svg?url";
+import { BButton, BButtonGroup } from "bootstrap-vue-next";
 
 export default {
-    name: 'SocialShare',
-    components: { BButtonGroup, BButton },
-    props: {
-        rtl: {
-            type: Boolean,
-            default: false
-        }
+  name: "SocialShare",
+  components: { BButtonGroup, BButton },
+  props: {
+    rtl: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-        return {
-            url: null,
-            emailIcon,
-            facebookIcon,
-            twitterIcon,
-            officeFilePdfIcon,
-            mobileToggle: false,
-            rightToggle: true
-        };
+  },
+  data() {
+    return {
+      url: null,
+      emailIcon,
+      facebookIcon,
+      twitterIcon,
+      officeFilePdfIcon,
+      mobileToggle: false,
+      rightToggle: true,
+    };
+  },
+  computed: {
+    showFacebook() {
+      return true;
     },
-    computed: {
-        showFacebook() {
-            return true;
-        },
-        showTwitter() {
-            return true;
-        },
-        showEmail() {
-            return true;
-        },
-        showPdf() {
-            return this.$canPrint && this.$canPrint();
-        }
+    showTwitter() {
+      return true;
     },
-    mounted() {
-      let winHref = window.location.href
-          if (winHref.toLowerCase().includes("worksafe")) {
-            this.url = window.location.href;
-        }
+    showEmail() {
+      return true;
     },
-    methods: {
-        savePdf() {
-            window.printOnLoad = true;
-            let URL = `/pdf${window.location.pathname}`;
-            window.open(URL);
-        }
+    showPdf() {
+      return this.$canPrint && this.$canPrint();
+    },
+  },
+  mounted() {
+    let winHref = window.location.href;
+    if (winHref.toLowerCase().includes("worksafe")) {
+      this.url = window.location.href;
     }
-}
+  },
+  methods: {
+    savePdf() {
+      window.printOnLoad = true;
+      let URL = `/pdf${window.location.pathname}`;
+      window.open(URL);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .social-share {
   background: $white;
@@ -167,7 +152,7 @@ export default {
   left: 0;
   z-index: 2;
 
-  @include mq('sm') {
+  @include mq("sm") {
     position: relative;
     top: auto;
     left: auto;
@@ -179,7 +164,7 @@ export default {
   &__header {
     font-size: 14px;
     line-height: 50px;
-    @include mq('sm') {
+    @include mq("sm") {
       line-height: 40px;
     }
   }
@@ -191,7 +176,7 @@ export default {
     align-content: center;
     margin: auto;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: block;
       margin: 0;
       flex-direction: unset;
@@ -226,7 +211,7 @@ export default {
     left: 0px;
     position: relative;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: none;
     }
   }
@@ -238,10 +223,10 @@ export default {
     border: 0;
     margin-bottom: 8px;
 
-    @include mq('sm') {
+    @include mq("sm") {
       margin-right: 8px;
     }
-    @include mq('xs') {
+    @include mq("xs") {
       margin-bottom: 0px;
     }
     a {
@@ -264,7 +249,7 @@ export default {
 
   &__vr {
     border: 0;
-    @include mq('sm') {
+    @include mq("sm") {
       border-left: 2px solid $lightgray;
       margin-left: 12px;
     }
@@ -289,7 +274,7 @@ export default {
     }
   }
 }
-@include mq('sm') {
+@include mq("sm") {
   .fixed {
     position: fixed;
     bottom: 0;
@@ -312,7 +297,7 @@ export default {
   left: inherit;
   right: 0;
 
-  @include mq('sm') {
+  @include mq("sm") {
     border-radius: 0;
   }
 }

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

@@ -18,8 +18,12 @@
         @keypress.enter="mini ? handleClick() : false"
       >
         <div :class="`${type}-strip__icon`">
-          <img v-if="type === 'alert'" :src="exclamationIcon" alt="" />
-          <img v-else :src="infoIcon" alt="" />
+          <img
+            v-if="type === 'alert'"
+            :src="exclamationIcon"
+            alt="alert exclamation icon"
+          />
+          <img v-else :src="infoIcon" alt="alert information icon" />
         </div>
         <div
           :class="{
@@ -28,7 +32,7 @@
             [`${type}-strip__content--right`]: rtl,
           }"
         >
-          <span
+          <h2
             :class="{
               [`${type}-strip__heading`]: true,
               [`${type}-strip__heading--left`]: !rtl,
@@ -36,14 +40,14 @@
             }"
           >
             {{ stripTitle }}
-          </span>
+          </h2>
           <rich-text :content="stripContent" :without-container="true" />
         </div>
         <img
           v-if="mini"
           height="16"
           class="alert-strip__icon--caret"
-          alt=""
+          alt="alert icon"
           :src="chevronIcon"
         />
       </div>

package/src/components/Paragraphs/Accordion/AccordionItem/index.vue

@@ -12,25 +12,23 @@
       <a
         :id="'accordion' + itemid"
         role="button"
-        :aria-expanded="showAccordion ? 'true' : 'false'"
+        :aria-expanded="showAccordion"
         class="accordion-item__title"
         :aria-controls="'sect' + itemid"
         tabindex="0"
         @click.prevent="toggleAccordion"
         @keypress.enter="toggleAccordion"
       >
-        <span
-          v-if="preHeading && showPreHeading"
-          class="accordion-item__pre-heading"
-          >{{ preHeading }}</span
-        >
+        <span v-if="preHeading && showPreHeading" class="accordion-item__pre-heading">{{
+          preHeading
+        }}</span>
         <rich-text :tag="'h4'" :tag-class="'card-title'" :content="title" />
         <icon
           v-show="showAccordion && content"
           width="18"
           height="12"
           class="accordion-icon"
-          :icon-alt="'collapse'"
+          :icon-alt="'collapse icon'"
           :glyph="CaretUp"
           :class="{
             '--with-pre-heading': preHeading && showPreHeading,
@@ -41,7 +39,7 @@
           width="18"
           height="12"
           class="accordion-icon"
-          :icon-alt="'expand'"
+          :icon-alt="'expand icon'"
           :glyph="CaretDown"
           :class="{
             '--with-pre-heading': preHeading && showPreHeading,
@@ -64,14 +62,14 @@
 </template>
 
 <script>
-import CaretDown from '../../../../assets/icons/caret-down.svg?url'
-import CaretUp from '../../../../assets/icons/caret-up.svg?url'
-import RichText from '../../RichText/index.vue'
-import Icon from '../../../SubComponents/Icon/index.vue'
-import { BCard, BCardBody } from 'bootstrap-vue-next'
+import CaretDown from "../../../../assets/icons/caret-down.svg?url";
+import CaretUp from "../../../../assets/icons/caret-up.svg?url";
+import RichText from "../../RichText/index.vue";
+import Icon from "../../../SubComponents/Icon/index.vue";
+import { BCard, BCardBody } from "bootstrap-vue-next";
 
 export default {
-  name: 'AccordionItem',
+  name: "AccordionItem",
   components: {
     RichText,
     Icon,
@@ -81,11 +79,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
     preHeading: {
       type: String,
-      default: 'PRE-HEADING',
+      default: "PRE-HEADING",
     },
     content: {
       type: String,
@@ -109,7 +107,7 @@ export default {
     },
     itemid: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
   },
   data: () => ({
@@ -119,28 +117,28 @@ export default {
   }),
   mounted() {
     this.$nextTick(() => {
-      this.showAccordion = this.open
-    })
+      this.showAccordion = this.open;
+    });
   },
   methods: {
     toggleAccordion() {
-      this.showAccordion = !this.showAccordion
+      this.showAccordion = !this.showAccordion;
       if (this.showAccordion) {
         if (this.$bus) {
-          this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
+          this.$bus.$emit("accordionItemOpen", this.meta); // this.$root.$emit('accordionItemOpen', this.meta)
         }
       } else {
         if (this.$bus) {
-          this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
+          this.$bus.$emit("accordionItemClose", this.meta); // this.$root.$emit('accordionItemClose', this.meta)
         }
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
-@import '../../../../includes/scss/all';
+@import "../../../../includes/scss/all";
 .subcomponent--accordion-item {
   .accordion-item {
     border-radius: 6px;

package/src/components/Paragraphs/Accordion/StepperItem/index.vue

@@ -34,7 +34,7 @@
               width="18"
               height="12"
               class="stepper-icon"
-              :icon-alt="'collapse'"
+              :icon-alt="'collapse icon'"
               :glyph="CaretUp"
             />
             <icon
@@ -42,7 +42,7 @@
               width="18"
               height="12"
               class="stepper-icon"
-              :icon-alt="'expand'"
+              :icon-alt="'expand icon'"
               :glyph="CaretDown"
             />
           </div>
@@ -64,14 +64,14 @@
 </template>
 
 <script>
-import CaretDown from '../../../../assets/icons/caret-down.svg?url'
-import CaretUp from '../../../../assets/icons/caret-up.svg?url'
-import RichText from '../../RichText/index.vue'
-import Icon from '../../../SubComponents/Icon/index.vue'
-import { BCard, BCardBody } from 'bootstrap-vue-next'
+import CaretDown from "../../../../assets/icons/caret-down.svg?url";
+import CaretUp from "../../../../assets/icons/caret-up.svg?url";
+import RichText from "../../RichText/index.vue";
+import Icon from "../../../SubComponents/Icon/index.vue";
+import { BCard, BCardBody } from "bootstrap-vue-next";
 
 export default {
-  name: 'StepperItem',
+  name: "StepperItem",
   components: {
     RichText,
     Icon,
@@ -81,7 +81,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
     content: {
       type: String,
@@ -109,7 +109,7 @@ export default {
     },
     itemid: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
   },
   data: () => ({
@@ -119,19 +119,19 @@ export default {
   }),
   mounted() {
     this.$nextTick(() => {
-      this.showAccordion = this.open
-    })
+      this.showAccordion = this.open;
+    });
   },
   methods: {
     toggleAccordion() {
-      this.showAccordion = !this.showAccordion
+      this.showAccordion = !this.showAccordion;
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
-@import '../../../../includes/scss/all';
+@import "../../../../includes/scss/all";
 .subcomponent--accordion-stepper {
   .accordion-stepper {
     border-radius: 6px;