Button components inconsistent and not properly accessible

Summary of the Problem

The button components are showing a lot of inconsistencies regarding sizings and hover/focus states.

See here, all the buttons inside the same container and using their default props as much as possible: (https://codesandbox.io/s/34vv1j1jz6)

Some of them are also not properly accessible in regards of displaying a focused and active states. This can be reproduced by trying to navigate through the buttons using the Tab key and “clicking” them using the Space key (or Enter key for the LinkButton because it’s an anchor).

List of the Identified Problems

• Some buttons fill the available space differently within the same container.
• SecondaryButton has an area where the cursor becomes pointer that differs from the actual area of the button.
• Only PrimaryButton and LinkButton display any kind of visual feedback when where are focused or clicked through the keyboard (tab and space keys). All the remaining buttons are not accessible.
  • SecondaryButton actually becomes accessible when it has its linkTo prop is defined, because it becomes wrapped within an <a> which is natively accessible on all browsers.
• SecondaryIconButton still changes the cursor to pointer on hover even when disabled, whereas all the other buttons do not.

[montezume]

@jonnybel have you taken a look at this similar issue?

https://github.com/commercetools/ui-kit/issues/29

There was a lot of discussion here as well.

To be frank, I’m leery of touching button refactoring.

[tdeekens]

Personally, I would actually call in a meeting with them to generally raise awareness for these kind of accessiblity concerns so that they’re incorporated in any future elemment and can be strategically adressed in existing ones (from important to less important elements).