The button active effect can prevent it being clicked

[mrdaniellewis]

Summary of problem

Buttons have an :active css property of transform: translate(0, 2px).

This causes the top of the button to move down when active creating a skeuomorphorphic effect of the button being pressed down.

A button click event occurs on a pointer up, and only if the pointer is still over the target.

Unfortunately this means if you click the button in the top 2px, the button moves down and the pointer is no longer over the button on pointer up. The result is no click action

Steps to replicate

In your browser console find a button in the design system (eg on https://citizens-advice-design-system.netlify.app/components/button/)

View the button in the inspector panel, and run $0.addEventListener('click', () => console.log('clicked')) to add a click event to it.

Click in the middle of the button and ensure the console logs "clicked".

Now click in the top two pixels of the button. You may want to zoom in so this 2px target area is larger. Notice the pointer changes to a hand to show it as clickable.

Expected behaviour

the console logs "clicked"

Actual behaviour

the console logs nothing

Context

https://citizens-advice-design-system.netlify.app/components/button/
Confirmed on Firefox, Chrome and Safari