Added accessible labelling to image widget components

bcgov · Sep 10, 2024 · f9a2b71 · f9a2b71
1 parent d6ee77e
commit f9a2b71
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Image/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Image/Form.tsx
@@ -162,12 +162,21 @@ const Form = () => {
                 <form onSubmit={uploadImageAndSubmit}>
                     <Grid container direction="row" alignItems={'flex-start'} justifyContent="flex-start" spacing={2}>
                         <Grid item xs={12}>
-                            <MetLabel>Description</MetLabel>
+                            <label htmlFor="description">
+                                <MetLabel>Description</MetLabel>
+                            </label>
                             <Controller
                                 name="description"
                                 control={control}
                                 render={({ field }) => (
-                                    <TextField {...field} placeholder="Description" multiline maxRows={4} minRows={4} />
+                                    <TextField
+                                        {...field}
+                                        id="description"
+                                        placeholder="Description"
+                                        multiline
+                                        maxRows={4}
+                                        minRows={4}
+                                    />
                                 )}
                             />
                             <When condition={errors.description?.message !== undefined}>
@@ -177,7 +186,9 @@ const Form = () => {
                             </When>
                         </Grid>
                         <Grid item xs={12}>
-                            <MetLabel>Image Upload</MetLabel>
+                            <label htmlFor="select-file-button">
+                                <MetLabel>Image Upload</MetLabel>
+                            </label>
                             <Controller
                                 name="image_url"
                                 control={control}
@@ -197,12 +208,14 @@ const Form = () => {
                             </When>
                         </Grid>
                         <Grid item xs={12}>
-                            <MetLabel>Image Alt Text</MetLabel>
+                            <label htmlFor="alt_text">
+                                <MetLabel>Image Alt Text</MetLabel>
+                            </label>
                             <Controller
                                 name="alt_text"
                                 control={control}
                                 render={({ field }) => (
-                                    <TextField {...field} multiline maxRows={4} placeholder="Alt Text" />
+                                    <TextField {...field} id="alt_text" multiline maxRows={4} placeholder="Alt Text" />
                                 )}
                             />
                             <When condition={errors.alt_text?.message !== undefined}>

diff --git a/met-web/src/components/imageUpload/index.tsx b/met-web/src/components/imageUpload/index.tsx
@@ -48,7 +48,7 @@ export const ImageUpload = ({
                 <BodyText size="small" sx={{ color: colors.surface.gray[80] }}>
                     Supported formats: JPG, PNG, WEBP
                 </BodyText>
-                <Button variant="secondary" size="small" sx={{ mt: '1.5em' }}>
+                <Button id="select-file-button" variant="secondary" size="small" sx={{ mt: '1.5em' }}>
                     Select File
                 </Button>
             </Uploader>