INSR-8489: Address copilot suggestions for tool-tip and mobile fee modal

- Correct default values for cmsWidgetName prop
- Change name of tool-tip component to match pattern (kebab-case)
- Automatically unmount tool-tip component after each test
- Accessibility improvements for tool-tip icon
- Remove unused event handler wiring
- Narrow CSS selector for price row to prevent unintended styling
- Remove unused imports
This commit is contained in:
Alex Humphries 2026-05-21 16:44:18 -04:00
parent f46e584d6b
commit 818914b1a8
4 changed files with 18 additions and 19 deletions

View file

@ -1,8 +1,7 @@
<template>
<div class="advanced-mobile-modal-container">
<modal
ref="advancedMobileModal"
:onModalClosedCallback="onModalClosed">
ref="advancedMobileModal">
<div>
<div class="header">{{ modalHeaderText }}</div>
<div class="subheader">{{ modalHeaderSubText }}</div>
@ -42,7 +41,7 @@ export default {
props: {
cmsWidgetName: {
type: String,
default: 'SuggestTimeslotModal'
default: 'AdvancedMobileModal'
}
},
computed: {

View file

@ -124,8 +124,6 @@
<script>
import { useMainStore } from '@/store';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import { formatAmountInDollars } from '@/helpers/text-helper.js';
import advancedMobileModal from '@/iss-components/cart-dropdown/advanced-mobile-modal/advanced-mobile-modal.vue';
@ -470,7 +468,7 @@ export default {
.price-row {
display: flex;
:last-child {
>:last-child {
margin-left: auto;
}
}

View file

@ -1,4 +1,4 @@
import { shallowMount, mount } from "@vue/test-utils";
import { shallowMount, mount, enableAutoUnmount } from "@vue/test-utils";
import toolTip from "@/ux-components/tool-tip/tool-tip.vue";
const mockMixin = {
@ -18,6 +18,7 @@ function setupMocks(mountOptionsMockData = {}) {
}
describe("toolTip.vue", () => {
enableAutoUnmount(afterEach);
afterEach(() => {
jest.clearAllMocks();
});

View file

@ -1,10 +1,16 @@
<template>
<div class="tooltip-container" ref="container">
<span @click="toggleTooltip" class="tooltip-icon">
<slot name="icon">
<img src="@/assets/img/icons/info-circle-blue.svg" />
</slot>
</span>
<span
class="tooltip-icon"
role="button"
aria-label="Show more information"
@click="toggleTooltip"
@keydown.enter.prevent="toggleTooltip"
@keydown.space.prevent="toggleTooltip">
<slot name="icon">
<img src="@/assets/img/icons/info-circle-blue.svg" alt="" />
</slot>
</span>
<span
v-if="isVisible"
class="tooltip"
@ -22,16 +28,11 @@
import { getStringWithCustomValues } from '@/helpers/cms-content-helper';
export default {
name: "toolTip",
name: "tool-tip",
props: {
cmsWidgetName: {
type: String,
default(rawProps) {
if (!rawProps.cmsWidgetName) {
console.log("Error: Missing a CMS Widget Name (required field)");
}
return "widgetUndefined";
},
default: 'widgetUndefined'
},
customValueMap: {
type: Object,