What can cause click() method to fail?

I have an element, a checkbox, with this HTML:

<button type="button" class="_f_V1 noMargin o365button" aria-labelledby="_ariaId_28" role="checkbox" aria-checked="false">
    <span class="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"> </span>
    <span class="_fc_4 o365buttonLabel _fc_2" id="_ariaId_28" style="display: none;"></span>
</button>

Note it's a button element even though it behaves like an <input [type="checkbox"]> while it isn't.

enter image description here

I aim to select and click on this element with the click(). The selection is correct, but the click() method fails.

What I did:

document.querySelector('._f_V1.noMargin.o365button').click();

Yet nothing happens - the checkbox won't be checked.

Given this (first) element is but one of a list of similar elements, I've also tried:

(()=>{
    document.querySelectorAll('button span').forEach((e)=>{
        e.click()
    });
})();

Again, neither the first, nor any other checkbox is selected.

From running querySelector() and querySelectorAll() (with their relevant selectors) in console, I get the elements I want (I don't get undefined), so it means my selections are correct.

Given the selections are correct, why would the click() method have no effect?

When I click with the mouse --- the checkbox is checked but when I use click() on the same element, it doesn't.

If you want to try to reproduce online, you need to have an Hotmail email account with messages that you've already deleted. If this is the case:

---

1. Go to "Deleted items".
2. Go to "recover deleted items".
3. a window will be opened with deleted conversations.
4. Near to each conversation there will be a checkbox (after mouseover). This is the element I'm having the trouble with.

Note: The mouseover just changes opacity of the checkboxes.