build(deps): bump react-dropzone from 12.0.4 to 14.2.1 (#843)

* build(deps): bump react-dropzone from 12.0.4 to 14.2.1

Bumps [react-dropzone](https://github.com/react-dropzone/react-dropzone) from 12.0.4 to 14.2.1.
- [Release notes](https://github.com/react-dropzone/react-dropzone/releases)
- [Commits](https://github.com/react-dropzone/react-dropzone/compare/v12.0.4...v14.2.1)

---
updated-dependencies:
- dependency-name: react-dropzone
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* toolbar: update for breaking changes in ReactDropZone

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Lechner <david@pybricks.com>

src/toolbar/OpenFileButton.tsx

@@ -14,6 +14,8 @@ export interface OpenFileButtonProps {
     readonly id: string;
     /** A unique label for each instance. */
     readonly label: string;
+    /** The accepted file MIME type. */
+    readonly mimeType: string;
     /** The accepted file extension */
     readonly fileExtension: string;
     /** Tooltip text that appears when hovering over the button. */
@@ -40,6 +42,7 @@ export interface OpenFileButtonProps {
 const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
     id,
     label,
+    mimeType,
     fileExtension,
     tooltip,
     icon,
@@ -65,9 +68,7 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
     const buttonSize = isSmallScreen ? SpinnerSize.SMALL : SpinnerSize.STANDARD;
 
     const { getRootProps, getInputProps } = useDropzone({
-        accept: fileExtension,
-        // using File System Access API is blocked by https://github.com/react-dropzone/react-dropzone/issues/1141
-        useFsAccessApi: false,
+        accept: { [mimeType]: [fileExtension] },
         multiple: false,
         noClick: onClick !== undefined,
         onDropAccepted: (acceptedFiles) => {
@@ -124,6 +125,9 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
                         onClick,
                         ...toolbarItemFocusProps,
                         tabIndex: excludeFromTabOrder ? -1 : 0,
+                        // HACK: work around useDropZone "feature" even though
+                        // this role is already implicit on buttons
+                        role: 'button',
                     })}
                 >
                     <input {...getInputProps()} />

src/toolbar/buttons/flash/FlashButton.tsx

@@ -33,6 +33,7 @@ const FlashButton: React.VoidFunctionComponent<FlashButtonProps> = ({ id }) => {
         <OpenFileButton
             id={id}
             label={i18n.translate(I18nId.Label)}
+            mimeType="application/zip"
             fileExtension=".zip"
             icon={icon}
             tooltip={