Bad example: Timesheet submit button

This month at work, we’ve started using new time tracking software for submitting our timesheets. The process for submitting a timesheet in this system is a truly cursed design pattern. Behold, the “Submit Timesheet” button.

I tried clicking on the “Submit Timesheet” text and nothing happened. I expected this text to be a button because it’s supposed to submit the timesheet, but no, this is not a button.

I asked myself, “Why is there an error icon?”

Then I hovered the mouse cursor over the error icon and saw this:

It’s not very obvious, but this control looks like a switch. When I inspected the switch, this is what I saw, simplified:

<div>
<span>Submit Timesheet</span>
</div>
<div>
<label>
<div>Submit Timesheet</div>
<div>
<div>
<input type="checkbox">
<span></span>
</div>
</div>
</label>
</div>

Issues

1. The switch doesn’t announce the switch role because it is missing role="switch".
2. The visible label text “Submit Timesheet” is not associated with the switch and the switch doesn’t have an accessible name.
3. The <label> element is hidden from all users with CSS, meaning no one can click on the “Submit Timesheet” text to operate the switch.
4. Toggling this switch causes the page to change to a different screen, a violation of SC 3.2.2 On Input.

Please, just use a <button> for submitting forms.