BA: add dropzone aria label

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@0.0.23
+
 ## 0.0.30
 
 ### Patch Changes

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/design-system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/design-system
 
+## 0.0.23
+
+### Patch Changes
+
+- Add `InputProps` prop and a default `aria-label` to the input.
+
 ## 0.0.22
 
 ### Patch Changes

packages/design-system/components/Dropzone/index.tsx

@@ -23,6 +23,7 @@ const Dropzone: FC<DropzoneProps> = ({
   maxFileSize = 15,
   subTitle = `Max. File Size: ${maxFileSize}MB`,
   DropzoneOptions,
+  InputProps,
 }) => {
   const [files, setFiles] = useState<string | undefined>(storedImg)
   const { sendToast } = useNotification()
@@ -49,10 +50,12 @@ const Dropzone: FC<DropzoneProps> = ({
   }
 
   const renderContent = () => {
+    const ariaLabel = 'Drag and drop files to upload'
+
     if (files)
       return (
         <>
-          <input {...getInputProps()} />
+          <input {...getInputProps()} aria-label={ariaLabel} {...InputProps} />
           <Card>
             <Box p={2} display="flex" flexDirection="column" alignItems="center">
               <img
@@ -69,7 +72,7 @@ const Dropzone: FC<DropzoneProps> = ({
     return (
       <div className="container w-full max-w-none">
         <InputContainer {...getRootProps({ isFocused, isDragAccept, isDragReject })}>
-          <input {...getInputProps()} />
+          <input {...getInputProps()} aria-label={ariaLabel} {...InputProps} />
           {isDragReject ? (
             <>
               <CancelIcon />

packages/design-system/components/Dropzone/types.ts

@@ -1,3 +1,5 @@
+import { InputHTMLAttributes } from 'react'
+
 import { Theme } from '@mui/material/styles'
 import type { Accept, DropzoneOptions } from 'react-dropzone'
 
@@ -17,4 +19,5 @@ export interface DropzoneProps {
   subTitle?: string
   maxFileSize?: number
   DropzoneOptions?: Partial<DropzoneOptions>
+  InputProps?: InputHTMLAttributes<HTMLInputElement>
 }

packages/design-system/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/design-system",
   "description": "Design System components and configurations.",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/wagtail/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/wagtail
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@0.0.23
+
 ## 1.0.6
 
 ### Patch Changes

packages/wagtail/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/wagtail",
   "description": "BaseApp Wagtail",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,