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 +};