Fix / Accessibility: Focus lost when submitting a form

[langemike]

When submitting a form, the submit button gets disabled. This causes a bug on the Android screen reader. The button focus is lost and is set to the body-element instead. This causes the page title to be read by the screen reader instead of a potential form error message.

Removing the disabled attribute - while maintaining the aria-disabled attribute - to fix the issue raises the question where the focus should be set when a generic error occurs. This error message is invisible when it's a validation error and visible on any other error. I reasoned to keep it simple: maintain the focus on the submit-button, so the users know where they are in the UI instead of moving the focus to something that we consider the most "relevant" element.

A disabled button should still be able to receive focus and be read by the screen reader. A good example is the "Start Watching" button which can be in a disabled-state for an upcoming live event.

aria-disabled has the same purpose as the native disabled attribute, but the disabled attribute makes the button non-focusable/tabbable causing this issue. Strangely enough only for submit-buttons and on Android...

Some related articles:

• https://www.reddit.com/r/reactjs/comments/18hc7pz/should_you_use_ariadisabled_or_disabled_for
• https://ux.stackexchange.com/a/103246
• https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/#disabling-the-submit-button

[langemike]

@AntonLantukh I get the following error for the deploy preview / lighthouse test throw new Error(`Input required and not supplied: ${name}`);

Is there something I can do this fix this? I do not understand the cause as it seems unrelated to my minor change.

[ChristiaanScheermeijer]

^ should be fixed in the next PR because @langemike was not a contributor yet when submitting this PR (GitHub security)