Accessibility warning: “Blocked aria-hidden” when using frappe.confirm inside modal

ERPNext
, , ,
1

Hi all,

I’m facing an accessibility warning in the browser console when using a custom frappe.confirm wrapper function.

Here’s my function:

const blurAndConfirm = (message, onYes, onNo) => {
    document.activeElement?.blur();
    frappe.confirm(message, onYes, onNo);
};

When this function is triggered, I see the following warning in the console:

Blocked aria-hidden on an element because its descendant retained focus. 
The 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.

Focused element:

<button class="btn btn-secondary btn-sm btn-modal-secondary"></button>

Ancestor with aria-hidden:

<div class="modal fade" style="overflow: auto; padding-right: 11px; display: none;" tabindex="-1" aria-hidden="true">...</div>

It seems to happen because frappe.confirm() opens a new modal while another modal or element still retains focus.

Questions:

  • Is this warning safe to ignore, or does it indicate a potential accessibility issue?

  • Would it be better to use inert instead of aria-hidden in this case?

  • Has anyone else faced this when triggering frappe.confirm() from a modal or active button?