Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

Description

Problem Solved by This PR

feat(useFileDialog): Attach the element to the DOMs body but making it "invisible and add id to the function config！

Specific Changes

1. Invisible Handling and Mounting of the input Element: To ensure that the input element can be accessed normally when using automation testing tools like Playwright, we set CSS styles to make it invisible on the page and then mounted the element to the body node of the DOM. This approach not only ensures that the element does not affect the visual layout of the page but also allows testing tools to interact with it properly.
2. Adding the id Configuration: A new id option has been added to the function configuration of useFileDialog. Users can use this option to assign a unique id to the created element. This improvement significantly enhances the element's accessibility in assistive tools (such as screen readers), making it more convenient for people with disabilities to use this feature.
3. Removing the Element When the Component is Unmounted: To avoid memory leaks, the input element is removed from the DOM node when the tryOnScopeDispose scope is destroyed. This operation ensures that the relevant memory resources are released in a timely manner when the component is no longer in use.

import { useFileDialog } from '@vueuse/core';

const { files, open, reset, onCancel, onChange } = useFileDialog({
  accept: 'image/*',
  directory: false,
  id: 'my-file-dialog', // Newly added id configuration
});

onChange((files) => {
  // Handle the selected files
});

onCancel(() => {
  // Handle the cancellation operation
});

Additional context

In this PR, please pay special attention to the improvement of the functionality's accessibility brought by the addition of the id configuration, as well as the optimization of memory management through the logic of removing the element when the component is unmounted.