This is really cool! The only thing that makes it a little ugly for me is that when I click on it, my browser puts an ugly grey box around the text like I'm selecting it. Could this be solved by immediately changing the focus of the input?
the unclickability is also an accessibility issue imo. I know which problem it solves, but creates another when the site becomes unresponsive due to connection loss etc.
This is usually handled by returning the button to its normal state after an error or normal response. With ajax forms you have to catch more errors so if it isn't done it's just because the developer didn't take the time to set it up properly.
I agree with you on that. The primary usage mode for these buttons are probably AJAX forms, and those can be very frustrating for lots of reasons. I think it's great to have some kind of visual feedback that you're action is being performed, but at the same time transmissions errors should not result in a stuck app. That's why I think the UI practice suggested by these buttons is likely to result in user frustration, but still there is no additional usability loss when removing the focus from an already disabled button.
Genuinely interested: how would it be more usable if the buttons remained clickable after they'd been clicked? If you lost your connection, wouldn't you expect some kind of error? In that case how would it be more usable to be able to click the button again?
if I lose connection and the form is unresponsive I have to f5. often forms have some custom js selectors and after refresh some elements (or even whole formsets) lose their data.
of course an error would be nice, but the main goal is to submit the form I spent the last minutes filling in.
