32207 WCAG Round 3 1.1.1 Non-text content

- Added more descriptive alt text for object store images
AAFC-BICoE · Nov 2, 2023 · 0c6c1cc · 0c6c1cc
1 parent 113cae3
commit 0c6c1cc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/packages/dina-ui/components/object-store/metadata/useMetadataThumbnailPath.tsx b/packages/dina-ui/components/object-store/metadata/useMetadataThumbnailPath.tsx
@@ -7,6 +7,7 @@ export function useMetadataThumbnailPath<TData extends KitsuResource>(
   isJsonApiQuery: boolean | undefined
 ) {
   const bucket = get(original as any, bucketField);
+  const altImage = get(original as any, "metadata.acCaption");
   let derivatives: any[] | undefined = (original as any)?.included?.derivative;
   let thumbnailDerivative = derivatives?.find(
     (derivative) => derivative.attributes.derivativeType === "THUMBNAIL_IMAGE"
@@ -33,5 +34,10 @@ export function useMetadataThumbnailPath<TData extends KitsuResource>(
     hasExternalResourceDerivative =
       resourceExternalURL && (original as any)?.included?.derivative;
   }
-  return { resourceExternalURL, hasExternalResourceDerivative, filePath };
+  return {
+    resourceExternalURL,
+    hasExternalResourceDerivative,
+    filePath,
+    altImage
+  };
 }
diff --git a/packages/dina-ui/components/table/thumbnail-cell.tsx b/packages/dina-ui/components/table/thumbnail-cell.tsx
@@ -19,8 +19,16 @@ export function ThumbnailCell<TData extends KitsuResource>({
   return {
     id: "thumbnail",
     cell: ({ row: { original } }) => {
-      const { resourceExternalURL, hasExternalResourceDerivative, filePath } =
-        useMetadataThumbnailPath<TData>(original, bucketField, isJsonApiQuery);
+      const {
+        resourceExternalURL,
+        hasExternalResourceDerivative,
+        filePath,
+        altImage
+      } = useMetadataThumbnailPath<TData>(
+        original,
+        bucketField,
+        isJsonApiQuery
+      );
       return resourceExternalURL ? (
         <div className="d-flex h-100">
           {hasExternalResourceDerivative ? (
@@ -33,7 +41,7 @@ export function ThumbnailCell<TData extends KitsuResource>({
             </Link>
           )}
           {hasExternalResourceDerivative && (
-            <SmallThumbnail filePath={filePath} />
+            <SmallThumbnail filePath={filePath} altImage={altImage} />
           )}
           <Link
             href={`/object-store/object/external-resource-view?id=${original?.id}`}
@@ -44,7 +52,7 @@ export function ThumbnailCell<TData extends KitsuResource>({
           </Link>
         </div>
       ) : (
-        <SmallThumbnail filePath={filePath} />
+        <SmallThumbnail filePath={filePath} altImage={altImage} />
       );
     },
     enableSorting: false,
@@ -60,7 +68,12 @@ export function ThumbnailCell<TData extends KitsuResource>({
   };
 }
 
-export function SmallThumbnail({ filePath }) {
+export interface SmallThumbnailProps {
+  filePath: string;
+  altImage?: string;
+}
+
+export function SmallThumbnail({ filePath, altImage }: SmallThumbnailProps) {
   const { formatMessage } = useDinaIntl();
 
   const height = "5rem";
@@ -70,7 +83,9 @@ export function SmallThumbnail({ filePath }) {
       <FileView
         filePath={filePath}
         fileType="jpg"
-        imgAlt={formatMessage("thumbnailNotAvailableText")}
+        imgAlt={
+          altImage ? altImage : formatMessage("thumbnailNotAvailableText")
+        }
         imgHeight={height}
       />
     </div>