diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
index c548a61..ffa7e3b 100644
--- a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
+++ b/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(
+
+ );
+ cy.get("img").invoke("attr", "alt").should("eq", "Landscape gradient");
+ })
+
+ it("finds alt on src video", () => {
+ cy.mount(
+
+ );
+ cy.get("video")
+ .invoke("attr", "aria-label")
+ .should("eq", "Background loop description");
+ });
+
})
diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
index b04f9f0..ac0ef45 100644
--- a/packages/contentful/src/ContentfulVisual.tsx
+++ b/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 || ''
}
diff --git a/packages/contentful/src/lib/aspectRatio.ts b/packages/contentful/src/lib/aspectRatio.ts
index 04ea95f..9efb85b 100644
--- a/packages/contentful/src/lib/aspectRatio.ts
+++ b/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 &&
diff --git a/packages/contentful/src/types/contentfulVisualTypes.ts b/packages/contentful/src/types/contentfulVisualTypes.ts
index 38361ed..e420112 100644
--- a/packages/contentful/src/types/contentfulVisualTypes.ts
+++ b/packages/contentful/src/types/contentfulVisualTypes.ts
@@ -1,11 +1,11 @@
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;
export type ContentfulImageAsset = ContentfulAsset & {
width: number
@@ -13,16 +13,16 @@ export type ContentfulImageAsset = ContentfulAsset & {
}
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
+};