Hidden submit buttons are confussing for keyboard users
Modals are used in various parts of the CiviCRM. For example:
The two buttons in the bottom-right are actually generated based on buttons within the modal content, which are hidden with CSS. With this CSS removed, the modal actually looks like this:
The problem is that these buttons are still keyboard focussable when tabbing. If a user hits their enter key whilst one of these keys are focused, then the modal may be saved or cancelled without any visual indication of what they triggered.
The code contains this comment, which is fair enough if a field is actually focussed but not when a non-visible field is focussed:
// display:none causes the form to not submit when pressing "enter"
I'd like to propose that the hidden buttons are made non-focussable with tabindex="-1"
. I think this should be a safe change, but it would be good to hear if anyone sees any potential issues with this change.
For accessibility, ideally the focussable submit button should be within the form. However, as there is consistency across how modals work within CiviCRM I think the proposed change should be ok from an accessibility point of view.