feat(a11y): improvements to attachment field

frontend/src/components/Field/Attachment/Attachment.tsx

@@ -94,28 +94,6 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
       [value, readableMaxSize, showFileSize],
     )
 
-    const ariaDescribedBy = useMemo(() => {
-      const describedByIds = new Set<string>()
-      // Must be in this order so the screen reader reads out something coherent.
-      // 1. Label text (if available)
-      // 2. Initial describedby text (if available)
-      // 3. Max size text (if prop is true)
-      if (inputProps.id) {
-        describedByIds.add(`${inputProps.id}-label`)
-      }
-      inputProps['aria-describedby']
-        ?.split(' ')
-        .map((id) => describedByIds.add(id))
-      if (showMaxSize) {
-        describedByIds.add(maxSizeTextId)
-      }
-
-      // Remove helptext, since label should already consist of the text
-      describedByIds.delete(`${inputProps.id}-helptext`)
-
-      return Array.from(describedByIds).filter(Boolean).join(' ').trim()
-    }, [inputProps, maxSizeTextId, showMaxSize])
-
     const handleFileDrop = useCallback<NonNullable<DropzoneProps['onDrop']>>(
       async ([acceptedFile], rejectedFiles) => {
         if (rejectedFiles.length > 0) {
@@ -204,7 +182,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
     const processedRootProps = useMemo(() => {
       return getRootProps({
         // Root div does not need id prop, prevents duplicate ids.
-        ...omit(inputProps, 'id'),
+        ...omit(inputProps, ['id', 'aria-describedby']),
         // Bunch of extra work to prevent field from being used when in readOnly
         // state.
         onKeyDown: (e) => {
@@ -214,9 +192,8 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
           }
         },
         tabIndex: value ? -1 : 0,
-        'aria-describedby': ariaDescribedBy,
       })
-    }, [ariaDescribedBy, getRootProps, inputProps, value])
+    }, [getRootProps, inputProps, value])
 
     const processedInputProps = useMemo(() => {
       return getInputProps({
@@ -230,8 +207,9 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
         <Box __css={styles.container}>
           <Box
             {...processedRootProps}
-            ref={mergedRefs}
-            __css={value ? undefined : styles.dropzone}
+            {...(!value
+              ? { role: 'button', ref: mergedRefs, __css: styles.dropzone }
+              : {})}
           >
             {value ? (
               <AttachmentFileInfo
@@ -242,6 +220,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
               <AttachmentDropzone
                 isDragActive={isDragActive}
                 inputProps={processedInputProps}
+                readableMaxSize={readableMaxSize}
               />
             )}
           </Box>
@@ -251,6 +230,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
               color="secondary.400"
               mt="0.5rem"
               textStyle="body-2"
+              aria-hidden
             >
               Maximum file size: {readableMaxSize}
             </Text>

frontend/src/components/Field/Attachment/AttachmentDropzone.tsx

@@ -1,29 +1,34 @@
 import { DropzoneInputProps, DropzoneState } from 'react-dropzone'
-import { chakra, Icon, Text, useStyles } from '@chakra-ui/react'
+import { chakra, Icon, Text, useStyles, VisuallyHidden } from '@chakra-ui/react'
 
 import { BxsCloudUpload } from '~assets/icons/BxsCloudUpload'
 import Link from '~components/Link'
 
 interface AttachmentDropzoneProps {
   inputProps: DropzoneInputProps
   isDragActive: DropzoneState['isDragActive']
+  readableMaxSize?: string
 }
 
 export const AttachmentDropzone = ({
   inputProps,
   isDragActive,
+  readableMaxSize,
 }: AttachmentDropzoneProps): JSX.Element => {
   const styles = useStyles()
 
   return (
     <>
+      <VisuallyHidden>
+        Click to upload file, maximum file size of {readableMaxSize}
+      </VisuallyHidden>
       <chakra.input {...inputProps} data-testid={inputProps.name} />
       <Icon aria-hidden as={BxsCloudUpload} __css={styles.icon} />
 
       {isDragActive ? (
-        <Text>Drop the file here ...</Text>
+        <Text aria-hidden>Drop the file here...</Text>
       ) : (
-        <Text>
+        <Text aria-hidden>
           <Link isDisabled={inputProps.disabled}>Choose file</Link> or drag and
           drop here
         </Text>

frontend/src/components/Field/Attachment/AttachmentFileInfo.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { BiTrash } from 'react-icons/bi'
-import { Flex, forwardRef, Text, VisuallyHidden } from '@chakra-ui/react'
+import { Flex, Text, VisuallyHidden } from '@chakra-ui/react'
 
 import IconButton from '~components/IconButton'
 
@@ -11,40 +11,35 @@ export interface AttachmentFileInfoProps {
   handleRemoveFile: () => void
 }
 
-export const AttachmentFileInfo = forwardRef<AttachmentFileInfoProps, 'div'>(
-  ({ file, handleRemoveFile }, ref) => {
-    const readableFileSize = useMemo(
-      () => getReadableFileSize(file.size),
-      [file.size],
-    )
+export const AttachmentFileInfo = ({
+  file,
+  handleRemoveFile,
+}: AttachmentFileInfoProps) => {
+  const readableFileSize = useMemo(
+    () => getReadableFileSize(file.size),
+    [file.size],
+  )
 
-    return (
-      <Flex
-        ref={ref}
-        justify="space-between"
-        bg="primary.100"
-        py="0.875rem"
-        px="1rem"
-      >
-        <VisuallyHidden>
-          File attached: {file.name} with file size of {readableFileSize}
-        </VisuallyHidden>
-        <Flex flexDir="column" aria-hidden>
-          <Text textStyle="subhead-1" color="secondary.500">
-            {file.name}
-          </Text>
-          <Text textStyle="caption-1" color="secondary.500">
-            {readableFileSize}
-          </Text>
-        </Flex>
-        <IconButton
-          variant="clear"
-          colorScheme="danger"
-          aria-label="remove file"
-          icon={<BiTrash />}
-          onClick={handleRemoveFile}
-        />
+  return (
+    <Flex justify="space-between" bg="primary.100" py="0.875rem" px="1rem">
+      <VisuallyHidden>
+        File attached: {file.name} with file size of {readableFileSize}
+      </VisuallyHidden>
+      <Flex flexDir="column" aria-hidden>
+        <Text textStyle="subhead-1" color="secondary.500">
+          {file.name}
+        </Text>
+        <Text textStyle="caption-1" color="secondary.500">
+          {readableFileSize}
+        </Text>
       </Flex>
-    )
-  },
-)
+      <IconButton
+        variant="clear"
+        colorScheme="danger"
+        aria-label="Click to remove file"
+        icon={<BiTrash />}
+        onClick={handleRemoveFile}
+      />
+    </Flex>
+  )
+}