swapped crypto with uuid() for generating ids for components when customId is not supplied

src/digital-components/button-question/button-question.spec.js

@@ -1,9 +1,6 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import buttonQuestion from "./button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import crypto from "crypto";
-
-global.crypto = crypto;
 
 describe("buttonQuestion.vue", () => {
     it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {

src/digital-components/dropdown-question/dropdown-question.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import dropdownQuestion from "./dropdown-question";
-import crypto from "crypto";
+
 
 // Mock CMS content
 const questionText = "Question Text";
@@ -12,8 +12,6 @@ const mockMixin = {
     },
 };
 
-global.crypto = crypto;
-
 // TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
 // It is not being used.
 describe("dropdownQuestion.vue", () => {

src/digital-components/dropdown-question/dropdown-question.vue

@@ -30,27 +30,27 @@
 
 <script>
 import { useField } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
     name: "dropdown-question",
     props: {
-        modelValue: String,
+        customDropdownId: String,
-        customInputId: String,
         options: {
             type: Object,
             required: true,
         },
+        modelValue: String,
         isDisabled: Boolean,
         isRequired: Boolean,
         validationRules: String,
         cmsWidgetName: String,
         hasError: Boolean,     
-        placeHolderText: String,
-        customDropdownId: String,
     },
     setup(props) {
+        const uuid = uuidv4();
         const dropdownId = !props.customDropdownId
-            ? `dropdown-${crypto.randomUUID()}`
+            ? `dropdown-${uuid}`
             : props.customDropdownId;
 
         const propsClone = Object.assign({}, props);

src/digital-components/modal/modal.spec.js

@@ -7,15 +7,13 @@ const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValu
 
 import { shallowMount } from "@vue/test-utils";
 import modal from "./modal";
-import crypto from "crypto";
+
 import { useForm } from "vee-validate";
 import { Modal } from "bootstrap";
 
 const footerButtonText = "Sample footer text here.";
 const headerText = "Sample header text here.";
 
-global.crypto = crypto;
-
 describe("modal.vue", () => {
     it("Should display modal header text when headerText is defined", async () => {
         // Arrange / Act

src/digital-components/modal/modal.vue

@@ -44,6 +44,7 @@
 import modalButtonMain from "@/digital-components/modal/ux-components/modal-button-main/modal-button-main";
 import { Modal } from "bootstrap";
 import { useForm } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
     name: "modal",
@@ -58,7 +59,9 @@ export default {
         },
     },
     setup() {
-        const modalId = `modal-${crypto.randomUUID()}`;
+        const uuid = uuidv4(); 
+        const modalId = `modal-${uuid}`;
+
         const { meta, validate, resetForm } = useForm();
 
         return {

src/digital-components/textbox-question/textbox-question.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
 import textboxQuestion from "./textbox-question";
-import crypto from "crypto";
 
 // Mock CMS content
 const questionText = "Question Text";
@@ -13,8 +12,6 @@ const mockMixin = {
 };
 const maska = jest.fn();
 
-global.crypto = crypto;
-
 describe("textboxQuestion.vue", () => {
     it("Should render a text input", async () => {
         // Arrange

src/digital-components/textbox-question/textbox-question.vue

@@ -77,13 +77,14 @@
 
 <script>
 import { useField, validate } from "vee-validate";
-import { storeActions } from "@/constants/store-actions";
 import loader from "@/ux-components/loader/loader.vue";
 import { ref } from "vue";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
     name: "textbox-question",
     props: {
+        customInputId: String,
         type: {
             type: String,
             default: "text",
@@ -97,7 +98,6 @@ export default {
             default: true,
         },
         modelValue: String,
-        customInputId: String,
         isDisabled: Boolean,
         isRequired: Boolean,
         hasIcon: Boolean, // If input has an icon
@@ -120,7 +120,8 @@ export default {
         centerErrorMessage: Boolean,
     },
     setup(props) {
-        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+        const uuid = uuidv4(); 
+        const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
 
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;

src/fmg-components/content-group-modal/content-group-modal.spec.js

@@ -1,8 +1,5 @@
 import { mount } from "@vue/test-utils";
 import contentGroupModal from "./content-group-modal";
-import crypto from "crypto";
-
-global.crypto = crypto;
 
 describe("content-group-modal.vue", () => {
     it("Should display header text when HeaderText is defined in the CMS", async () => {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="address-questions" role="application">
+    <div class="address-questions" >
-        <div class="row mb-4">
+        <div class="row mb-4" aria-live="polite">
             <div class="col">
                 <textboxQuestion
                     id="streetAddressField"

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -2,11 +2,6 @@ import mobileLocationModalQuestions from "./mobile-location-modal-questions";
 import { mount, shallowMount } from "@vue/test-utils";
 import { storeActions } from "@/constants/store-actions";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import modal from "@/digital-components/modal/modal";
-
-import crypto from "crypto";
-
-global.crypto = crypto;
 
 const linkWidgetName = "linkWidgetName";
 const modalWidgetName = "modalWidgetName";

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -76,6 +76,7 @@ import {
 
 // Validation
 import { useField } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
     name: "mobile-location-modal-questions",
@@ -89,8 +90,9 @@ export default {
         };
     },
     setup(props) {
+        const uuid = uuidv4(); 
         const componentId = !props.customComponentId
-            ? `component-${crypto.randomUUID()}`
+            ? `component-${uuid}`
             : props.customComponentId;
 
         // Integrate this component as a single field with an object for it's value into the page level validation

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -1,7 +1,5 @@
 import { mount, shallowMount } from "@vue/test-utils";
 import serviceZipModalQuestion from "./service-zip-modal-question";
-import crypto from "crypto";
-global.crypto = crypto;
 
 jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
     getCmsContent: jest.fn((widgetName, cmsFieldName) => {