feat: add default alt tags for images (#3825)

* feat: add alt tag to CommentItem avatar
* feat: add default alt tag to ResearchListItem
* feat: add alt tag to HowTo cover image
* feat: add alt tag to ImageGallery in HowTo Step

packages/components/src/CommentItem/CommentItem.test.tsx

@@ -7,10 +7,20 @@ import { Default } from './CommentItem.stories'
 
 import type { IProps } from './CommentItem'
 
-describe('CommentList', () => {
+describe('CommentItem', () => {
   it('shows the avatar', () => {
     const { getByTestId } = render(<Default {...(Default.args as IProps)} />)
 
     expect(getByTestId('commentAvatar')).toBeInTheDocument()
+    expect(
+      (
+        getByTestId('commentAvatar').firstChild as HTMLImageElement
+      ).getAttribute('alt'),
+    ).not.empty
+  })
+  it('shows the comment text', () => {
+    const { getByTestId } = render(<Default {...(Default.args as IProps)} />)
+
+    expect(getByTestId('commentText')).toBeInTheDocument()
   })
 })

packages/components/src/CommentItem/CommentItem.tsx

@@ -91,6 +91,11 @@ export const CommentItem = (props: IProps) => {
                   width: ['30px', '50px'],
                   height: ['30px', '50px'],
                 }}
+                alt={
+                  creatorName
+                    ? `Avatar of ${creatorName}`
+                    : 'Avatar of comment author'
+                }
               />
             </Box>
 
@@ -155,6 +160,7 @@ export const CommentItem = (props: IProps) => {
               </Flex>
               <Text
                 data-cy="comment-text"
+                data-testid="commentText"
                 sx={{
                   fontFamily: 'body',
                   lineHeight: 1.3,

packages/components/src/ImageGallery/ImageGallery.tsx

@@ -20,6 +20,7 @@ export interface IImageGalleryItem {
   size: number
   timeCreated: string
   updated: string
+  alt?: string
 }
 
 export interface ImageGalleryProps {
@@ -146,7 +147,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
           onClick={() => {
             triggerLightbox()
           }}
-          alt={activeImage.name}
+          alt={activeImage.alt ?? activeImage.name}
           crossOrigin=""
         />
         {showNextPrevButton ? (
@@ -208,7 +209,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
                 loading="lazy"
                 src={image.thumbnailUrl}
                 key={index}
-                alt={image.name}
+                alt={image.alt ?? image.name}
                 sx={{
                   width: 100,
                   height: 67,

src/models/howto.models.tsx

@@ -15,6 +15,7 @@ export interface IHowto extends IHowtoFormInput {
   _createdBy: string
   _deleted: boolean
   cover_image?: IUploadedFileMeta
+  cover_image_alt?: string
   fileLink?: string
   total_downloads?: number
   latestCommentDate?: string | undefined
@@ -54,6 +55,7 @@ export interface IHowtoFormInput extends IModerable, ISharedFeatures {
   category?: ICategory
   // NOTE cover image input starts as convertedFileMeta but is transformed on upload
   cover_image?: IUploadedFileMeta | IConvertedFileMeta
+  cover_image_alt?: string
   // Added to be able to recover on edit by admin
   creatorCountry?: string
   totalComments?: number

src/pages/Howto/Content/Common/Howto.form.tsx

@@ -23,6 +23,7 @@ import { HowtoButtonPublish } from './HowtoButtonPublish'
 import { HowtoErrors } from './HowtoErrors'
 import { HowtoFieldCategory } from './HowtoFieldCategory'
 import { HowtoFieldCoverImage } from './HowtoFieldCoverImage'
+import { HowtoFieldCoverImageAlt } from './HowtoFieldCoverImageAlt'
 import { HowtoFieldDescription } from './HowtoFieldDescription'
 import { HowtoFieldDifficulty } from './HowtoFieldDifficulty'
 import { HowtoFieldFiles } from './HowtoFieldFiles'
@@ -218,6 +219,7 @@ export const HowtoForm = observer((props: IProps) => {
                             data-cy={'intro-cover'}
                           >
                             <HowtoFieldCoverImage />
+                            <HowtoFieldCoverImageAlt />
                           </Flex>
                         </Flex>
                       </Flex>

src/pages/Howto/Content/Common/HowtoFieldCoverImageAlt.tsx

@@ -0,0 +1,27 @@
+import { Field } from 'react-final-form'
+import { FieldInput } from 'oa-components'
+import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { Box, Text } from 'theme-ui'
+
+import { intro } from '../../labels'
+
+export const HowtoFieldCoverImageAlt = () => {
+  const { description, placeholder, title } = intro.cover_image_alt
+  const name = 'cover_image_alt'
+
+  return (
+    <FormFieldWrapper htmlFor={name} text={title} required>
+      <Box>
+        <Field
+          id={name}
+          name={name}
+          component={FieldInput}
+          placeholder={placeholder}
+        />
+      </Box>
+      <Text color="grey" mt={4} sx={{ fontSize: 1 }}>
+        {description}
+      </Text>
+    </FormFieldWrapper>
+  )
+}

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

@@ -269,7 +269,7 @@ const HowtoDescription = ({ howto, loggedInUser, ...props }: IProps) => {
                     width: '100%',
                   }}
                   crossOrigin=""
-                  alt="how-to cover"
+                  alt={howto.cover_image_alt ?? 'how-to cover'}
                 />
               )}
             </Box>

src/pages/Howto/Content/Howto/Step/Step.tsx

@@ -82,7 +82,12 @@ const Step = (props: IProps) => {
                   <VideoPlayer videoUrl={step.videoUrl} />
                 ) : step.images ? (
                   <ImageGallery
-                    images={formatImagesForGallery(step.images) as any}
+                    images={
+                      formatImagesForGallery(
+                        step.images,
+                        `Step ${stepindex + 1}`,
+                      ) as any
+                    }
                   />
                 ) : null}
               </Box>

src/pages/Howto/Content/HowtoList/HowToCard.tsx

@@ -43,6 +43,7 @@ export const HowToCard = ({ howto }: IProps) => {
             width: 500,
           })}
           crossOrigin=""
+          alt={howto.cover_image_alt ?? `Cover image of ${howto.title}`}
         />
       </RouterLink>
 

src/pages/Howto/labels.ts

@@ -52,6 +52,12 @@ export const intro: ILabels = {
     description: 'This image should be landscape. We advise 1280x960px',
     title: 'Cover image',
   },
+  cover_image_alt: {
+    description:
+      'This is the alternative text that is read out if the cover image is not available',
+    placeholder: 'People working on a house',
+    title: 'Cover image alt text',
+  },
   description: {
     description: `Provide a short introduction (max ${HOWTO_MAX_LENGTH} characters)`,
     title: 'Short description',

src/pages/Research/Content/ResearchListItem.tsx

@@ -76,6 +76,7 @@ const ResearchListItem = ({ item }: IProps) => {
               src={cdnImageUrl(getItemThumbnail(item), {
                 width: 125,
               })}
+              alt={`Thumbnail of ${item.title}`}
               crossOrigin=""
             />
           </Box>

src/stores/Howto/howto.store.tsx

@@ -325,6 +325,7 @@ export class HowtoStore extends ModuleStore {
       const slug = await this.setSlug(values)
       const previousSlugs = this.setPreviousSlugs(values, slug)
       const total_downloads = values['total_downloads'] ?? 0
+      const cover_image_alt = values.cover_image_alt ?? ''
 
       const keywords = getKeywords(values.title + ' ' + values.description)
       keywords.push(_createdBy)
@@ -346,6 +347,7 @@ export class HowtoStore extends ModuleStore {
         steps,
         title,
         keywords,
+        cover_image_alt,
         ...(latestCommentDate ? { latestCommentDate } : {}),
         ...(files ? { total_downloads } : {}),
         ...(category ? { category } : {}),

src/utils/formatImageListForGallery.ts

@@ -5,6 +5,7 @@ import type { IConvertedFileMeta } from 'src/types'
 
 export const formatImagesForGallery = (
   imageList: (IUploadedFileMeta | File | IConvertedFileMeta | null)[],
+  altPrefix?: string,
 ) => {
   if (!imageList) {
     return []
@@ -13,10 +14,11 @@ export const formatImagesForGallery = (
   return imageList
     .filter(Boolean)
     .filter((i: any) => !!i?.downloadUrl)
-    .map((i: any) => ({
-      downloadUrl: i.downloadUrl,
-      thumbnailUrl: cdnImageUrl(i.downloadUrl, {
+    .map((image: any, index: number) => ({
+      downloadUrl: image.downloadUrl,
+      thumbnailUrl: cdnImageUrl(image.downloadUrl, {
         width: 150,
       }),
+      alt: `${altPrefix ? altPrefix + ' ' : ''}Gallery image ${index + 1}`,
     }))
 }