altText for PhotoPack

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -83,7 +83,7 @@
       <figcaption>{caption}</figcaption>
     {/if}
     {#if !altText}
-      <div class="alt-warning">Missing altText</div>
+      <div class="alt-warning">altText</div>
     {/if}
   </figure>
 </Block>

src/components/PhotoPack/PhotoPack.stories.svelte

@@ -5,6 +5,8 @@
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore
   import quickitDocs from './stories/docs/quickit.md?raw';
+  // @ts-ignore
+  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
 
   import PhotoPack from './PhotoPack.svelte';
   import { getPhotoPackPropsFromDoc } from './docProps';
@@ -100,6 +102,25 @@
       { Breakpoint: '450', Rows: '1, 2, 2' },
     ],
   };
+
+  const altTextImages = [
+    {
+      src: 'https://via.placeholder.com/1024x768.jpg',
+      altText: 'alt text',
+      caption:
+        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
+      maxHeight: 400,
+    },
+    {
+      src: 'https://via.placeholder.com/1640x1180.jpg',
+      altText: '',
+      caption:
+        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+    },
+  ];
+  const altTextLayouts = [
+    { breakpoint: 450, rows: [2] },
+  ];
 </script>
 
 <Meta {...meta} />
@@ -123,3 +144,14 @@
   {...withStoryDocs(quickitDocs)}
   args="{getPhotoPackPropsFromDoc(quickItBlock)}"
 />
+
+<Story
+  name="Mising altText"
+  args="{{
+    width: 'wide',
+    captionWidth: 'normal',
+    images: altTextImages,
+    layouts: altTextLayouts,
+  }}"
+  {...withStoryDocs(missingAltTextDocs)}
+/>

src/components/PhotoPack/PhotoPack.svelte

@@ -102,6 +102,9 @@
               alt="{img.altText}"
               style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
             />
+            {#if !img.altText}
+              <div class="alt-warning">altText</div>
+            {/if}
           </figure>
         {/each}
       </div>
@@ -139,12 +142,24 @@
         flex: 1;
         margin: 0;
         padding: 0;
+        position: relative;
         img {
           margin: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
+        div.alt-warning {
+          font-family: $font-family-display;
+          padding: 5px 10px;
+          background-color: red;
+          color: white;
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 14px;
+          line-height: 16px;
+        }
       }
     }
   }

src/components/PhotoPack/stories/docs/missingAltText.md

@@ -0,0 +1 @@
+If any of your images is missing `altText` a small warning will overlay the photo.