Merge pull request #56 from BKWLD/detect-src-alt

Detect src alt

Author: weotch

packages/contentful/cypress/component/ContentfulVisual.cy.tsx

@@ -113,4 +113,32 @@ describe('contentful visual entry props', () => {
       .should('contain', videoAsset.url)
   })
 
+  it('finds alt on src image', () => {
+    cy.mount(
+      <ContentfulVisual
+        src={{
+          ...visualEntry,
+          alt: null,
+        }}
+      />
+    );
+    cy.get("img").invoke("attr", "alt").should("eq", "Landscape gradient");
+  })
+
+  it("finds alt on src video", () => {
+    cy.mount(
+      <ContentfulVisual
+        src={{
+          ...visualEntry,
+          image: null,
+          portraitImage: null,
+          alt: null,
+        }}
+      />
+    );
+    cy.get("video")
+      .invoke("attr", "aria-label")
+      .should("eq", "Background loop description");
+  });
+
 })

packages/contentful/src/ContentfulVisual.tsx

@@ -55,13 +55,20 @@ export default function ContentfulVisual(
           responsiveAspectCalculator :
           getImageAspect(image || src?.image || src?.portraitImage)
       )}
-      alt={ alt || src?.alt || makeAssetAlt(image) || makeAssetAlt(video)}
+      alt={
+        alt
+        || src?.alt
+        || makeAssetAlt(src?.image)
+        || makeAssetAlt(image)
+        || makeAssetAlt(src?.video)
+        || makeAssetAlt(video)
+      }
     />
   )
 }
 
 // Use various asset fields to make the alt from automatically
-function makeAssetAlt(asset: ContentfulAsset | undefined): string {
+function makeAssetAlt(asset: ContentfulAsset | undefined | null): string {
   if (!asset) return ''
   return asset.description || asset.title || asset.fileName || ''
 }

packages/contentful/src/lib/aspectRatio.ts

@@ -9,7 +9,7 @@ export const orientationMediaQueries = [
 
 // Get the aspect ratio from an image asset if it exists
 export function getImageAspect(
-  image: ContentfulImageAsset | undefined
+  image: ContentfulImageAsset | undefined | null
 ): number | undefined {
   if (!image) return undefined
   return image.width / image.height
@@ -28,17 +28,17 @@ export const responsiveAspectCalculator: AspectCalculator = (
 
 // Check whether multiple orientations were provided
 export function hasResponsiveAssets(
-  src: ContentfulVisualEntry | undefined
+  src: ContentfulVisualEntry | undefined | null
 ): boolean {
-  if (!src) return false
+  if (!src) return false;
   const hasLandscape = !!(src.image || src.video),
-    hasPortrait = !!(src.portraitImage || src.portraitVideo)
-  return hasLandscape && hasPortrait
+    hasPortrait = !!(src.portraitImage || src.portraitVideo);
+  return hasLandscape && hasPortrait;
 }
 
 // Check whether multiple aspect ratios were provided
 export function hasResponsiveAspects(
-  src: ContentfulVisualEntry | undefined
+  src: ContentfulVisualEntry | undefined | null
 ): boolean {
   if (!src) return false
   const hasLandscapeAspect = !!(src.image?.width &&

packages/contentful/src/types/contentfulVisualTypes.ts

@@ -1,28 +1,28 @@
 import type { ReactVisualProps } from '@react-visual/react'
 
 export type ContentfulVisualProps = {
-  image?: ContentfulImageAsset
-  video?: ContentfulAsset
-  src?: ContentfulVisualEntry
-  alt?: string // Can be inferrerd
-} & Omit< ReactVisualProps, 'alt' | 'image' | 'video' >
+  image?: ContentfulImageAsset | null;
+  video?: ContentfulAsset | null;
+  src?: ContentfulVisualEntry | null;
+  alt?: string; // Can be inferrerd
+} & Omit<ReactVisualProps, "alt" | "image" | "video">;
 
 export type ContentfulImageAsset = ContentfulAsset & {
   width: number
   height: number
 }
 
 export type ContentfulAsset = {
-  title?: string
-  description?: string
+  title?: string | null
+  description?: string // Was not nullable in my tests
   fileName?: string
   url: string
 }
 
 export type ContentfulVisualEntry = {
-  image?: ContentfulImageAsset
-  portraitImage?: ContentfulImageAsset
-  video?: ContentfulAsset
-  portraitVideo?: ContentfulAsset
-  alt: string
-}
+  image?: ContentfulImageAsset | null
+  portraitImage?: ContentfulImageAsset | null
+  video?: ContentfulAsset | null
+  portraitVideo?: ContentfulAsset | null
+  alt: string | null
+};