Не дизейблите кнопки

Сижу ковыряюсь в доступности некоторых компонентов, вспомнил одну полезную статью.

Как часто делают, когда нужно, чтобы пользователь не отправлял форму? Например, когда он только что нажал кнопку «Отправить форму» и интерфейс ждёт ответа от бекенда. Правильно, добавляем атрибут disabled — и всё, браузер всё выключит за нас. Правда же?

Крис Фердинанди подсвечивает, что нет. Во-первых, я всё ещё могу перейти в какой-нибудь input и нажать в нём Enter / Return. Если форма свёрстана как форма, то по умолчанию форма отправится ещё раз. Получается, кнопку выключили, но проблему не решили. UPD. Спасибо подписчикам, обратили внимание на ошибку в статье, есть спека, в которой это поведение продумано, а я поверил и не проверил.

Во-вторых, фокус по кнопке в этот момент сбрасывается. То есть клавиатурная навигация ломается, доступность тоже. Пользователи скринридеров после дизейбла кнопки телепортируются непонятно куда, точнее в начало документа.

В статье предлагается решение с использованием JavaScript. Правильнее будет навесить событие submit на форму, внутри колбека проверить, можно ли отправлять. Если надо визуально «выключить» кнопку, то стилизуем её как неактивную, но не дизейблим.

https://gomakethings.com/dont-disable-buttons/