(Yes, there is a new version, but right now we are not able to upgrade)

I’m using a SweetAlert2 in our Dev Express Reporting Module.

The steps are:

1. Display Sweet Alert asking for a Report Name
2. Do a check to the server to verify that name is not already in use
3. If it is, show Sweet Alert message as an error
4. On OK, then start the process again.
5. If they hit cancel after the first run, then I see this error:

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

It almost seems that it is an error from Sweet Alert 2, but an impact on the Dev Express Reporting Dashboard:

Error

Does anyone know a way around this or if upgrade would fix it?

All functionality seems to work, except it shows in F12 as an error.

When you hit Cancel, that the F12 Aria error does not occur.

CodePen (Full Code)

        async function promptForNewName() {
            const result = await swal({
                title: "Report Name",
                text: "Please name your report",
                showCancelButton: true,
                input: "text",
                inputValue: "",
                confirmButtonText: "Save",
                showLoaderOnConfirm: false,
                allowOutsideClick: () => !swal.isLoading(),
                inputValidator: (value) => !value ? "Please provide a name for your report" : undefined,
            });

            // Handle the case where the cancel button is clicked
            if (result.dismiss === swal.DismissReason.cancel || !result.value) {
                return null;
            }

            return trimExtraWhiteSpace(result.value);
        }