Console warning for Editor with Bootstrap 5 and Foundation

Loren Maxwell

For this example: https://editor.datatables.net/examples/styling/bootstrap5.html

When a record is selected and the Editor modal is closed, the following warning comes up 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, 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.
Element with focus: <button.btn btn-primary>
Ancestor with aria-hidden: <div.modal fade DTED> <div class=​"modal fade DTED" style=​"display:​ block;​" aria-hidden=​"true">​…​</div>​

I'm not an expert on accessibility but in doing some research it seems the button on the modal (Element with focus: <button.btn btn-primary>) still has the focus when the modal closes, which generates the warning.

Loren Maxwell

Happens with Foundation also: https://editor.datatables.net/examples/styling/foundation.html

I checked the other style libraries and the DataTables default and they all seem fine.

allan

Interesting - thank you. I'll take a look at this in the new year - probably Friday.

Allan

allan

What's happening is that when one clicks on the submit button, it gains focus. Then the submit happens and is successful, so the modal is hidden. Chrome throws a warning up for that, about hiding the element that has focus. So the solution will be to blur the focus before closing.

I've committed a change for that and this is the workaround if you want to address the issue immediately before the next release of Editor:

editor.on('close', function () {
    if ($(document.activeElement, 'div.DTE').length) {
      document.activeElement.blur();
    }
});

Thanks for letting me know about this.

Allan