feat(reactjs-components): Add a fallback Alt to handle empty alt from API

Author: Plopix

src/image/component.tsx

@@ -14,6 +14,7 @@ export const Image: FunctionComponent<ImageProps> = ({ children, ...restOfAllPro
         variants,
         altText,
         alt: altPassed,
+        fallbackAlt,
         caption,
         className,
         media,
@@ -23,7 +24,11 @@ export const Image: FunctionComponent<ImageProps> = ({ children, ...restOfAllPro
     } = restOfAllProps;
 
     let vars = (variants || []).filter((v) => !!v);
-    const alt = typeof altPassed === 'string' ? altPassed : altText;
+
+    // if the alt is passed to the component we use that: highest priority
+    // if there is nothing from the API response (altText) then we use the fallbackAlt
+    // otherwise we set empty for W3C validation
+    const alt = altPassed || altText || fallbackAlt || '';
 
     // Naive rendering POC
     if (url && _availableSizes && _availableFormats) {

src/image/types.ts

@@ -8,6 +8,7 @@ export interface ImageProps {
     sizes?: string;
     altText?: string;
     alt?: string;
+    fallbackAlt?: string;
     media?: string;
     style?: React.CSSProperties;
     className?: string;