Merge branch 'main' into APPS-3592_collections_hearst-metrotone-fixes

Author: jendiamond

packages/vue-component-library/src/lib-components/ImageSlider.vue

@@ -25,6 +25,14 @@ const parsedSliderAspectRatio = computed(() => {
   return `${aspectRatio}`
 })
 
+// return alt or altText field, whichever is present
+const parsedBeforeImageAltText = computed(() => {
+  return beforeImage.altText || beforeImage.alt || ''
+})
+const parsedAfterImageAltText = computed(() => {
+  return afterImage.altText || afterImage.alt || ''
+})
+
 function handleSliderInput(event: Event) {
   const target = event.target as HTMLInputElement
   if (sliderContainer.value && slider.value && beforeImageElement.value)
@@ -35,8 +43,8 @@ function handleSliderInput(event: Event) {
 <template>
   <div ref="sliderContainer" class="image-slider" :style="{ aspectRatio: parsedSliderAspectRatio }">
     <div class="image-container" :style="{ aspectRatio: parsedSliderAspectRatio }">
-      <img class="after-image slider-image" :src="afterImage.src" :alt="afterImage.alt">
-      <img ref="beforeImageElement" class="before-image slider-image" :src="beforeImage.src" :alt="beforeImage.alt">
+      <img class="after-image slider-image" :src="afterImage.src" :alt="parsedAfterImageAltText">
+      <img ref="beforeImageElement" class="before-image slider-image" :src="beforeImage.src" :alt="parsedBeforeImageAltText">
       <div class="image-labels">
         <span class="before-label slider-label">
           <slot name="beforeLabel">Before</slot>

packages/vue-component-library/src/lib-components/RichText.vue

@@ -33,7 +33,7 @@ const parsedContent = computed(() => {
   <div :class="classes">
     <div
       class="parsed-content"
-      v-sanitize-html="parsedContent"
+      v-html="parsedContent"
     />
     <slot />
   </div>

packages/vue-component-library/src/stories/ImageSlider.stories.js

@@ -57,6 +57,42 @@ export function Default() {
   }
 }
 
+export function DefaultWithAltText() {
+  return {
+    data() {
+      return {
+        ...mockBeforeAfterImageCarousel[0],
+        beforeImage: {
+          ...mockBeforeImage[0],
+          altText: 'Before image alt text'
+        },
+        afterImage: {
+          ...mockBeforeImage[0],
+          altText: 'After image alt text'
+        }
+      }
+    },
+    components: { ImageSlider },
+    template: `
+    <component is="style" type="text/css">
+.before-image {
+    filter: grayscale(100%)
+}
+    </component>
+        <div style="padding: 1rem; max-width: 1160px;">
+        <image-slider
+            :before-image="beforeImage"
+            :after-image="afterImage"
+        >
+            <template #captionText>
+               {{ caption }}
+            </template>
+        </image-slider>
+        </div>
+    `,
+  }
+}
+
 const mockSquareImage = [
   {
     id: '3280520',