To-dos snoozing > Usability issues due to rendering buttons within a link
As part of the to-dos snoozing implementation, we have started noticing some usability issues due to rendering buttons within a link. Rendering interactive elements within <a> elements is technically forbidden: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary.
Up until recently, the issue was hidden by the fact that we were rendering simple action buttons (resolve/un-resolve) and short-circuiting the click events' propagation to make sure that clicking on one of these buttons wouldn't trigger the parent link's navigation event.
The issue has become more apparent since implementing the snoozing feature (currently hidden behind the todos_snoozing feature flag) as it revolves around a disclosure dropdown with more complex event listeners attached. More specifically, disclosure dropdowns leverage the outside directive which detects when the user clicked or focused an item outside of the dropdown's panel in order to close it.
When rendered within a to-do link, this behavior is broken in some browsers (Firefox at least). It seems to be impossible to snooze to-dos as clicking on any option only results in the dropdown getting closed.
This is due to the <a> element receiving a focusin event when an item within the disclosure dropdown is clicked. This results in the outside directive considering that the user interacted with something outside of the dropdown and therefore closing the panel before the click event could hit the snoozing option the user meant to activate.
Possible solutions
Account for this edge-case in the outside directive
A possible fix would be to tweak the outside directive so that it ignores focusin events that got fired right after a click event: gitlab-ui!4919 (closed). Theoretically, this should produce the expected behaviors in all cases as we likely only care about focusin events for keyboard navigation, and about click events for mouse navigation, so it might be preferable to handle both separately anyways. While this should ensure the snoozing dropdown works properly within to-dos, it doesn't change the fact that rendering interactive elements within links is invalid, so we are improving support for a bad practice, which might not be desirable.
Revisit the layout
Another option would be to revisit the layout so that the link and the actions are properly separated. This would require some redesign to relocate the buttons in a way that preserves the to-do items usability while visually separating the to-do link from its associated actions.